[Custom service VS factory VS provider in AngularJS]-What are their differences ?, Angularjsfactory
Before introducing AngularJS custom services, let's take a look at AngularJS ~
Anyone who has learned HTML knows that HTML is a good declarative language for pseudo-static text display design. However, it seems weak to build WEB applications.
AngularJS is designed to overcome the shortcomings of HTML in building applications.
AngularJSIt is an excellent front-end JS framework and has been used in many Google products. It has many features, including MVC, modularization, automated two-way data binding, semantic tags, and dependency injection ......
AngularJS extends HTML through new attributes and expressions. You can build a single page application, and it is very easy to learn.
With the above understanding, let's take a look at the Custom Service in AngularJS.
You can customize services in angularjs in three ways,
Are$ Service, $ factory, $ provider.
Next I will introduce the differences between the three AngularJS custom services:
I. service
The instance is instantiated for the first time when it is injected. The whole application lifecycle is a singleton mode, which can be used to transmit data between controllers;
The new keyword is used for instantiation, so this is used directly to define the service. If you do not know the reason, check this in js.
For example:
1 .service('myService', ['', function() {2 this.getName = function() {3 return 'CooMark';4 }5 }])
Built-in services:
>>> When using the built-in service, you must inject it in the Controller through the function parameters !!!!!
$ Location: return the URL of the current page.
$ Http: send a request to the server. The data sent by the application response server is similar to Ajax.
$ Timeout: equivalent to setTimeout ();
$ Interval: equivalent to setInterval ();
(Refer to the Code) body section:
1 <body ng-app = "app" ng-controller = "ctrl"> 2 <p> [function] <br/> 3 {gongneng} 4 </p> 5 <p> 255 to hexadecimal: {num }}</p> 6 </body>
(Refer to the Code) JS section:
Import angular. JS file first !!!
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 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 values. Usually we use the factory function to calculate or return values.
The difference between factory and service is not big.
(Refer to the Code) for the body section, refer to the Service. The JS Code is as follows:
Import angular. JS file first !!!
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 ('hexisty', function () {10 var obj = {11 gongneng: "convert the number to hexadecimal notation", 12 myFunc: function (x) {13 return x. toString (16); 14} 15}; 16 return obj; 17}) 18 19 </script>
3. Service provider
1. In AngularJS, services and factory are implemented based on providers.
2. In the provider, the factory statement is provided through the $ get () method, which is used to return value/service/factory .;
3. provider is the only Custom Service that can be written into the config configuration stage.
If the service must be executed in the configuration phase, the provider must be used. Otherwise, Service or factory is generally used.
Iv. Expansion: What is the difference between angularjs dependency injection and custom services?
AngularJS is actually the code that appears before calling (that is, the $ provide. provider version ).
Literally, there is basically no difference between angularjs dependency injection and 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 use the value Method for writing.
Okay ~~~ Today's Blog content will be shared here first. Please leave a message ~~~
Come on! Learn together and make progress together!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
