Home > Developer > Web Develop
Learn Angular JS
Factory
Can be thought of as a factory method in design mode, that is, you provide a method that returns an instance of an object;
For Angularjs, the factory is to define an object, add properties and methods to the object, and then return the object.
For example:
var app = Angular.module ("MyApp", []);
App.factory ("MyFactory", function () {
var result = {};
result.greeting = "Hello from factory";
return result;
});
Finally, the controller gets the result object, which is equivalent to the following code:
var factoryresult = MyFactory ();
In fact, factory is so simple.
Service
The service is instantiated with the new operator and can be considered a type, as long as the property and method are added to the this object without displaying the returned object
For example:
App.service ("MyService", function () {
this.greeting = "Hello from service";
});
The object that the controller gets is the object in the code above, which is equivalent to the following code;
var serviceobj = new MyService ();
Provider
is slightly different from factory and service, provider must provide a $get method, $get method and factory requirements are consistent,
defines an object, adds properties, methods to the object, The object is then returned, for example:
App.provider ("MyProvider", function () {
this. $get = function () {
var result = {};
result.greeting = "Hello from provider";
return result;
}
});
The object that the last controller gets is the object returned by the $get method of provider, equivalent to the following code
var instance = new MyProvider ();
var Provider = instance. $get ();
Using factory service Provider
The three are used the same way, all through angularjs dependency injection, such as:
App.controller ("TestController", [' $scope ', ' myfactory ', ' myservice ', ' MyProvider ', function ($scope, myfactory, Myservice,myprovider) {
$scope. greetingfromfactory = myfactory.greeting;
$scope. Greetingfromservice = myservice.greeting;
$scope. Greetingfromprovider = myprovider.greeting;
}]);
The corresponding views are:
<body ng-controller= "TestController" >
<p>greeting from factory: {{greetingfromfactory}} </p>
<p>greeting from service: {{Greetingfromservice}} </p>
<p>greeting from provider: {{Greetingfromprovider}} </p>
</body>
The provider can be configured when the app starts:
The special thing about provider is that it can be configured at the module start-up to achieve a special purpose, such as a setname method can be added to the provider above.
This method can be called at startup to perform some additional initialization work:
App.provider (' MyProvider ', function () {
Default name is ' anonymous ';
var defaultname = ' anonymous ';
var name = DefaultName;
SetName can called Duaring module init
This.setname = function (newName) {
name = NewName;
}
this. $get = function () {
var result = {};
result.greeting = ' Hello from provider ';
Result.name = name;
Result.defaultname = DefaultName;
return result;
}
})
After adding the SetName method, you can call this method on the module startup to implement the configuration of the provider
App. Config (function (myproviderprovider) {///Yes, this is Myproviderprovider
Myproviderprovider.setname (' Angularjs Provider ');
});
Add this information to the controller that displays provider:
App.controller (' TestController ', [' $scope ', ' myfactory ', ' myservice ', ' MyProvider ', function ($scope, myfactory, MyService, MyProvider) {
$scope. greetingfromfactory = myfactory.greeting;
$scope. Greetingfromservice = myservice.greeting;
$scope. Greetingfromprovider = myprovider.greeting;
$scope. defaultname = Myprovider.defaultname;
$scope. Name = Myprovider.name
}]);
The corresponding HTML view also adjusts
<body ng-controller= "TestController" >
<p>greeting from factory: {{greetingfromfactory}} </p>
<p>greeting from service: {{greetingfromservice}}</p>
<p>greeting from provider: {{Greetingfromprovider}} </p>
<p>defaultname: {{defaultname}}, config to: {{name}} </p>
</body>
Operation Result:
Greeting Form Factory:hello from Factroy
Greeting Form Service:hello from service
Greeting Form Provider:hello from provider
Defaultname:anonymous,config To:angularjs Provider
AngularJs parsing Factory, service, provider
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
