AngularJs parsing Factory, service, provider

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.