angular.js - angular跨文件注入服務(wù)
問題描述
假設(shè)在 a.js 定義了 service A，b.js 定義了一個(gè) controller B，如何在B中注入服務(wù)A
問題解答
回答1：angular跨文件注入服務(wù)？看你這個(gè)問題，我覺得題主是概念不清楚，應(yīng)該明白以下基本概念。1. 你所寫的angular代碼的組織結(jié)構(gòu)不是以文件來劃分的。2. angular已經(jīng)抽象成了controller，service，directive等組件。這些東西你可以分成多個(gè)文件寫，也可以全寫在一個(gè)文件中，想讓你的代碼生效，只要在html中加載。為了程序可讀性好，我們一般規(guī)定一個(gè)組件定義時(shí)單獨(dú)放一個(gè)文件，并遵循良好的目錄結(jié)構(gòu)。3. 代碼劃分是靠模塊來做的。比如你用bower安裝了某個(gè)包，你需要在定義你的module時(shí)，寫入依賴模塊，那么這個(gè)被依賴模塊中定義的組件就有效。這一點(diǎn)談?wù)摰氖悄K級別的。4. 何為注入服務(wù)？雖然你加載了某個(gè)模塊，它內(nèi)部的代碼都加載了。但是每個(gè)controller依賴哪些服務(wù)，angular要如何去找，你還要告訴angular，這時(shí)候就需要依賴注入了。這一點(diǎn)談?wù)摰氖莄ontroller級別的。
綜上所述，你就這樣 controllerX.$inject = [’serviceX’]; 直接最普通的方式加載就行了。如果沒有生效，那應(yīng)該是以下原因：1. 沒有引入js文件。2. 沒有加載這個(gè)service所在的模塊。angular.module(’MyApp’,[’ModuleX’])就行了。3. 但要注意此處你自己的模塊MyApp使用可以多次，但是定義依賴只能一次，否則前后引用的就不是一個(gè)模塊了。即你可以
angular.module(’MyApp’,[’ModuleX’]) . controller(’ControllerA’, ControllerA);angular.module(’MyApp’) . controller(’ControllerB’, ControllerB);
但一定不可以
angular.module(’MyApp’,[’ModuleX’]) . controller(’ControllerA’, ControllerA);angular.module(’MyApp’,[’ModuleX’]) . controller(’ControllerB’, ControllerB);
檢查下這3點(diǎn)，如果還是不行再繼續(xù)貼代碼討論吧。
回答2：首先這個(gè)問題要分兩種情況，一種是服務(wù)A和控制器B都屬于同一個(gè)模塊，另一種情況是服務(wù)A和控制器B都不屬于同一個(gè)模塊。
我首先把代碼部分貼出來吧：首先是index.html，代碼如下：
<body ng-app='MyApp'><h1>依賴注入</h1><p ng-controller='MyController as vm'> <button ng-click='vm.getUsers()'>getUsers(依賴同一個(gè)模塊的服務(wù))</button> <button ng-click='vm.getUsers2()'>getUsers2(依賴不同模塊的服務(wù))</button> <p ng-repeat='v in vm.users'>{{v.avatar_url}}</p> <p ng-repeat='v in vm.users2'>{{v.id}}</p></p></body>
另外注意要在index.html中引入a.js b.js c.js
a.js代碼部分如下：
angular.module(’MyApp’,[’MyModule’]) .controller(’MyController’, MyController);MyController.$inject = [’MyService’, ’MyService2’];function MyController(MyService, MyService2){ var vm = this; vm.users = []; vm.users2 = []; vm.getUsers = getUsers; vm.getUsers2 = getUsers2; function getUsers(){console.log(’依賴的是同一個(gè)模塊的服務(wù)’);MyService.getData() .then(function(res){vm.users = res.data; }) } function getUsers2(){console.log(’依賴的是不同模塊的服務(wù)’);MyService2.getData() .then(function(res){vm.users2 = res.data; }) }}
b.js代碼部分如下：
angular.module(’MyApp’).service(’MyService’, MyService);MyService.$inject = [’$http’];function MyService($http){ var url = ’https://api.github.com/users’; var service = {getData: getData }; return service; function success(res){return res; } function fail(e){console.log(e); } function getData(){return $http.get(url) .then(success) .catch(fail); }}
c.js代碼部分如下：
angular.module(’MyModule’,[]) .service(’MyService2’, MyService);MyService.$inject = [’$http’];function MyService($http){ var url = ’https://api.github.com/users’; var service = {getData: getData }; return service; function success(res){return res; } function fail(e){console.log(e); } function getData(){return $http.get(url) .then(success) .catch(fail); }}
另外你也可以到這里看看寫的一個(gè)demo，就是上面代碼的運(yùn)行結(jié)果。
需要注意的就是，如果是同一個(gè)模塊的話，直接在控制器中注入這個(gè)服務(wù)就可以使用了；如果是不同的模塊，那么就有必要在主模塊中將你要依賴的那個(gè)模塊注入到我們的主模塊中，然后也可以在控制器中使用了。
你看過代碼后應(yīng)該明白的差不多了，如果還有什么不明白的，還可以看看我之前寫過的一篇文章，希望可以幫助你。
回答3：我想估計(jì)是題主不明白 angularjs 里的數(shù)據(jù)模型(Model)和視圖(View)之間是通過控制器 (controller) 發(fā)生數(shù)據(jù)雙向綁定（Data Binding）關(guān)系。
一個(gè)數(shù)據(jù)模型（M）可以有多個(gè)視圖（V），也就是說一個(gè)控制器（C）可以控制多個(gè)視圖。這些視圖之間可能有業(yè)務(wù)邏輯之間的關(guān)系，為此創(chuàng)建多個(gè)控制器，以致讓一個(gè)控制器控制一個(gè)視圖。然而這些控制器也有可能有相同的內(nèi)容，可以提取出來。那么有兩種方式：
方式一（繼承方式，常見糟糕情況）： 多個(gè)控制器繼承通用的控制器。方式二（angularjs的service）： 將通用的內(nèi)容提取為一個(gè)或多個(gè)service，讓控制器調(diào)用（按需調(diào)用不同的service）
可以對比一下兩種, service 更具模塊化，更有復(fù)用性。
我想，這樣了解了這一過程，大概就知道樓上說的 依賴注入服務(wù) 啦。
相關(guān)文章：
1. javascript - js setTimeout在雙重for循環(huán)中如何使用？2. 老師，請問我打開browsersync出現(xiàn)這個(gè)問題怎么解決啊？3. javascript - js 萬物皆對象的問題4. 在mac下出現(xiàn)了兩個(gè)docker環(huán)境5. node.js - JavaScript的一個(gè)不能理解的地方6. javascript - JS使用ele.style.backgoundImage = ’’ =’none’取消背景圖片都無效7. javascript - js 修改表格元素的，可以用DOM操作實(shí)現(xiàn)嗎？8. android - 類似這樣的recyclerview滑動(dòng)效果9. javascript - js一個(gè)call和apply的問題?10. python - xpath提取網(wǎng)頁路徑?jīng)]問題，但是缺失內(nèi)容？
網(wǎng)公網(wǎng)安備