AngularJS：分離控制器

Question

假設我們是在獨立的文件中的兩個AngularJS控制器包含在HTML文件中，這樣模塊之間包括：

//controller1.js 
"use strict"; 
var someApp = angular.module('MYAPP'); 
//var someApp = angular.module('MYAPP',['ngCookies']); <-- Does not work 

someApp.controller('Controller1', function($scope) { 

    $scope.CookieFunction = function(){ 
     //foo 
    }; 
}); 


//controller2.js 
"use strict"; 
var someApp = angular.module('MYAPP',['ngCookies','ui.bootstrap']); 

someApp.controller('Controller2', function($scope,$cookies) { 

    $scope.SomeOtherfunction = function(){ 
     //foo 
    }; 
}); 

//HTML file 
<script src="controller1.js"></script> 
<script src="controller2.js"></script> 

內部控制器1，我想執行一些餅乾操作，因此需要包含ngCookies。如果我在controller1.js中這樣做，那麼controller2會變得不確定。我更願意將模塊包含在我需要的地方，而不是其他地方。如何在不「清除」後續控制器的情況下實現這一目標？

編輯：如果我提出ngCookies包括從控制器2到CONTROLLER1，我得到這個錯誤信息（參數「控制器2」不是一個函數，得到了未定義）

Answer 1

您可以通過製作如下的不同模塊來實現。當我們想要模塊化我們的應用程序時，這也是優先選擇的方式。

//app.js 
"use strict"; 
var mainApp = angular.module('MYAPP', ['SomeApp', 'OtherApp']); 


//controller1.js 
var someApp = angular.module('SomeApp',['ngCookies']); 
someApp.controller('Controller1', function($scope,$cookies) { 

    $scope.CookieFunction = function(){ 
     //foo 
    }; 
}); 


//controller2.js 
"use strict"; 
var otherApp = angular.module('OtherApp ',[]); 

otherApp.controller('Controller2', function($scope) { 

    $scope.SomeOtherfunction = function(){ 
     //foo 
    }; 
}); 

//HTML file 
<script src="app.js"></script> 
<script src="controller1.js"></script> 
<script src="controller2.js"></script> 

Answer 2

代碼示例中的問題是以下（其他城市[ngCookies]到['ngCookies']）

//controller1.js 
"use strict"; 
var someApp = angular.module('MYAPP',['ngCookies']); 

其他方法中，簡化了對1 app.js

// app.js 
"use strict"; 
var someApp = angular.module('MYAPP',['ngCookies']); 

someApp.controller('Controller1', function($scope) { 

    $scope.CookieFunction = function(){ 
     //foo 
    }; 
}); 

someApp.controller('Controller2', function($scope,$cookies) { 

    $scope.SomeOtherfunction = function(){ 
     //foo 
    }; 
}); 

//HTML file 
<script src="app.js"></script> 

簡化爲1，不同的控制器文件

如果你想保持在隨後單獨的文件控制器主要app.js，

app.js

var app = angular.module("testApp",['ngCookies','ui.bootstrap']); 

test1.js

app.controller("controller1",function(){ 
// some code 
}) 

test2.js

app.controller("controller2",function(){ 
// some code 
}) 

最後在HTML中包括

<script src="app.js"></script> 
<script src="controller1.js"></script> 
<script src="controller2.js"></script> 

Answer 3

js文件當你給一個第二個參數angular.module，如angular.module('MYAPP',['ngCookies'])，要定義新模塊和它關聯的依賴。如果你不包含第二個參數（依賴），那麼這個函數就像一個'getter'一樣，只是返回一個對該模塊的引用，你可以通過它來註冊更多的控制器/服務等。如果你多次指定angular.module('MYAPP', ['ngCookies'])，那麼你正在覆蓋你以前的'MYAPP'模塊，這就是爲什麼Controller1似乎被「擦除」的原因

由於您通過`angular.module（'MYAPP'，['ngCookies' ]）已經存在於Controller2所在的文件中，您不需要在Controller1所在的文件中再次執行該操作。您應該可以使用$ cookies就好了Controller1 - 只需確保注入它即可。即

someApp.controller('Controller1', function($scope, $cookies) { 

    $scope.CookieFunction = function(){ 
     //foo 
    }; 
}); 

Answer 4

也許這樣的事情？

//app.js 
"use strict"; 
angular.module('MYAPP', ['myCtrl1', 'myCtrl2']); 

//controller1.js 
angular.module('myCtrl1', ['ngCookies']) 
    .controller('Controller1', function($scope) { 

    $scope.CookieFunction = function(){ 
     //foo 
    }; 
}); 


//controller2.js 
"use strict"; 

angular.module('myCtrl2',['ngCookies','ui.bootstrap']); 
    .controller('Controller2', function($scope,$cookies) { 

    $scope.SomeOtherfunction = function(){ 
     //foo 
    }; 
}); 

//HTML file 
<script src="app.js"></script> 
<script src="controller1.js"></script> 
<script src="controller2.js"></script>`