The Service in AngularJS

AngularJS supports the concept of Seperation of Concerns - Divide to use service structure. Service is JavaScript functions and is responsible for certain tasks.

AngularJS supports the concepts of "Seperation of Concerns" using the service structure. Service is JavaScript functions and is responsible for certain tasks. It makes them separate entities that are easy to maintain and test. Controller, filter can call them simply. Service is often injected using AngularJS's dependency injection mechanism.

AngularJS provides a lot of predefined services: $ http, $ scope, $ route, $ window, $ location . Each service has certain tasks. For example, $ http is used to create ajax requests on the server to retrieve data. $ route is used to define routing information . The default AngularJS service starts with the $ symbol.

There are two ways to create a service:

  1. factory
  2. service

Use factory method in AngularJS

When using the factory method, we first define the factory and attach the method to it.

 var ungdungAngularJS = angular . module ( "ungdungAngularJS" , []); ungdungAngularJS . factory ( 'toanhocService' , function () { var factory = {}; factory . phepnhan = function ( a , b ) { return a * b } return factory ; }); 

Use service method in AngularJS

Using the service method, we will define the service then assign the method to it. We also inject the services available to it.

 ungdungAngularJS . service ( 'tinhBPService' , function ( toanhocService ) { this . binhphuong = function ( a ) { return toanhocService . phepnhan ( a , a ); } }); 

For example:

Below is an example to illustrate the above instruction.

testAngularJS.jsp

 Vi du Service in AngularJS  src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" > 

 

 Cavalier AngularJS  ng-app = "ungdungAngularJS" ng-controller = "tinhBPController" > 
 So much:  type = "number" ng-model = "number" />  ng-click = "binhphuong ()" > X 2 
 Pass through: {{ketqua}} 

Result:

Open the textAngularJS.jsp page on the web browser and see the results:

The Service in AngularJS Picture 1The Service in AngularJS Picture 1

Follow tutorialspoint

Last post: Scope in AngularJS

Next lesson: Multilingual (i18n) in AngularJS

4 ★ | 1 Vote