Angular 2 is the latest framework for building web applications using typescript. Recently, angular team is skipped the version 3.x because, router package is shipped with 3.x previously, so instead of putting into 3.x, choose to move to 4.x.

Monday, 26 December 2016

How to enable production mode in Angular2

Angular2 is running in development mode.call enableProdMode() to disable assertion checks and other checks in the production mode. To enable production mode, importing and executing the following function.
import { AppModule } from './app/app.module';
    import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';
if (process.env.ENV === 'production') {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Thursday, 8 December 2016

User Input in angular2

So far we discussed about data binding. Now will learn, how to pass data into the components.

@Input
We have to use @input decorator to define an input.
 
<my-name [name]=""username"></my-name>

import { Component, Input } from '@angular/core'
@Component({
selector: 'my-name' ,
template: '<p>{{name.fullname}}'
})
export class UserDetails {
 @Input() name;
  constructor() {}
}

Data Display in Angular 2


With the interpolation, you can display a component property in the template.

import { Component } from '@angular/core';
@Component({
  selector: 'displayapp',
  template: `
    <p>My name is : {{name}}</p>  `
})
export class MyComponent {
  name = 'Alex';
}





Monday, 21 November 2016

Service using dependency injection

Lets go through the below sample code
Without using service in angular 2 :
Import { Component } from ‘@angular/core’;


@Component({
Selector : ’student-list’,
template: '<h2>Students Data</h2>
<ul *ngFor ="let student of students">
  <li> {{student.name}} </li>
  </ul>'
})
export class StudenListComponent {

students = [{"id":"73250","name":"srinivas","class":"5"},{"id":"73257","name":"aditri","class":"6"},{"id":"73259","name":"karuna","class":"3"},{"id":"73258","name":"ashrith","class":"1"}];
}
I will explain you with the following things.

Create the service
Register the service
Declare dependency

Service is a class for a specific purpose.We will create a class  StudentService.

create a new file student.service.ts
we need to export this class, so that we can import other classes.

 export class StudentService{

 }

 It has one job, it should provide the data to the component.  We will have method "getStudents()"

  export class StudentService{
     getStudents(){
   
     }
 }

 we will move the above hardcoded data to the service from component and use the service.

  export class StudentService{
     getStudents(){
     return  [{"id":"73250","name":"srinivas","class":"5"},{"id":"73257","name":"aditri","class":"6"},{"id":"73259","name":"karuna","class":"3"},{"id":"73258","name":"ashrith","class":"1"}];
     }
 }

 Go to the StudenListComponent class and declare student empty array.

 app.component.ts

Import { Component } from ‘@angular/core’;

@Component({
Selector : ’student-list’,
template: '<h2>Students Data</h2>
<ul *ngFor ="let student of students">
  <li> {{student.name}} </li>
  </ul>'

})

export class StudenListComponent {

students = [];
}

Any time you create a service, you decarate with Injectable decorator.

 import {Injectable} from '@angular/core'
  @Injectable
  export class StudentService{
     getStudents(){
     return  [{"id":"73250","name":"srinivas","class":"5"},{"id":"73257","name":"aditri","class":"6"},{"id":"73259","name":"karuna","class":"3"},{"id":"73258","name":"ashrith","class":"1"}];
     }
 }

 we are created a service which retuns students data. Register the service (providers :[StudentService]) shown below code..
 Import { Component } from ‘@angular/core’;
 Import { EmployeeService} from './student.service';
@Component({
Selector : ’student-list’,
template: '<h2>Students Data</h2>
<ul *ngFor ="let student of students">
  <li> {{student.name}} </li>
  </ul>',
 
  providers :[StudentService]

})

export class StudenListComponent {

students = [];
}

Sunday, 20 November 2016

Systemjs in angular2 - Universal dynamic module loader



Problem :
If the project having lot more dependencies, difficult to maintain.
Lot more script tags are problem.
We  have a SystemJS, which can solve all these problems.

SystemJS is a very good dynamic module loader an open source javascript framework.
When we create a project, we devide the project into small components.
For example, I am building an HRMS system. I will create component for Employee, Departments
I will add Employee.js to js folder

function Employee() {
}
Then add Departments.js to js folder
function Department(){
}

In order to load these files in my html, I need to add

<html>
<head>
<meta charset=”utf-8” />
</head>

</html>








Tuesday, 15 November 2016

Templates in Angular 2

Angular 2.x templates are similar to Angular 1.x templates  except few syntactical changes.

HTML :

Angular uses HTML language for templates.
<div>
         <h1>Angular Tutorials by Srinivas Nidadavolu</h1>
</div>

Interpolation : 

 Angular uses expression (Double curly braces)

<div>
         <h1>Angular Tutorials by {{data.name}}</h1>
</div>

it print 

Angular Tutorials by Srinivas Nidadavolu

<p>5+5 Sum is {{5+5}}</p>

it print 

 5+5 Sum is 10


Another example :

lets create a basic component and it has name property that we are going to use in our template.

@Component({
 selector:'my-app',
 template:'my-app.html'
})

export class MyAppComponent {
name = 'Srini'
}

in the template , we can use name

<p>{{name}}</p>

it prints in the html page

Srini




 




@NgModule in Angular 2

Initial plan for Angular 2 was drop the angular.module(). Angular team announced the killing of ng.module() during the ng-europe conference.

the syntax looks like this in angular 1.x.
var myApp = angular.module('myModule', []);

Angular 2 has reintroduced the module concept@NgModule decorator is used to declare classes as modules and attach module metadata.

Angular modules are help us to organize the application code into blocks of functionalities and extend the capabilities of external libraries.

NgModule manages the dependencies for the application. You can group the certain features, utilities and business logic etc.

Without @NgModule

@Component({ selector: 'my-component', template: ``, providers: [MyUserProvider], directives: [MyComponent] }) export class MyComponent {}

Without @NgModule
For each component created, you have to declare a relationship it had with other components. Managing  all the dependencies is very difficult. Also difficult to know if any error occur for particular part of the functionality.

With @NgModule
myapp.component.ts


Lets see the below component

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>Welcome to angular2.in</h1>', }) export class MyAppComponent {}

Another component

import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', template: '<h1>Welcome to angular2.in</h1>', }) export class AnotherComponent {}


import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MyAppComponent } from './myapp.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ MyAppComponent, AnotherComponent ],
bootstrap: [ MyAppComponent ] })
export class MyAppModule { }
With @NgModule, it is easy to manage the dependencies at single place.

Labels

Online Training

Your Name :
Your Email: (required)
Your Message: (required)

Powered by Blogger.

Recent Posts

Find Us On Facebook

Popular Posts