AngularJS：模塊包含在分離的控制器之間

Question

假設我們在HTML文件中包含的兩個單獨文件中有兩個AngularJS控制器，如下所示：

//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>

在controller1內，我想執行一些Cookie操作，因此需要包含ngCookies。 如果我在controller1.js中這樣做，那么controller2將變得不確定。 我更喜歡將模塊恰好包含在我需要的地方，而不是其他地方。 如何在不“擦除”后續控制器的情況下實現這一目標？

編輯：如果我將ngCookies包含物從controller2移到controller1，則會收到此錯誤消息（參數'controller2'不是一個函數，未定義）

Answer 1

當您為angular.module提供第二個參數，例如angular.module('MYAPP',['ngCookies']) ，您正在定義一個新模塊及其關聯的依賴項。 如果不包括第二個參數（依賴項），則該函數將充當“獲取器”，並僅返回對該模塊的引用，您可以使用該模塊注冊更多的控制器/服務/等。 如果angular.module('MYAPP', ['ngCookies'])指定angular.module('MYAPP', ['ngCookies']) ，則將覆蓋以前的'MYAPP'模塊，這就是Controller1似乎被“擦除”的原因

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

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

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

Answer 2

也許是這樣的？

//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>`

Answer 3

您可以通過制作以下不同的模塊來做到這一點。 這也是我們要模塊化應用程序時的首選方法。

 //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 4

代碼示例中的問題如下（將[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中包含js文件

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