AngularJsService

文墨(末)有彩蛋00哦

1 先来了解以下angular的依赖

Module依赖:在声明app模块时,需要给出依赖模块的列表。同时这些模块对应的JS需要在HTML中加以引入。在中可以直接使用依赖模块中声明的Service、Directive、Filter。

Service依赖:在声明Controller、Service、Directive、Filter的工厂方法中,把依赖的Service直接放到参数列表,Angular Injector会为你生成这些Service的实例。

1.1 Services 定义

AngularJS services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

AngularJS services are:

  • Lazily instantiated – AngularJS only instantiates a service when an application component depends on it.
  • Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.

service通常用来进行不同的controller之间进行通信;

1.2 service声明方式 $provider 下面有五个API factory service value constant provider(这些都是provider的封装) 可以用来声明服务

1.2.1 最常见的方式:工厂方式,当someService作为依赖的时候,angular Injector会调用工厂方法,然后将返回值作为Service的实例传入依赖它的工厂方法

factory(name, fn)registers a service factory function that will be wrapped in a service provider object, whose $get property will contain the given factory function.

1
2
3
4
5
6
app.factory('someService', function(dependency1, ...){
return {
property1: value1,
property2: value2
}
});

走个小栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body ng-app = 'myApp'>
<div ng-controller="myCtrl">
<input type="text" ng-model = 'info.name' placeholder="please input your name"/>
name:<p>`{{info.name}}`</p>
<input type="text" ng-model = 'info.age' placeholder="please input your age"/>
age:<p>`{{info.age}}`</p>
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.factory('myService',function(){
return {
name : "Jhon",
age : 18,
}
});
myApp.controller('myCtrl',["$scope","myService",function($scope,myService){
console.log(arguments);
$scope.info = myService ;
}]);
</script>
</body>

1.2.2 最直接的方式:构造函数 当someService作为依赖的时候,angular Injector会以new的方式调用该构造函数,然后将返回值作为Service的实例传入依赖它的工厂方法

service(name, Fn) registers a constructor function that will be wrapped in a service provider object, whose $get property will instantiate a new object using the given constructor function.

我们可以定义私有变量和共有变量

先来看下内部实现机制,angular Injector会以new的方式调用构造函数,然后将返回值传入依赖;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
function Service (){
this.public = {
name : "Jhon",
age :18
}
var private = {
name :"JiM",
age : 20
}
this.getPri = function(){
return private ;
}
}
var service = new Service();
console.log(service);
console.log(service.getPri());
</script>
1
2
3
4
app.service('someService', someService(dependency1, ...){
this.property1 = value1;
this.property2 = value2;
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<body ng-app = 'myApp'>
<div ng-controller="myCtrl">
<input type="text" ng-model = 'info.name' placeholder="please input your name"/>
public name:<p>`{{info.name}}`</p>
<input type="text" ng-model = 'info.age' placeholder="please input your age"/>
public age:<p>`{{info.age}}`</p>
private name : <p>`{{infoPri.name}}`</p>
private name : <p>`{{infoPri.age}}`</p>
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.service('myService',function(){
this.public = {
name : "Jhon",
age :18
}
var private = {
name :"JiM",
age : 20
}
this.getPri = function(){
return private ;
}
});
myApp.controller('myCtrl',["$scope","myService",function($scope,myService){
console.log(arguments);
$scope.info = myService.public ;
$scope.infoPri = myService.getPri();
}]);
</script>
</body>

1.2.3 最简单的方式

value(name, value);

Register a value service with the $injector, such as a string, a number, an array, an object or a function. This is short for registering a service where its provider’s $get property is a factory function that takes no arguments and returns the value service. That also means it is not possible to inject other services into a value service.

Value services are similar to constant services, except that they cannot be injected into a module configuration function (see angular.Module) but they can be overridden by an AngularJS decorator.

constant(name, value);

Register a constant service with the $injector, such as a string, a number, an array, an object or a function. Like the value, it is not possible to inject other services into a constant.

But unlike value, a constant can be injected into a module configuration function (see angular.Module) and it cannot be overridden by an AngularJS decorator.

  • 两者的相同之处就是不能依赖其他的service,
  • 两者的不同之处就是value不能注册进其他模块,但是constant可以被注册进其他模块
  • 两者的不同之处还有就是value可以被decorator重写,但是constant不能被重写,constant常量的意思
1
2
3
app.value('someService', { property1: value1, property2: value2});
app.constant('anotherService', 'I am a simple string');

decorator(name, decorator);

Register a decorator function with the $injector. A decorator function intercepts the creation of a service, allowing it to override or modify the behavior of the service. The return value of the decorator function may be the original service, or a new service that replaces (or wraps and delegates to) the original service.

You can find out more about using decorators in the decorators guide.