AngularJS Service vs Factory-once and for all

Original: http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html

What is the difference between service and factory, and which one should I use?

This article will explain the difference between service and factory, why we like service more than factory.

The difference between service and factory

What is the difference between service and factory in Angularjs? We can define a service like this:

App.service (' MyService ', function () {  This.sayhello = function () {    console.log (' hello ');  };});

.service()is a method of our module. There are two parameters, the first parameter is the service name, and the second parameter is a function. The service can be injected into other component, such as controller, Directive, filters. The injection method is as follows:

App.controller (' AppController ', function (myservice) {  Myservice.sayhello ();//Logs ' Hello '});

Well, see how factory is doing the same thing:

App.factory (' MyService ', function () {  return {    sayhello:function () {      console.log (' Hello ');}    ;}  );

.factory()also is a method of our module, there are two parameters, the first is the factory name, the second is a function. The same factory can also be injected into other components. So where is his difference?

We can see that in factory we are not using this , but returning an object literal. Why? Because, theservice is a constructor factory not . So we're going to show an object in Factory's funtion. .

Let's look at what the factory function in the source code of ANGULARJS is:

function factory (name, FACTORYFN, enforce) {  return provider (name, {    $get: Enforce!== false? Enforcereturnvalue (Name, FACTORYFN): Factoryfn  });}

Factory receives a name, and the factory function, which returns a provider with the same name, $get is our factory function. When you get an injection, the $get () method is called to request an instance of the service to the corresponding provider. This is why it is necessary to have the $get () method when creating provider.

In other words, when injected MyService , what happened behind it:

Myserviceprovider. $get (); Returns an instance of a service

Now look at what the service function does in Angularjs's source code:

function service (name, constructor) {  return factory (name, [' $injector ', function ($injector) {    return $ Injector.instantiate (constructor);  }]);}

As you can see from the code, the Factory () is actually called when the service () is called. However, the service's constructor is not passed directly to factory. Instead, it passes a function that relies on injector, which is instantiated by this injector. Simply put: The service invokes the predefined factory and finally calls the corresponding provider's $get () method. $injector.instantiate()method is eventually called Object.create()，参数为构造函数 . That's why we use this in the service.

Whether I use service() it or not factory() , it ends up being a factory, and then this factory calls provider.

Which one to use?

"The difference between Serivce and factory is as follows:"

App.service (' MyService ', function () {  //service is a constructor  This.sayhello = function (name) {     return "Hi" + Name + "!";  };}); App.factory (' MyFactory ', function () {  ///Factory Returns an object return  {    sayhello:function (name) {      return "Hi "+ name +"! ";    }}  );

Yes, the service is a constructor, and then we can return the object literal in this constructor. In fact, the constructor in JavaScript can return anything you want to return. So we write the service the same as factory:

App.service (' MyService ', function () {  //) We can add other code  return {    sayhello:function () {      Console.log (' Hello ');};}  );

Now the factory and service have been written the same way. The question is: Which one should we use?

Service allows us to use the ES6 class

In ES6 we can define the service in this way:

Class MyService {  SayHello () {    console.log (' Hello ');}  } App.service (' MyService ', myservice);

The constructors in ES6 class and ES5 are one thing.

AngularJS Service vs Factory-once and for all