How to develop with Angular Service (Angular 4 Service)

The previous post, we had introduced Angular Components (Angular4 Component). And in the tutorial, JavaSampleApproach will continuously show you how to use Angular Services (Angular4 Services) to develop an Angular Application.

Related articles:
How to setup Angular IDE with Spring Tool Suite
Create a new Angular4 Component – Multiple Components Angular Application

I. Technologies

– Angular 4
– SpringToolSuite: Version: 3.8.0.RELEASE

II. Angular Service

What is Angular Service?

angular service architecture

Angular Service is an JavaScript function that’s responsible for doing a specific task. Using Services to exchange and processing data then keeps Components focused on doing business logic on the view. So it’s very helpful to organize a big project that makes codes more clear and clean for development and reusability.

III. Practice

Step to do:
– Create an Angular Service
– Implement logic for Angular Application
– Run and check results

***Note: to do the tutorial, We reuse the sourcecode and continue with the previous post. So please check out it for more details:
Create a new Angular4 Component – Multiple Components Angular Application

1. Create an Angular Service

Right click on /angular4client/src/app, choose: File -> New -> Service:

create angular4 service

angular service - named

Press Finish,

angular service - create successfully - logs done

-> New project’s structure:

angular service new project structure

Log: “WARNING Service is generated but not provided, it must be provided to be used”
-> Need register the DataService by using providers property. So we will do it later in a below session.

We got 2 new files: data.service.spec.ts and data.service.ts. Check sourcecode of the main file data.service.ts:

2. Implement Logic for Angular Application
2.1 Create a Customers Mock Data

– Right click on folder /angular4client/src/app, choose File -> -> TypeScript Source File, create a file mock-customers.ts:

2.2 Implement DataService

– Modify DataService as below:

A Promise is used to make the DataService to be an Async services that supports a call back when the processing is done.

2.3 Inject DataService and re-implement AppComponent

To use DataService, AppComponent must inject it:

Is it Done?
-> NO, an exception will be thrown out when running:

-> The reason comes from the above WARNING Log. For resolving it, We need register DataService by using provider property. And having 2 approaches for doing it:

– Add DataService on providers array property of AppModule in app.module.ts file.

With the approach, DataService will be ready to use at all Components of the Angular Application.

– Add providers: [DataService] inside @Component decorator of the components that will inject DataService to use.
And in the tutorial, we implement code with the approach:

Re-implement getCustomers():

this.dataService.getCustomers() will return Promise, so we must use .then(...) to resolve returned data as Customer[].

Full Code:

2.4. Use Twitter Bootstrap to modify Component’s views

Now, we can use Twitter Bootstrap to make up the Angular-App.
– Open file /angular4client/src/index.html then add Twitter Bootstrap’s stylesheet:

– Edit AppComponent‘s template app.component.html:

3. Run & check results

Run the Angular App with commandline npm start. Then make a request http://localhost:4200/ -> Check results:

– Customer List:

customer lists

– Customer Details:

IV. Sourcecode


By grokonez | May 23, 2017.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *