Sharing Top Content from the Angular-sphere.

Beginner’s Guide to Angular 4: Services

  • Fetching data for the components to display is handled by Angular services.
  • From the official documentation: – – In this tutorial, you’ll see how to create an Angular service for fetching data for an Angular component.
  • Another advantage of using Angular services is that it makes it easier to share data between two separate components.
  • Here is how it looks: – – As seen in the above code, you have made a request to the API URL using the Angular module and returned the response as .
  • You created a Word component which queries the entered keyword against an Angular service and displays the returned data in the component template file.

In the first part of the beginner’s guide to Angular tutorial series, you learnt what components are in Angular 4 and how to write Angular components. In this part of the tutorial series, you’ll…

In the first part of the beginner’s guide to Angular tutorial series, you learnt what components are in Angular 4 and how to write Angular components. 

In this part of the tutorial series, you’ll learn what services are in Angular and how to use them.

You’ll start by cloning the source code from the first part of the tutorial series.

Once you have the source code, navigate to the project directory and install the required dependencies.

cd AngularComponent npm install

After the dependencies have been installed, start the application by typing the following command:

ng serve

You should have the application running on http://localhost:4200/.

What Are Angular Services?

In an Angular application, components deal with presenting the data to the view. Fetching data for the components to display is handled by Angular services.

Since the data fetching portion is handled separately in Angular services, it makes it easier to mock test services.

Why Angular Services?

From the official documentation:

Components shouldn’t fetch or save data directly and they certainly shouldn’t knowingly present fake data. They should focus on presenting data and delegate data access to a service.

In this tutorial, you’ll see how to create an Angular service for fetching data for an Angular component. 

Another advantage of using Angular services is that it makes it easier to share data between two separate…

Beginner’s Guide to Angular 4: Services