## 14 服務
* 單例對象
* 延遲加載
* 保持數據(一致性)
* 控制器間通信
* 關聯方法的集合
* 應用的整個生命周期調用一次就一直存在
### 14.1 注冊服務
```
angular
.module('myApp.services', [])
.factory('UserService', function($http){
return {
method1 : function(arg1, ...){},
...
};
});
```
### 14.2 使用服務
可以在控制器、指令、過濾器、另一個服務中通過依賴聲明的方式使用服務。
```
angular
.module('myApp', ['myApp.services'])
.controller('MyCtrl', ['$scope', 'UserService', function($scope, UserService){
UserService.method1(arg1, ...);
}]);
```
### 14.3 創建服務
#### 14.3.1 factory( name, getFn )
```
angular.module('myApp.service')
.factory('myService', ['$http', function($http){
return {
// ...
};
}]);
```
#### 14.3.2 service( name, ctor );
使用 `service( )` 可用注冊一個支持構造函數的服務, 在創建實例時通過 `new` 來實例化服務對象.
```
angular.module('myApp.service')
.service('myService', function($http) {
this.request = function() {
return $http({method:'GET', url: 'api/user'});
}
});
```
#### 14.3.3 provider( name, { $get : Fn } )
所有服務工廠都是又 `$provider` 服務創建, 提供者必有 `$get()` 方法.
如果希望在 `config()` 中可用對服務進行配置, 必須用 `provider()` 來定義服務.
```
angular.provider('myService', function($http){
var url = '';
setUrl: function(url){
url = url;
},
$get : function($http) {
return $http({url: url});
}
});
// 待完善
angular.config(function(myService){
});
```
#### 14.3.3 constant( name, value /*常量*/ )
```
angular
.constant('appid', '123456');
.controller('MyCtrl', function($scope, appid){
$scope.appid = appid;
});
```
#### 14.3.4 value( name, value )
#### 14.3.6
### 區別 - provider, service, factory
> 參考: http://hellobug.github.io/blog/angularjs-providers/
```
// 好復雜
$provide.provider('myDate', {
$get: function() {
return new Date();
}
});
// 開發者自己實例化
$provide.factory('myDate', function(){
return new Date();
});
// angular 幫你實例化
$provide.service('myDate', Date);
```
>[success] demo
```
<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<title>Simple app</title>
<meta charset="UTF-8">
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet">
<!--
<script src="http://cdn.bootcss.com/angular.js/1.1.0/angular.js"></script>
-->
<script src="http://cdn.bootcss.com/angular.js/1.4.9/angular.js"></script>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
</head>
<body>
<div class="container" ng-controller="MyCtrl">
{{user}}
</div>
<div class="container" ng-controller="MyCtrl2">
{{user}}
</div>
<script type="text/javascript">
angular
.module('app', [])
.factory('UserService', function(){
return {
name : 'username',
};
})
.service('MemberService', function(){
this.nickname = 'nickname';
})
.constant('pwd', '123456')
.value('expire','7200')
.controller('MyCtrl', function($scope, UserService, MemberService, pwd, expire){
expire = 3600;
pwd = 654321;
$scope.user = {
name : UserService.name,
nickname : MemberService.nickname,
pwd : pwd,
expire: expire
};
}).controller('MyCtrl2', function($scope, UserService, MemberService, pwd, expire){
$scope.user = {
name : UserService.name,
nickname : MemberService.nickname,
pwd : pwd,
expire: expire
};
});;
</script>
</body>
</html>
```
