> 了解 Angularjs1.x 中的 service,factory,provider,constant,value 的應用場景及區別
> 不管 service , factory 還是 provider 都屬于 service
### 關于 service
service 一旦被定義后就可以在任何地方通過依賴的方式調用且可以保存數據,直到應用結束,比如
~~~
controller(['service', function(service){}]);
~~~
而 controller 則一旦路由發生變化 controller 就會失效,下次打開頁面就需要重新加載保存數據
### factory
factory 是 angularjs 中創建 service 最簡單的一個方法
#### 創建 factory
通過使用 factory 我們只需要返回一個包含數據,方法的對象就可以了,如下
~~~
angular.module('MyApplication')
.factory('user', ['$http', function($http){
var loginUrl = 'http://localhost/api/v1/login';
return {
login: function(username, password) {
return $http.post(loginUrl, {
username: username,
password: password
});
},
};
}]);
~~~
#### 調用 factory
通過以下方式即可調用上述 service
~~~
angular.module('MyApplication')
.controller(['$scope', 'user', function($scope, user){
user.login('name', 'password').then(function(response){
if(response.data.err_code == 0) {
console.log('登錄成功')
} else {
console.log('登錄失敗')
}
}, function(response){
console.log('網絡請求出錯了', response)
});
}]);
~~~
#### 應用場景
在 service 中,如果我們僅僅需要的是一些方法或數據集合,則可以通過 factory 簡單的創建一個 service 來滿足需求
注:如果需要在 config 中配置 service 則不能使用 factory 來創建
### service
#### 創建 service
service 通過構造函數來創建 service,具體實現同 factory,示例如下
~~~
angular.module('MyApplication')
.service('user', ['$http', function($http){
var loginUrl = 'http://localhost/api/v1/login';
this.login: function(username, password) {
return $http.post(loginUrl, {
username: username,
password: password
});
};
}]);
~~~
#### 調用方式
其調用方式與 factory 同樣
~~~
angular.module('MyApplication')
.controller(['$scope', 'user', function($scope, user){
user.login('name', 'password').then(function(response){
if(response.data.err_code == 0) {
console.log('登錄成功')
} else {
console.log('登錄失敗')
}
}, function(response){
console.log('網絡請求出錯了', response)
});
}]);
~~~
#### 應用場景
可以看到,這里的 login 使用了 this. 的方式來創建的,在此場景中可以寫更多的業務邏輯來控制數據
注:如需在 config 中配置 service 的話,除了 factory 不能用之外, service 也不能用
### provider
provider 是最底層的創建 service 的方法,可以在 config 中被調用和配置
#### 創建 provider
創建 provider,與 factory、service 不同的是,provider 需要使用 this,$get 來返回方法和數據
~~~
angular.module('MyApplication')
.provider('user', ['$http', function($http){
this.loginUrl = 'http://localhost/api/v1/login';
this.setLoginUrl = function(url){
this.loginUrl = url;
}
this.$get = function($http) {
return {
login: function(username, password) {
return $http.post(this.loginUrl, {
username: username,
password: password
});
},
};
}
}]);
~~~
#### 調用方式
與 factory、service 不同的是, provider 可以在 config 中調用,示例如
~~~
angular.module('MyApplication')
.config(['user', function(user){
user.setLoginUrl('http://localhost/api/v2/login');
}]);
~~~
普通調用則與 factory, service 的調用方式一樣
#### 應用場景
當需要通過配置指定特殊的數據源時就可以使用 provider 來實現,比如開發環境和生產環境的數據交互地址的域名可能不一致,就可以通過這種方式來實現