16 Avr Comment crée un Service en Angular2
Un service est une simple class qu’on va l’exporter après comme on a fait avec les components dans le tutoriel précédent.
On va créer premièrement un fichier article.service.ts
import {Injectable} from '@angular/core';
/* On doit importer Injectable */
@Injectable()
/* Le décorateur ici est Injectable() */
export class ArticleService {
/* On va créer un array de type string */
articles: string[];
/* Ici on a crée une méthode qui retoune tout les article qu'on a crée */
getAllArticles(){
this.articles = ['Article 1', 'Article 2', 'Article 3'];
return this.articles;
}
}
Maintenant on doit l’injécter dans notre component article.component.ts
import { Component } from '@angular/core';
import { ArticleService } from './article.service';
/* L'importation du notre service */
@Component({
selector: 'art',
templateUrl: './article.html',
providers: [ ArticleService ],
})
export class ArticleComponent {
articleService: ArticleService;
articles: string[];
constructor(articleService: ArticleService){
this.articleService = articleService;
this.articles = articleService.getAllArticles();
}
}
Le fichier du notre view article.html
Liste des articles
<ul>
<li *ngFor="let single of articles">{{single}}</li>
</ul>