目录[-]
一、service引导
刚开始学习Angular的时候，经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别。This is where we'll start the twenty-five days of Angular calendar.
二、service
在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了。
这 就是为什么使用controllers在应用里面传递数据不可靠的原因，特别是使用routing的时候。Services are designed to be the glue between controllers, the minions of data, the slaves of functionality, the worker-bees of our application（就是说services在应用的controllers、 方法、数据之前起到了很关键的作用）
现在我们开始看怎么创建service。每个方法我们都会看到下面两个一样的参数：
-
name-我们要定义的service的名字
-
function-service方法
他们都创建了相同的底层对象类型。实例化后，他们都创建了一个service，这些对象没有什么功能上的差别。
1、factory()
Angular里面创建service最简单的方式是使用factory()方法。
factory()让我们通过返回一个包含service方法和数据的对象来定义一个service。在service方法里面我们可以注入services，比如 $http 和 $q等。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
angular.module(
'myApp.services'
)
.factory(
'User'
,
function
($http) {
// injectables go here
var
backendUrl =
"http://localhost:3000"
;
var
service = { // our factory definition
user: {},
setName:
function
(newName) {
service.user[
'name'
] = newName;
},
setEmail:
function
(newEmail) {
service.user[
'email'
] = newEmail;
},
save:
function
() {
return
$http.post(backendUrl +
'/users'
, {
user: service.user
});
}
};
return
service;
});
|
在应用里面使用factory()方法
在应用里面可以很容易地使用factory ，需要到的时候简单地注入就可以了
|
1
2
3
4
|
angular.module(
'myApp'
)
.controller(
'MainCtrl'
,
function
($scope, User) {
$scope.saveUser = User.save;
});
|
什么时候使用factory()方法
在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候，factory()是一个非常不错的选择。
注意：需要使用.config()来配置service的时候不能使用factory()方法
2、service()
service()通过构造函数的方式让我们创建service，我们可以使用原型模式替代javaScript原始的对象来定义service。
和factory()方法一样我们也可以在函数的定义里面看到服务的注入
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
angular.module(
'myApp.services'
)
.service(
'User'
,
function
($http) {
// injectables go here
var
self =
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
})
}
});
|
这里的功能和使用factory()方法的方式一样，service()方法会持有构造函数创建的对象。
-
在应用里面使用service()方法
|
1
2
3
4
|
angular.module(
'myApp'
)
.controller(
'MainCtrl'
,
function
($scope, User) {
$scope.saveUser = User.save;
});
|
-
什么时候适合使用service()方法
service()方法很适合使用在功能控制比较多的service里面
注意：需要使用.config()来配置service的时候不能使用service()方法
3、provider()
provider()是创建service最底层的方式，这也是唯一一个可以使用.config()方法配置创建service的方法
不像上面提到的方法那样，我们在定义的this.$get()方法里面进行依赖注入
|
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
|
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
var
self =
this
;
var
service = {
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
})
}
};
return
service;
}
});
|
-
在应用里面使用provider()方法
为了给service进行配置，我们可以将provider注入到.config()方法里面
|
1
2
3
4
|
angular.module(
'myApp'
)
.config(
function
(UserProvider) {
UserProvider.setBackendUrl(
"http://myApiBackend.com/api"
);
})
|
这样我们就可以和其他方式一样在应用里面使用这个service了
|
1
2
3
4
|
angular.module(
'myApp'
)
.controller(
'MainCtrl'
,
function
($scope, User) {
$scope.saveUser = User.save;
});
|
-
什么时候使用provider()方法
-
当我们希望在应用开始前对service进行配置的时候就需要使用到provider()。比如，我们需要配置services在不同的部署环境里面（开发，演示，生产）使用不同的后端处理的时候就可以使用到了
-
当我们打算发布开源provider()也是首选创建service的方法，这样就可以使用配置的方式来配置services而不是将配置数据硬编码写到代码里面。
理解Angular 服务
什么是Angular Service
Angular 服务是为web应用执行特定任务的单例对象或方法。 注：如果组件是为了内容呈现的功能复用，那么服务就是为组件进行功能复用。
Angular有一些内建的服务（例如：$http），也可以创建自己的服务。内建的服务通常使用“$”开头（与jQuery类似）。
使用Angular 服务
在使用Angular服务的时候，只要将其注册成为Angular组件的一个依赖项目就可以了。Angular会自动对这个服务进行实例化、信赖处理等。
Angular使用“constructor”（构造器）进行信赖注入。信赖将会传递给组件的工厂或构造器方法。因为JavaScript是一个动态类型的语言，Angular的信赖注入子系统不能使用静态的类型来识别服务的信赖。因此，一个组件必须明确的通过使用一种“注释”注入方法来定义它的信赖。例如，使用$inject属性：
var MyController = function($location) { ... };
MyController.$inject = ['$location'];
myModule.controller('MyController', MyController);
或者提供一个内联的注入“注释”：
var myService = function($http) { ... };
myModule.factory('myService', ['$http', myService]);
参考：
定义一个服务
应用开发人员通过在Angular模块中注册“名字”与“服务工厂”来定义自己的服务。
服务的工厂方法的目的是用来生成单例对象（或者方法function）。生成的对象或者方法可以通过指定到这个服务的信赖来被注入到任意的组件当中。
Angular工厂方法使用消极执行策略，这意味着，只有当需要处理一个依赖的时候，才会为每一个服务执行一次。所有的事项都是依赖于这个服务来获取一个被服务工厂方法生成的实例。
管理服务信赖
Angular允许服务声明其他的服务作为信赖需要，用来构造它们的实例。
为了声明依赖，你可以在工厂方法的参数中指定它们，然后通过使用$inject属性、字符串数组或数组注释以注入注释标明这个方法。
使用数组注释：
function myModuleCfgFn($provide) {
$provide.factory('myService', ['dep1', 'dep2', function(dep1, dep2) {}]);
}
使用$inject属性：
下面是两个服务的例子，其中一个依赖另一个，并且这两个服务都依赖Angular框架提供的其他服务：
注意：
-
batchLog服务依赖于内建的$timeout和$log服务，并且允许消息输出到console.log日志文件中。
-
routeTemplateMonitor服务依赖于内建的$route服务就像我们自定义的batchLog服务。
-
我们的两个服务都使用工厂方法来标识和数组注释来注入注释以声明它们的依赖。这里要注意的是，在数组中字符串的顺序要与在工厂方法的参数列表中的一致。除非依赖是从方法的参数列表中推断出来的，这个带有ID的数组和它们被注入的顺序决定各个服务被注入到哪里。
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
