This example summarizes the usage of AngularJS service service. Share it for your reference, as follows:
introduction
Recently, I have used knowledge about services in AngularJS in the project. When I first learned this thing, I learned that this thing is often used in projects and is also a relatively important part in angular. So today the editor will summarize some knowledge about service.
Meet Service
We are not unfamiliar with service. Whether in C# or Java, we often encounter the concept of service. In fact, the function of service is to provide a certain specific function to the outside world, which is what we often say, "what service is called to achieve a certain function" is the same. They are generally an independent module, and the ng service is defined as follows:
Angular services are singletons objects or functions that carry out specific tasks common to web apps.
1. It is a simple interest object or function that provides specific functions to the outside world.
2. It is different from defining a function ourselves and then calling it elsewhere. Because the service is defined in a module, its scope of action can be managed by us. It is very strong to avoid global variable pollution.
Custom Services
In angular, we provide three different ways to implement custom services. They are the built-in $provider, service in module and factory in module. Let’s take a look at how to use these three ways;
1) Use of $provide
Providers is the only service you can pass into the .config() function. When you want to configure module-wide before the service object is enabled, you should use provider
var m1 = ('myApp', [], function ($provide) {
$('providerService01', function () {
this.$get = function () {
return {
message: 'this is providerService01'
}
}
})
$('providerService02', function () {
this.$get = function () {
var _name = '';
var service = {};
= function (name) {
_name = name;
}
= function () {
return _name
}
return service;
}
})
})
('firstController', ['$scope', 'providerService01', 'providerService02', function ($scope, providerService01, providerService02) {
(providerService01);
("Li Si");
$ = ();
}])
When we use $provide, we can directly inject $provide into the module like above, and then define multiple services in the module in turn. Of course, we can also use config to complete the definition of the service.
var m1=('myApp',[]);
(function($provide){
$('providerService01', function () {
this.$get = function () {
return {
message: 'this is providerService011'
}
}
});
$('providerService02', function () {
this.$get = function () {
var _name='';
var service={};
=function(name){
_name=name;
}
=function(){
return _name
}
return service;
}
});
})
The effects achieved by the above two implementation methods are the same, so we can choose any one to achieve when using it.
2) Use of factory
The Factory method directly treats a function as an object. The $get method of the factory can directly return a string. Using 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 in the object in the controller can be used through the factory.
var m1 = ('myApp', [], function ($provide) {
$('factoryService01',function(){
return{
message:'this is providerServices01'
}
})
});
The use of factory is simpler than that of $provide. You can directly return the object in factory, but you do not use $get to implement the return of the object. And $factory and $provide can not only return an object but also an arbitrary string.
3) Use of service
Service is instantiated with the "new" keyword. Therefore, you should add a property to "this" and then service returns "this". After you pass the service into the controller, the attribute "this" in the controller can be used through the service
$('service01',function(){
return{
message:'this is providerServices01'
}
})
The use of service and factory is very similar, but service cannot return strings, while factory can return both objects and arbitrary strings.
The difference between the three: Provider needs to be implemented with the help of $get, while the rest are not needed. series cannot return strings, while the other two can return.
Dependencies between services
When we implement a certain function, multiple services may need to depend on each other to complete it. So we need to manage the relationship between services. For example, we are completing a data verification function. This is a very simple example found in jsFiddle
var app = ('MyApp', []);
('testC3',function($scope,validate){
$ = validate;
});
('remoteData',function(){
var data = {name:'n',value:'v'};
return data;
});
('validate',function(remoteData){
return function(){
if(=='n'){
alert('Verification passed');
}
};
});
The service validate is a function to verify whether the data is legal, but it needs to rely on another service remoteData to obtain the data. However, in the factory parameters, we can directly pass into the service remoteData, and the ng's dependency injection mechanism helps us do other work. However, it is necessary to ensure that the name of this parameter is consistent with the service name, and ng is identified based on the name. If the ranking of the parameter is inconsistent with the service name, you must display the declaration as follows:
('validate',['remoteData',function(remoteDataService){
return function(){
if(=='n'){
alert('Verification passed');
}
};
}]);
summary
The above is a summary of the editor’s learning of angularJS services. These are all introductory knowledge. I’ll share with you here. If you want to have a deeper understanding of the service, we need to study it carefully in the project.
For more information about AngularJS, readers who are interested in view the topic of this site:AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary》
I hope this article will be helpful to everyone's AngularJS programming.