Home > Developer > Web Develop
In the previous blog that introduced AngularJS, a brief description of the common services offered by AngularJS and how to customize the services are provided in the AngularJS service. In this blog post, I'll give you a detailed description of how to customize the service, and the differences between the various ways.
Value (name, object)value(name, object)method allows us to directly use a common value or object as a service. Let's take a piece of code to see how to use:
<! DOCTYPE html><html> <head> <meta charset="Utf-8" /> <title>AngularJS</title> <script type="text/javascript" src="Js/angular.min.js"> </script> <script type="Text/javascript">angular.module ("myApp", []). Value ("Hqvalue", ten) . Controller ("Myctrl", function($scope, Hqvalue) { $scope. Value = H Qvalue; }); </script> </head> <body Ng-app="myApp" ng-controller="Myctrl"> {{Value}}</body></html>In this code, we value define a service with a method that has a HQValue value of: 10, which is a very simple example.
constant(name, value)You can also register a service with a value that can be a string, a number, an array, an object or a function, and value(name, object) much like a wood. Make a simple modification to the above example:
<! DOCTYPE html><html> <head> <meta charset="Utf-8" /> <title>AngularJS</title> <script type="text/javascript" src="Js/angular.min.js"> </script> <script type="Text/javascript">angular.module ("myApp", []). Constant ("Hqconstant", ten) . config (function(hqconstant) { console.info (hqconstant); }). controller ("Myctrl", function($scope, hqconstant) { $scope. value = hqconstant; }); </script> </head> <body Ng-app="myApp" ng-controller="Myctrl">{{Value}}</body></html>Careful little partner should be able to find constant(name, value) and value(name, object) use although very much, but there is a difference, otherwise there is no need to make two out, the two biggest difference is that the use constant(name, value) of registered services can be config(configFn) injected into the method, and value(name, object) not to. value(name, object)It is usually used to register a service object or function and use it constant(name, value) to configure the data.
Using the service(name, constructor) Registration service, the service object is new instantiated using, so we should add the this attribute.
<! DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="Js/angular.min.js"></script> <script type =< Span class= "Hljs-value" > "Text/javascript" ; Angular.module ( "myApp" , []). Service ( ' hqstring ' , function () { this . toUpperCase = function (x) { return x.touppercase (); }}). controller ( "Myctrl" , function { $scope. Name = Hqstri Ng.touppercase ( ' Jianggujin ' ); }); </script> </head> <body Ng-app="myApp" ng-controller="Myctrl"> <div>{{Name}}</div> </body></html>In this code, we used a service that was registered with the service service(name, constructor) name HQString , and we added one for the service to toUpperCase convert the string to uppercase.
The use of the factory(name, providerFunction) registration service is actually to create an object as providerFunction the return value, injected into controller the object is actually created. We use it factory(name, providerFunction) to achieve service(name, constructor) the same function, the code is as follows:
<head> <meta charset="UTF-8"> <title></title> <script src="Js/angular.min.js"></script> <script type="Text/javascript"> Angular.module ( "myApp" , []). Factory ( ' hqstring ' , function Span class= "Hljs-params" > () { return {t Ouppercase: function (x) { return x.touppercase (); } }; }). controller ( "Myctrl" , function ($scope, hqstring) { $scope. Name = Hqstring.touppercase ( ' Jianggujin ' ); }); </script></head><body Ng-app="myApp" ng-controller="Myctrl"> <div>{{Name}}</div></body>provider(name, provider)is a service that can be passed in config(configFn) , and if we want to do a module-wide configuration before the service object is enabled, then you should use provider. Using the provider(name, provider) registration service, we need to this add $get functions, function returns for injection into the controller object, we can also this add other properties to make it easier for us to use in the config(configFn) method. It is important to note that if our service name is: HQString , then the name we inject in the config(configFn) method should be: HQStringProvider . Let's look at how to use it in code:
<head> <meta charset="UTF-8"> <title></title> <script src="Js/angular.min.js"></script> <script type="Text/javascript">Angular.module ("MYAPP", []). Provider (' hqstring ', function() { This. defaults ="Defaults"; This. $get = function() { return{touppercase: function(x) { returnX.touppercase (); } }; }}). config ( function(hqstringprovider) {Console.info (Hqstringprovider.defaults)}). Controller ("Myctrl", function($scope, hqstring) {$scope. Name = Hqstring.touppercase (' Jianggujin '); });</script></head><body Ng-app="myApp" ng-controller="Myctrl"> <div>{{Name}}</div></body>ANGULARJS Service Summary
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
