了解 Angularjs1.x 中的 service,factory,provider,constant,value 的應(yīng)用場景及區(qū)別

不管 service , factory 還是 provider 都屬于 service

關(guān)于 service

service 一旦被定義后就可以在任何地方通過依賴的方式調(diào)用且可以保存數(shù)據(jù)，直到應(yīng)用結(jié)束，比如

controller(['service', function(service){}]);

而 controller 則一旦路由發(fā)生變化 controller 就會(huì)失效，下次打開頁面就需要重新加載保存數(shù)據(jù)

factory

factory 是 angularjs 中創(chuàng)建 service 最簡單的一個(gè)方法

創(chuàng)建 factory

通過使用 factory 我們只需要返回一個(gè)包含數(shù)據(jù)，方法的對象就可以了，如下

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});},}; }]);

調(diào)用 factory

通過以下方式即可調(diào)用上述 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('網(wǎng)絡(luò)請求出錯(cuò)了', response)}); }]);

應(yīng)用場景

在 service 中，如果我們僅僅需要的是一些方法或數(shù)據(jù)集合，則可以通過 factory 簡單的創(chuàng)建一個(gè) service 來滿足需求

注：如果需要在 config 中配置 service 則不能使用 factory 來創(chuàng)建

service

創(chuàng)建 service

service 通過構(gòu)造函數(shù)來創(chuàng)建 service，具體實(shí)現(xiàn)同 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});}; }]);

調(diào)用方式

其調(diào)用方式與 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('網(wǎng)絡(luò)請求出錯(cuò)了', response)}); }]);

應(yīng)用場景

可以看到，這里的 login 使用了 this. 的方式來創(chuàng)建的，在此場景中可以寫更多的業(yè)務(wù)邏輯來控制數(shù)據(jù)

注：如需在 config 中配置 service 的話，除了 factory 不能用之外， service 也不能用

provider

provider 是最底層的創(chuàng)建 service 的方法，可以在 config 中被調(diào)用和配置

創(chuàng)建 provider

創(chuàng)建 provider，與 factory、service 不同的是，provider 需要使用 this,$get 來返回方法和數(shù)據(jù)

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});},};} }]);

調(diào)用方式

與 factory、service 不同的是， provider 可以在 config 中調(diào)用，示例如

angular.module('MyApplication') .config(['user', function(user){user.setLoginUrl('http://localhost/api/v2/login'); }]);

普通調(diào)用則與 factory, service 的調(diào)用方式一樣

應(yīng)用場景

當(dāng)需要通過配置指定特殊的數(shù)據(jù)源時(shí)就可以使用 provider 來實(shí)現(xiàn)，比如開發(fā)環(huán)境和生產(chǎn)環(huán)境的數(shù)據(jù)交互地址的域名可能不一致，就可以通過這種方式來實(shí)現(xiàn)

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。