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, 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 = [];
}

0 coment�rios:

Post a Comment

Labels

Online Training

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

Powered by Blogger.

Recent Posts

Find Us On Facebook

Popular Posts