This tutorial lesson demonstrates how to create an Angular service and use dependency injection to include it in your app.
Time required: expect to spend about 15 minutes to complete this lesson.
This lesson starts with the code from the previous lesson, so you can:
If you haven't reviewed the introduction, visit the Introduction to Angular tutorial to make sure you have everything you need to complete this lesson.
If you have any trouble during this lesson, you can review the completed code for this lesson, in the live example for this lesson.
This tutorial introduces Angular services and dependency injection.
Angular services provide a way for you to separate Angular app data and functions that can be used by multiple components in your app. To be used by multiple components, a service must be made injectable. Services that are injectable and used by a component become dependencies of that component. The component depends on those services and can't function without them.
Dependency injection is the mechanism that manages the dependencies of an app's components and the services that other components can use.
Perform these steps on the app code in your IDE.
This step creates an injectable service for your app.
In the Terminal pane of your IDE:
In your project directory, navigate to the first-app
directory.
In the first-app
directory, run this command to create the new service.
ng generate service housing --skip-tests
Run ng serve
to build the app and serve it to http://localhost:4200
.
Confirm that the app builds without error. Correct any errors before you continue to the next step.
This step adds some sample data to your new service. In a later lesson, you replace the static data with a web interface to get data as you might in a real app. For now, your app's new service uses the data that has, so far, been created locally in HomeComponent
.
In the Edit pane of your IDE:
In src/app/home/home.component.ts
, from HomeComponent
, copy the housingLocationList
variable and its array value.
In src/app/housing.service.ts
:
Inside the HousingService
class, paste the variable that you copied from HomeComponent
in the previous step.
Inside the HousingService
class, paste these functions after the data you just copied. These functions allow dependencies to access the service's data.
getAllHousingLocations(): HousingLocation[] { return this.housingLocationList; } getHousingLocationById(id: number): HousingLocation | undefined { return this.housingLocationList.find(housingLocation => housingLocation.id === id); }
You will need these functions in a future lesson. For now, it is enough to understand that these functions return either a specific HousingLocation
by id or the entire list.
Add a file level import for the HousingLocation
.
import { HousingLocation } from './housinglocation';
Confirm that the app builds without error. Correct any errors before you continue to the next step.
HomeComponent
This step injects the new service into your app's HomeComponent
so that it can read the app's data from a service. In a later lesson, you replace the static data with a live data source to get data as you might in a real app.
In the Edit pane of your IDE, in src/app/home/home.component.ts
:
At the top of src/app/home/home.component.ts
, add the inject
to the items imported from @angular/common
. This will import the inject
function into the HomeComponent
class.
import { Component, inject } from '@angular/core';
Add a new file level import for the HousingService
:
import { HousingService } from '../housing.service';
From HomeComponent
, delete the housingLocationList
delete the array entries and assign housingLocationList
the value of empty array ([]
). In a few steps you will update the code to pull the data from the HousingService
.
In HomeComponent
, add this code to inject the new service and initialize the data for the app. The constructor
is the first function that runs when this component is created. The code in the constructor
will assign the housingLocationList
the value returned from the call to getAllHousingLocations
.
housingLocationList: HousingLocation[] = []; housingService: HousingService = inject(HousingService); constructor() { this.housingLocationList = this.housingService.getAllHousingLocations(); }
Save the changes to src/app/home/home.component.ts
and confirm your app builds without error. Correct any errors before you continue to the next step.
In this lesson, you added an Angular service to your app and injected it into the HomeComponent
class. This compartmentalizes how your app gets its data. For now, the new service gets its data from a static array of data. In a later lesson, you refactor the service to get its data from a from an API endpoint.
If you are having any trouble with this lesson, you can review the completed code for it in the live example.
For more information about the topics covered in this lesson, visit:
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/tutorial/first-app/first-app-lesson-09