The applications we create handle volumes of data. Most of the data will be retrieved from services and will be reused in various parts of the application. Let's create a service that can retrieve data using http. The service should be loosely coupled with components, as the primary focus of the component should be to support the view. So, the service can be injected to components using a dependency injection. This approach will enable us to mock the service in order to unit test the component.
Let's create a simple TodoService that returns a list of Todo items. The code snippet of TodoService is shown here. TodoService has a property named todos of the type array that can hold a collection of Todo items and is hardcoded with the Todo items in the constructor:
import {Injectable} from '@angular/core';
import { Todo } from './todo';
@Injectable()
export class TodoService {
todos: Array<Todo>;
constructor() {
this.todos = [
{"title": "First Todo", "completed": false},
{"title": "Second Todo", "completed": false},
{"title": "Third Todo", "completed": false}
]
}
getTodos() {
return this.todos;
}
}
Note that the service decorated with @Injectable is to let Angular know that this service is injectable.
We can inject the injectable TodoService to the constructor of AppComponent, as follows:
import { Component } from '@angular/core';
import { Todo } from './Todo';
import { TodoService } from './TodoService';
@Component({
selector: 'my-service',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
todos: Array<Todo>;
constructor(todoService: TodoService) {
this.todos = todoService.getTodos();
}
}
When bootstrapping, we also need to pass TodoService so that Angular will create an instance of the service and keep it available wherever it is injected. So, let's pass TodoService to the bootstrap function, as illustrated, in the main.ts file:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TodoService } from './TodoService';
@NgModule({
imports: [
BrowserModule,
],
declarations: [
AppComponent,
],
providers: [ TodoService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Note that the injectable service is wrapped with square brackets. This is one way of applying the dependency injection. Refer to Chapter 2, Angular Building Blocks - Part 1, for more information on the dependency injection in Angular. Angular has improved dependency injection that takes care of creating an instance of TodoService and injecting it to Component.
In the app.component.html template, we iterate each item of the todos property in AppComponent and list them:
<h2>My Todo List</h2>
<ul>
<li *ngFor="let todo of todos">
{{ todo.title }} - {{ todo.completed }}
</li>
</ul>
The content of this template will be rendered under the <my-service> special tag in the body of the index.html file:
<body>
<my-service>Loading...</my-service>
</body>
On running, the application will render the list of todo items, as shown:
