Trong phần này, chúng ta sẽ cùng nhau tạo một service AnimalService
để quản lý danh sách các con vật và nhúng nó vào AppComponent
.
Ta tạo file animal-service.ts
cùng cấp với app.ts
:
1 | export class AnimalService { |
Một cách đơn giản, service
trong Angular 2 chỉ là một class bình thường. Ở đây, ta có class AnimalService
nó có hai phương thức sẽ được sử dụng trong AppComponent
là getAnimals
và addAnimal
.
Trong AppComponent
ta inject AnimalService
vào như sau:
1 | import {AnimalService} from './animal-service'; |
Trong constructor
của AppComponent
ta thêm vào tham số animalService
, từ khóa private
trước tham số sẽ báo cho TypeScript biết để tự động gán animalService
trở thành một private member của AppComponent
. Do đó trong hàm onSubmit
ta có thể sử dụng this.animalService
.
Angular 2 được xây dựng đi kèm với nó là Dependency Injection framwork
, framwork này sẽ tự động nhúng một instance của AnimalService
vào AppComponent
. Tuy nhiên để được như vậy, ta cũng cần phải đồng thời khai báo AnimalService
khi bootstrap App.
1 | bootstrap(AppComponent, [AnimalService]); |
Nhúng service vào service
Nếu AnimalService
của chúng ta cũng cần một service khác thì sao, ví dụ LogService
. Khi đó AnimalService
có thể như thế này:
1 | import {Injectable} from 'angular2/angular2'; |
Như vậy, để inject một service vào service khác, ta nhớ phải sử dụng @Injectable()
.
Tổng kết
Trên đây là cách đơn giản để inject dependency vào Angular2. Thực tế có nhiều cách khác nhau để tạo một instance của service tùy từng mục đích mà chúng ta sẽ cùng nhau tìm hiểu trong những phần sau.