了解 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 來實現，比如開發環境和生產環境的數據交互地址的域名可能不一致，就可以通過這種方式來實現

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Angularjs1.x 中的 service,factory,provider,constant,value的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。