Welcome to Angular 4 services<\/p>\n
Angular services are for building out code that can be shared across multiple components. And these are singletons. services restrict the instantiation of a class to one object. It means the methods and properties can be shared throughout your application from a single shared instance.<\/p>\n
These services are best way to store the session data and perfect place to call the web services. And the data is shared to the components with the injecting service. Without hitting the web services we can use the session data in the application. But If you refresh the browser the session service data will be empty. So remember that condition.<\/p>\n
In this tutorial, we provide a basic angular 2 service example using the Angular CLI.<\/p>\n
We\u2019ll be using the\u00a0Angular CLI\u00a0to create our app. Create a new Angular project by running:<\/p>\n
ng new AngularServiceEx<\/strong><\/p><\/blockquote>\n
This will create the new project named as AngularServiceEx project.<\/p>\n
And navigate to root application by cd<\/strong>\u00a0 AngularServiceEx. <\/strong>And run the below command<\/p>\n
Npm install<\/strong><\/p><\/blockquote>\n
This command will download all your dependencies from your package.json file.<\/p>\n
And run the below command to create the service in the project.<\/p>\n
ng g service reference<\/strong><\/p><\/blockquote>\n
It will create the reference.service in the \u2019app\u2019 folder automatically. We don\u2019t need to do anything.\u00a0 It will create the two files in our Angular app<\/p>\n
\n
- a\u00a0reference.service.tsfile under the src\/app directory<\/li>\n
- a\u00a0reference.service.spec.tsfile under the src\/app directory<\/li>\n<\/ul>\n
We will write the service code in the service.ts file.\u00a0 And service.spec.ts file will used for unit testing.<\/p>\n
The\u00a0ng g service\u00a0command won\u2019t automatically configure your root module\u00a0app.module.ts\u00a0to provide the service.<\/p>\n
Services must import the Injectable from the angular\/core package, like below. see the angular. io<\/a> website for more info on services.<\/p>\n
import { Injectable } from \u2018@angular\/core\u2019;<\/pre>\nAnd services uses the\u00a0 injectable decorator. @Injectable()<\/strong> . The @Injectable decorator simply provides dependency injection for the service.<\/p>\n
Don\u2019t forget to add the decorator in the service.ts file. If we don\u2019t add it will not work.<\/p>\n
Service must have the export keyword. \u00a0Everything like class or component should use \u2018export\u2019\u00a0 keyword. Then only it is possible to use the class or component or anything in the project. And service name should end with .service. \u00a0For ex:\u00a0 reference.service.ts file. If we have lengthy name we need add the \u2018\u2013\u2018 in the service name. That is for code readability.<\/p>\n
Example: save-user-info.service.ts<\/p>\n
Service structure:<\/u><\/strong><\/p>\n
import { Injectable } from '@angular\/core';\r\n\r\n@Injectable()\r\n\r\nexport class ReferenceService {\r\n\r\nconstructor() {\u00a0 console.log(\u201cwelcome! Reference Service\u201d);\u00a0 }\r\n\r\n}}<\/pre>\nTo include the service in your app, you must import it and include it as a provider in\u00a0app.module.ts or we can add the service in providers of component meta data also. But it will be available in the particular component only. But it\u2019s better to use the service in the providers of app.module.ts. Service will create the instance every time, whenever you come to the component. \u00a0By registering the service as a provider, you make it available everywhere in the application.<\/p>\n
app.module.ts<\/u><\/strong><\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppComponent } from '.\/app.component';\r\nimport { ReferenceService } from '.\/reference.service'\r\n\r\n@NgModule({\r\ndeclarations: [ AppComponent ],\r\nimports: [ BrowserModule ],\r\nproviders: [ReferenceService],\r\nbootstrap: [AppComponent]\r\n})\r\n\r\nexport class AppModule { }<\/pre>\nAccessing the Service from a component: <\/u><\/p>\n
app.component.ts<\/u><\/strong><\/p>\n
Services must be imported by the component. We will import our reference service in open the auto-generated\u00a0app.component.ts\u00a0and replace it with the following:<\/p>\n
import { Component } from '@angular\/core';\r\nimport { ReferenceService } from '.\/reference.service'\r\n\r\n@Component({\r\nselector: 'app-root',\r\ntemplateUrl: '.\/app.component.html',\r\nstyleUrls: ['.\/app.component.css']\r\n})\r\n\r\nexport class AppComponent {\r\nconstructor(public reference: ReferenceService){\r\n\r\n}\r\n}<\/pre>\nService with HTTP methods :<\/u><\/strong><\/p>\n
We will have to interact with Database to get the data and post the data. For that we will write the web service api in the Angular services. We will have to call the HTTP POST or HTTP GET methods with REST API in the service to store that data in the DATABASE or retrieve the data from the DATABASE.<\/p>\n
Let\u2019s see the Example with real Json file<\/strong>:<\/p>\n
We will use the Reference Service. And we will write the http method in the reference service. That http method should be called in the component methods to get the data or post the data to the REST side. For now will go through with angular services with Json file.Will add one json file in the project. In the angular every request and response will be in the Json \u00a0only. You need to add the json file in the assets folder under src folder of your project. You may get 404 json file not found, if you add the json file somewhere other than assets location folder.<\/p>\n
Json file:<\/u><\/strong><\/p>\n
Created the json folder in the assets folder in \u2018src\/assets\u2019. See example json data.<\/p>\n
[\r\n\r\n{ \u201cid\u201d: 10, \"firstName\":<em>\"Sathish\"<\/em>, \"lastName\":<em>\"Kotha\"<\/em> },\r\n\r\n{ \u201cid\u201d: 11, \"firstName\":<em>\"Ramesh\"<\/em>, \"lastName\":<em>\"Kotha\"<\/em> },\r\n\r\n{ \u201cid\u201d: 12, \"firstName\":<em>\"Ragav\"<\/em>, \"lastName\":<em>\"Raju\"<\/em> }\r\n\r\n]<\/pre>\nEmployee class: <\/u><\/strong><\/p>\n
We need to create the Employee model class. It\u2019s a type of json data, remember every where we need export the class. This model class is a typescript format. Type the below command.<\/p>\n
ng g class Employee<\/strong><\/p><\/blockquote>\n
This will create the Employee model class in the app folder.<\/p>\n
typically you declare types in a model which can then be reused throughout the rest of the application. With TypeScript, frontend applications can now benefit from strongly typed models!<\/p>\n
This is pretty straightforward for declaring individual variables,<\/p>\n
A simple example of this is a\u00a0Employee class that defines a\u00a0firstName and lastName\u00a0variables that\u2019s are string and an\u00a0id variable that must be a number:<\/p>\n
export class Employee\u00a0 {\r\n\r\nid: number;\r\n\r\nfirstName: string;\r\n\r\nlastName: string;\r\n\r\n}<\/pre>\nService:<\/u><\/strong><\/p>\n
In the service, we will \u00a0import the Http from \u201c@angular\/http\u201d; with http we will use the http get the post and request methods. To get the all the methods we need to include the http in the constructor. for more info on http please refer https:\/\/angular.io\/tutorial\/toh-pt6<\/a><\/p>\n
And import some rxjs. These are reactive extension java script. Rxjs is a reactive streams library that allows you to work with\u00a0asynchronous data streams. <\/em>RxJS can be used both in the browser or in the server-side using Node.js. We will use some methods from the Rxjs in angular services like map and observable and catch. We will use these in the services.<\/p>\n
Don\u2019t instantiated the service with new<\/strong> keyword, it will create error prone and memory leak.<\/p>\n
import { Injectable } from '@angular\/core';\r\n\r\nimport { Http } from '@angular\/http';\r\n\r\nimport 'rxjs\/add\/operator\/map';\r\n\r\nimport 'rxjs\/add\/operator\/catch';\r\n\r\nimport { Observable } from 'rxjs\/Observable';\r\n\r\nimport { Employee } from '.\/employee';\r\n\r\n@Injectable()\r\n\r\nexport class ReferenceService {\r\n\r\nconstructor(private http: Http) { }\r\n\r\ngetAllEmployees(): Observable< Employee > {\r\n\r\ntry {\r\n\r\nreturn this.http.get(\u2018assets\/service.json') .map(this.extractdata).catch(this.handleerror) ;\r\n\r\n\/\/ Api Full path like, http:\/\/localhost:4200\/assets\/service.json\r\n\r\n} \u00a0\u00a0catch (error) { console.log(error); }\u00a0 }\r\n\r\nextractData(res: Response) {\r\n\r\nconst body = res.json();\r\n\r\nreturn body || {};\u00a0\u00a0 }\r\n\r\nhandleError(error: any) { return Observable.throw(error);\u00a0}\r\n}<\/pre>\nIn the above service\u00a0 http reference is used to call the http methods. We created one method is get all employees<\/strong>, we are calling http.get method with json link. This get method will get the json data. Then it will come to \u00a0map\u00a0method, it is used to extract the JSON content from the response coming as the observable type. if you got any error while calling the http method it will come to catch method,from there it will directly throw the error with observable throw method.<\/p>\n
Component:<\/u><\/strong><\/p>\n
Import the reference service in the component as below and one more thing we need the ngOn Init life cycle method. Every component has to implement the ngOnInit method. And this method will call after the constructor. It\u2019s used like a main method. When you come to component, ng On Init method will call, you can call any number of methods in the ngOnInit method.<\/p>\n
import { Component, OnInit } from '@angular\/core';\r\n\r\nimport { ReferenceService } from '.\/reference.service';\r\n\r\nimport { Employee } from '.\/employee';\r\n\r\n@Component({\r\n\r\nselector: 'app-root',\r\n\r\ntemplateUrl: '.\/app.component.html',\r\n\r\nstyleUrls: ['.\/app.component.css']\u00a0 })\r\n\r\nexport class AppComponent implements OnInit\u00a0 {\r\n\r\ntitle = 'Angular Service app';\r\n\r\nemployeesInfo: any;\r\n\r\nconstructor(public referService: ReferenceService) { }\r\n\r\ngetAllEmployeesInfo() {\r\n\r\nthis.referService.getAllEmployees() .subscribe((result: Employee[]) => {\r\n\r\nconsole.log('the employess data:' + result);\r\n\r\nthis.employeesInfo = result;\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\r\n(error: any) => {\u00a0 console.log('error in employees method');\u00a0\u00a0\u00a0\u00a0\u00a0 });\u00a0\u00a0 }\r\n\r\nngOnInit() {\u00a0 this. getAllEmployeesInfo();\u00a0 }\r\n\r\n}<\/pre>\nIn above component, service method is called in component method getAllEmployeesInfo with reference service http method. And when we got the output it will come to subscribe result.\u00a0 There we are assigning the result to our variables. If we get any error when calling the api it will come to error block. This error will return from catch of Observable \u00a0throw error.<\/p>\n
App.component.html:<\/u><\/strong><\/p>\n
<h1 style=\"text-align: center\">\u00a0 Welcome to {{title}}! <\/h1>\r\n\r\n<h3 style=\"text-align: center\">ALL employeesInfo here<\/h3>\r\n<div style=\"text-align: center;\">\r\n\r\n<b>Emp ID<\/b> {{emp.id}}\r\n\r\n<b>\u00a0 First Name is :<\/b> {{emp.firstName}}\r\n\r\n<b>Last Name is :<\/b> {{emp.lastName}}\r\n\r\n<\/div><\/pre>\nAbove html we are using title in curly brackets. It\u2019s a two way bindings. Whatever we add it automatically convert the value. And one more new word is \u201c*ngFor\u201d structural directives. This is used to iterate the json data in the html. We have the multiple employes the data in the \u201c employessInfo\u201d\u00a0 variable. So we need to include the ng for here to iterate the data in the html. We add the reference value in the ng for. With that will call the inside object data.<\/p>\n
Service used in the Module:<\/u><\/strong><\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\r\n\r\nimport { NgModule } from '@angular\/core';\r\n\r\nimport { HttpModule } from '@angular\/http';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\n\r\nimport { ReferenceService } from '.\/services\/reference.service';\r\n\r\n@NgModule({\r\n\r\ndeclarations: [ AppComponent ],\r\n\r\nimports: [ BrowserModule, HttpModule ],\r\n\r\nproviders: [ReferenceService],\r\n\r\nbootstrap: [AppComponent] })\r\n\r\nexport class AppModule { }<\/pre>\nAbove app.module we have imported reference service and app component , All components should be added in the declarations field. And service should go to provides. Httmodule is also imported to imports. And last app component will be added in the bootstrap , bootstrap will added to project from here<\/p>\n
if you don\u2019t add the service in the providers you will get following error. One more thing we need to add the http module in the app module imports. Don\u2019t add the http in the imports. If you don\u2019t include. You will get below error.<\/p>\n
EXCEPTION: No provider for service!<\/p>\n
Clone the repository and install all it\u2019s dependencies:<\/strong><\/p>\n
# Clone repo<\/p>\n
git clone https:\/\/github.com\/Sathishchary\/AngularServiceEx<\/a><\/p>\n
# Enter into directory<\/p>\n
cd AngularServiceEx<\/p>\n
# Install dependencies<\/p>\n
npm install<\/p>\n
\n