How to develop with Angular Service (Angular 4 Service)
Tags: angular, angularservice
Published: 2021-05-23 06:59:16

https://grokonez.com/frontend/angular/develop-angular-service-angular4-service

How to develop with Angular Service (Angular 4 Service)

The previous <a href="https://grokonez.com/java-integration/create-new-angular4-component-multiple-components">post</a>, we had introduced <strong>Angular Components</strong> (Angular4 Component). And in the tutorial, <strong>JavaSampleApproach</strong> will continuously  show you how to use <strong>Angular Services</strong> (Angular4 Services) to develop an Angular Application.

Related articles:
- <a href="https://grokonez.com/tool/setup-angular-ide-spring-tool-suite">How to setup Angular IDE with Spring Tool Suite</a>
- <a href="https://grokonez.com/java-integration/create-new-angular4-component-multiple-components">Create a new Angular4 Component – Multiple Components Angular Application</a>

<!--more-->
<h2>I. Technologies</h2>
– Angular 4
– SpringToolSuite: Version: 3.8.0.RELEASE
<h2>II. Angular Service</h2>
What is <strong>Angular Service</strong>?

<img src="https://grokonez.com/wp-content/uploads/2017/05/angular-service-architecture-1.png" alt="angular service architecture" width="570" height="542" class="alignnone size-full wp-image-5417" />

<strong>Angular Service</strong> is an JavaScript function that's responsible for doing a specific task. Using <strong>Services</strong> to exchange and processing data then keeps <strong>Components</strong> 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.
<h2>III. Practice</h2>
<strong>Step to do</strong>:
- Create an <strong>Angular Service</strong>
- Implement logic for <strong>Angular Application</strong>
- Run and check results

<strong>***Note</strong>: to do the tutorial, We reuse the sourcecode and continue with the previous <a href="https://grokonez.com/java-integration/create-new-angular4-component-multiple-components">post</a>. So please check out it for more details:
- <a href="https://grokonez.com/java-integration/create-new-angular4-component-multiple-components">Create a new Angular4 Component – Multiple Components Angular Application</a>
<h3>1. Create an Angular Service</h3>
Right click on <strong>/angular4client/src/app</strong>, choose: <strong>File</strong> -> <strong>New</strong> -> <strong>Service</strong>:

<img src="https://grokonez.com/wp-content/uploads/2017/05/create-angular4-service.png" alt="create angular4 service" width="610" height="361" class="alignnone size-full wp-image-5400" />

<img src="https://grokonez.com/wp-content/uploads/2017/05/angular-service-named.png" alt="angular service - named" width="505" height="364" class="alignnone size-full wp-image-5401" />

Press <strong>Finish</strong>,

<img src="https://grokonez.com/wp-content/uploads/2017/05/angular-service-create-successfully-logs-done-1.png" alt="angular service - create successfully - logs done" width="567" height="266" class="alignnone size-full wp-image-5402" />

-> New project's structure:

<img src="https://grokonez.com/wp-content/uploads/2017/05/angular-service-new-project-structure.png" alt="angular service new project structure" width="319" height="538" class="alignnone size-full wp-image-5403" />

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

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

More at:

https://grokonez.com/frontend/angular/develop-angular-service-angular4-service

How to develop with Angular Service (Angular 4 Service)