Before introducing the AngularJS custom service, let's take a look at AngularJS.~
People who have learned HTML know that HTML is a very good declarative language for pseudo static text display design, but it is weak to build WEB applications.
AngularJS is designed to overcome the shortcomings of HTML in building applications.
AngularJS is an excellent front-end JS framework, which has been used in many Google products. It has many features, the most core is: MVC, modularization, automatic two-way data binding, semantic tags, dependency injection, etc.
AngularJS extends HTML with new attributes and expressions; it can build a single page application; and it's easy to learn.
With the above knowledge, let's take a look at the custom services in AngularJS.
There are three ways to customize services in angularjs.
They are $service, $factory, $provider.
Next, I will introduce the differences between the three AngularJS custom services:
I. service
The first time it is injected, it is instantiated only once. The whole application life cycle is a single instance mode, which can be used to transfer data between controller s.
Use the new keyword to instantiate, so directly use this to define the service. If you don't know the reason, take a look at this in js.
For example:
1 .service('myService', ['', function() { 2 this.getName = function() { 3 return 'CooMark'; 4 } 5 }])
Built in services:
>>>To use the built-in service, you must inject it in the Controller through the parameters of the function!!!!!
$location: returns the URL address of the current page.
$http: Send a request to the server, and the application responds to the data sent by the server, similar to Ajax
$timeout: equivalent to setTimeout();
$interval: equivalent to setInterval();
(reference code) body part:
1 <body ng-app="app" ng-controller="ctrl"> 2 <p>[function]<br /> 3 {{gongneng}} 4 </p> 5 <p>255 Convert to hexadecimal:{{num}}</p> 6 </body>
(reference code) JS part:
First import JS file angular.js!!!
1 <script src="libs/angular.js"></script>
2 <script> 3 angular.module("app",[]) 4 .controller("ctrl",function($scope,$location,$timeout,$interval,$hexafy){ 5 6 // $scope.local = $location.$$absUrl; 7 // $scope.local = $location.absUrl(); 8 9 $scope.local = $location.$$host; 10 11 $timeout(function () { 12 $scope.myHeader = "How are you today?"; 13 }, 2000); 14 $scope.num = 0; 15 16 $interval(function(){ 17 $scope.num ; 18 },1000); 19 20 $scope.gongneng = $hexafy.$$gongneng; 21 $scope.hexafy = $hexafy; 22 }) 23 24 /*Custom service*/ 25 .service('$hexafy', function() { 26 this.$$gongneng = "Convert the transferred number to hexadecimal"; 27 this.myFunc = function (x) { 28 return x.toString(16); 29 } 30 }) 31 32 /*Custom filter*/ 33 .filter("filt",function(){ 34 return function(x){ 35 return x.toString(16); 36 } 37 }) 38 /*In the filter, call the custom service*/ 39 .filter("filt1",function($hexafy){ 40 return function(x){ 41 return $hexafy.myFunc(x); 42 } 43 }) 44 45 46 </script>
II. Service factory
Factory is a function used to return a value, usually we use the factory function to calculate or return a value.
There is little difference between factory and service.
(reference code) the body part refers to the Service, and the JS code is as follows:
First import JS file angular.js!!!
1 <script src="libs/angular.js"></script> 2 <script> 3 angular.module("app",[]) 4 .config() 5 .controller("ctrl",function($scope,hexafy){ 6 $scope.gongneng = hexafy.gongneng; 7 $scope.num = hexafy.myFunc(255); 8 }) 9 .factory('hexafy',function(){ 10 var obj = { 11 gongneng : "Convert the transferred number to hexadecimal", 12 myFunc:function(x){ 13 return x.toString(16); 14 } 15 }; 16 return obj; 17 }) 18 19 </script>
III. service provider
1. In AngularJS, both Service and factory are implemented based on provider.
2. In provider, the method of $get() is used to write factory, which is used to return value/service/factory. ;
3. provider is the only one of the three custom services that can be written into the config configuration phase.
If the Service must be executed in the configuration phase, then the provider must be used. Otherwise, Service or factory is generally used.
4. Extension: what's the difference between angularjs's dependency injection and custom service
AngularJS is actually the code that appears before the call (that is, the version of $provide.provider).
Literally, the dependency injection of angularjs is basically the same as that of custom services.
The value method is the same, if we need to return the same value from the $get function (that is, our factory function).
We can write it using the value method.
OK ~ ~ ~ let's share today's blog content here. Welcome to leave a message.~~~
Come on, everyone! Study together, progress together!
For more professional front-end knowledge, please go to [ape 2048] www.mk2048.com