The difference between Serivce,factory,provider in Angularjs

First, service guidance

When I first started learning angular, the components that were often misunderstood and asked by beginners were the differences between service (), factory (), and provide (). This is where we'll start the twenty-five days of Angular calendar.

Second, service

In angular, services is created as a singleton object when needed, and is cleared only at the end of the application lifecycle (close the browser). and controllers will be destroyed when it is not needed.

This is why using controllers to pass data in applications is unreliable, especially when using routing. Services is designed to be the glue between controllers, the minions of data, the slaves of functionality, the Worker-bee S of our application (that is, services play a key role in the application of controllers, methods, data)

Now we start to see how to Create the service. We will see the following two parameters for each method:

• name-the name of the service we want to define

• Function-service method

They all create the same underlying object type. After instantiation, they all create a service that has no functional differences.

1, Factory ()

The simplest way to create a service inside angular is to use the factory () method.

Factory () Let's define a service by returning an object that contains service methods and data. Within the service method we can inject services such as $http and $q.

Angular.module (' myapp.services '). Factory (' User ',function($http) {//injectables Go here  varBackendurl = "http://localhost:3000";varService = {//Our factory definitionUser: {}, SetName:function(newName) {service.user[' Name '] =NewName; }, Setemail:function(newemail) {service.user[' Email '] =Newemail; }, Save:function() {      return$http. Post (Backendurl + '/users '), {user:service.user});  }  }; returnService;});

• Use the factory () method inside the application

It's easy to use factory in the app, and it's easy to inject when you need it.

Angular.module (' myApp '). Controller (function($scope, User) {  = user.save;});

• When to use the factory () method

In the service, factory () is a great choice when we only need a collection of methods and data and do not need to deal with complex logic.

Note: You cannot use the factory () method when configuring the service with. config ()

2. Service ()

Service () lets us create a service by constructors, and we can define the service using prototype mode instead of the original JavaScript object.

As with the factory () method, we can also see the injection of the service in the definition of the function.

Angular.module (' myapp.services '). Service (' User ',function($http) {//injectables Go here  varSelf = This;//Save Reference   This. user = {};  This. Backendurl = "http://localhost:3000";  This. SetName =function(newName) {self.user[' Name '] =NewName; }   This. Setemail =function(newemail) {self.user[' Email '] =Newemail; }   This. Save =function() {    return$http. Post (Self.backendurl + '/users '){user:self.user})});

Here, as with the factory () method, the service () method holds the object created by the constructor.

• Use the service () method inside the app

  Angular.module (' myApp '). Controller (function($scope, User) {  = user.save;});

  • When is it appropriate to use the service () method?

  The service () method is well-suited for use in more functional control service

  Note: You cannot use the service () method when you need to configure the service using. config ()

  3, provider ()

  Provider () is the lowest level of service creation, and the only way to configure service creation using the. config () method

  Unlike the method mentioned above, we do a dependency injection in the definition of this $get () method.

  Angular.module (' myapp.services '). Provider (' User ',function() {   This. Backendurl = "http://localhost:3000";  This. Setbackendurl =function(newurl) {if(URL) This. Backendurl =Newurl; }   This. $get =function($http) {//injectables Go here    varSelf = This; varService ={User: {}, SetName:function(newName) {service.user[' Name '] =NewName; }, Setemail:function(newemail) {service.user[' Email '] =Newemail; }, Save:function() {        return$http. Post (Self.backendurl + '/users '), {user:service.user})}    }; returnService; }});

  • Use the provider () method inside the application

  In order to configure the service, we can inject the provider into the. config () method

  Angular.module (' myApp '). config (function(userprovider) {  Userprovider.setbackendurl ( "Http://myApiBackend.com/api");})

  So that we can use the service in the app like any other way.

  Angular.module (' myApp '). Controller (function($scope, User) {  = user.save;});

  • When to use the provider () method

  1. We need to use the provider () when we want to configure the service before the app starts. For example, we need to configure services to use different backend processing in different deployment environments (development, demo, production).

  2. When we are going to publish open source provider () is also preferred to create a service, so that you can configure services using configuration instead of hard-coding the configuration data into the code.

  You can also look at this translation: Http://www.oschina.net/translate/top-10-mistakes-angularjs-developers-make

  Click to view the full code: https://gist.github.com/auser/7743235

• Original link: http://my.oschina.net/tanweijie/blog/295067

The difference between Serivce,factory,provider in Angularjs