Angularjs Service Usage Summary _angularjs

The example of this article summarizes the ANGULARJS service usage. Share to everyone for your reference, specific as follows:

Introduction

Recently used in the project on the Angularjs of the service-related knowledge, at the beginning of learning this thing is often used in the project, in the angular is also a more important piece, so today's small compiled on the summary of some knowledge about service.

Know the Service

About the service we are not unfamiliar, whether it is in C # or Java we often encounter the concept of service, in fact, the role of service is to provide a specific function, that is, we often say "to achieve a function and call which service" is the same reason, They are generally a stand-alone module, and NG service is defined as this:

Angular services are singletons objects or functions this carry out specific tasks common to web apps.

1, it is a simple object or function, provide specific function externally.

2, it and we define a function and then call different in other places, because the service is defined in a module, so its scope can be managed by us, Ng to avoid the global variable pollution awareness is very strong.

Custom Services

The angular provides us with three different ways to implement custom services, which are built-in $provider, the service in module, and the factory in module, to see How to use these three ways;

1) The use of $provide

Providers is the only service that you can pass into the. config () function. When you want to make a module-wide configuration before the service object is enabled, you should use the provider

var m1 = angular.module (' myApp ', [], function ($provide) {
    $provide. Provider (' ProviderService01 ', function () {
      this. $get = function () {return
        {message: ' This is ProviderService01 '}}
    ]
    $ Provide.provider (' ProviderService02 ', function () {this
      . $get = function () {
        var _name = ';
        var service = {};
        Service.setname = function (name) {
          _name = name;
        }
        Service.getname = function () {return
          _name
        } return
        service;
      }
    }
) M1.controller (' Firstcontroller ', [' $scope ', ' providerService01 ', ' providerService02 ', function ($scope, PROVIDERSERVICE01, providerService02) {
    console.log (providerService01);
    Providerservice02.setname ("Dick");
    $scope. Name = Providerservice02.getname ();
}])

Our use of $provide can be directly injected into the module as shown above, and then multiple services are defined in the module, and we can also use Config to define the service $provide.

var m1=angular.module (' myApp ', []);
M1.config (function ($provide) {
  $provide. Provider (' ProviderService01 ', function () {this
    . $get = function () { Return
      {message
        : ' The Is ProviderService011 '}}}
  ;
  $provide. Provider (' ProviderService02 ', function () {this
    . $get = function () {
      var _name= ';
      var service={};
      Service.setname=function (name) {
        _name=name
      }
      Service.getname=function () {return
        _name
      } return
      service;
    }
  }
)

The above two implementations achieve the same effect, so we can choose any one to implement when we use it.

2) The use of factory

Factory method directly takes a function as an object $get method can directly return a string, with Factory is to create an object, add attributes to it, and then return the object. After you pass the service into the controller, the properties of the object in controller can be used by factory.

var m1 = angular.module (' myApp ', [], function ($provide) {
  $provide. Factory (' FactoryService01 ', function () {
    return{message
      : ' This is ProviderServices01 '
    }}
);

The use of factory is simpler than the use of $provide, which can be returned directly to the object in factory and not the return of the object using $get. and $factory and $provide can return not only an object but also an arbitrary string.

3 Use of Service

The Service is instantiated with the "new" keyword. Therefore, you should add attributes to "this" and the service returns "this". After you have sent the service into the controller, the attributes on "This" in controller can be used by the service.

$provide. Service (' Service01 ', function () {
    return{message
      : ' This is ProviderServices01 '
    }
})

Service and factory are very similar, but service cannot return a string, and factory can either return an object or return an arbitrary string.

The difference between the three: provider need to use $get to achieve, while the rest of the two do not need. Series cannot return a string, while the other two can be returned.

The dependencies between services

When we implement a feature that may require multiple services to be interdependent, then we need to manage the relationship between services, such as we are completing a data validation function, which is a very simple example found in Jsfiddle.

var app = Angular.module (' MyApp ', []);
App.controller (' testC3 ', function ($scope, validate) {
  $scope. validatedata = validate;
});
App.factory (' RemoteData ', function () {
  var data = {name: ' n ', value: ' V '};
  return data;
});
App.factory (' Validate ', function (RemoteData) {return
  function () {
    if (remotedata.name== ' n ') {
      alert (' Verify through ');}};

The service validate is a function to verify that the data is legitimate, but it relies on another service remotedata to get the data, but in the factory parameters, we can directly pass into the service Remotedata,ng Dependency injection mechanism to help us do other work. But make sure that the name of this parameter is the same as the service name, and that Ng is identified by name. If the rank of the parameter is inconsistent with the service name, you must display the statement as follows:

App.factory (' Validate ', [' RemoteData ', function (remotedataservice) {return
  function () {
    if ( remotedataservice.name== ' n ') {
      alert (' Validation passed ');}}
]);

Summary

The above is a small series in the study of ANGULARJS services in some summary, these are introductory knowledge, in this and share with you, if you want to have a deeper understanding of the service need us to study well in the project.

More readers interested in ANGULARJS related content can view the site topics: "Angularjs Introduction and Advanced Tutorials" and "ANGULARJS MVC Framework Summary"

I hope this article will help you to Angularjs program design.