Javascript AngularJS：分离控制器中的模块包含

假设我们在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.js
“严格使用”；
var someApp=angular.module（'MYAPP'）；
//var someApp=angular.module（'MYAPP'，['ngCookies']） 代码示例中的问题如下（将
[ngCookies]
更改为
['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>

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>

当您为angular.module提供第二个参数时，例如
angular.module（'MYAPP'，['ngCookies'））
，您正在定义一个新模块及其相关依赖项。如果不包含第二个参数（依赖项），则函数将充当“getter”，并简单地返回对该模块的引用，您可以使用该引用注册更多控制器/服务等。如果您多次指定
angular.module（'MYAPP'，['ngCookies'））
，您将覆盖以前的“MYAPP”模块，这就是为什么控制器1似乎被“擦除”

由于您通过`angular.module（'MYAPP'，['ngCookies']）将ngCookies包含在Controller2所在的文件中，因此无需在Controller1所在的文件中再次执行此操作。您应该能够使用$cookies just fine Controller1-只需确保注入它即可。i、 e

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

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

也许是那样的

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

//app.js
“严格使用”；
angular.module（'MYAPP'，['myCtrl1'，'myCtrl2']）；
//controller1.js
角度.module（'myCtrl1'，['ngCookies']））
.controller（'Controller1'，函数（$scope）{
$scope.CookieFunction=函数（）{
//福
};
});   
//controller2.js
“严格使用”；
angular.module（'myCtrl2'，['ngCookies'，'ui.bootstrap']）；
.controller（'Controller2'，函数（$scope，$cookies）{
$scope.SomeOtherfunction=函数（）{
//福
};
});
//HTML文件
`
您可以通过制作不同的模块来实现这一点，如下所示。当我们想要模块化我们的应用程序时，这也是首选的方法

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

//app.js
“严格使用”；
var mainApp=angular.module（'MYAPP'，['SomeApp'，'OtherApp']）；
//controller1.js
var someApp=angular.module（'someApp'，['ngCookies'）；
someApp.controller（'Controller1'，函数（$scope，$cookies）{
$scope.CookieFunction=函数（）{
//福
};
});   
//controller2.js
“严格使用”；
var otherApp=angular.module（'otherApp'，[]）；
otherApp.controller（'Controller2'，函数（$scope）{
$scope.SomeOtherfunction=函数（）{
//福
};
}); 
//HTML文件
除非后续控制器的名称相同，否则不能“擦除后续控制器”……这是什么意思？“如果我在controller1.js中这样做，那么controller2就没有定义”是什么意思？你必须澄清，因为你的问题非常模糊。我更新了上面的代码。这意味着如果我将ngCookies包含从controller2移动到controller1（我实际使用它的地方），那么controller2将变得未定义！？是的，我知道。我不是想在这两个文件中都包含ngCookies，只是在controller1.js中。但是为什么我不能在没有定义controller2.js的情况下这样做呢？因为angular.module（'moduleName'）本质上是一个“getter”，而angular.module（'moduleName'['dependency1'，'dependency2'，'etc']）是一个“setter”。当您多次“设置”它时，基本上覆盖了第一个实例。当您指定第二个参数时，它基本上声明了一个新模块及其依赖项。你只需要做一次。您可以使用getter语法（仅1个参数），只要您想在模块上注册更多控制器/指令/服务/等等，但这意味着，我只能在一个文件中包含模块，而不是在实际需要的位置。因此，如果我有20个独立的文件，我总是必须记住我在哪里包含了必要的模块，并查找该文件以检查是否包含了所有必需的模块。为什么（以及如果可以的话如何）我不能只在任何文件中包含相应的模块？您只能在一个位置指定模块的依赖项-这是正确的。但您可以从任何地方在该模块上注册新控制器/指令/服务等。就我个人而言，我认为在一个地方声明所有依赖项比将它们分散并意外地将重复项引入应用程序更容易跟踪。Angular需要提前知道所有依赖项是什么，以便依赖项注入能够正确工作。更新答案，为什么不简化为1个app.js文件？因为这不是涉及的唯一代码；）我不希望所有代码都在一个文件中。让我们假设一下，我有许多单独的文件，并且不会更改这些文件。所以我说我只能在一个文件中包含模块（而不是在我需要的任何地方）是对的吗？因此，总是要跳回该文件，看看我是否包含了所有必要的模块！？我通常用1个主app.js文件作为更新后的答案，必要时包括子文件。只是分享一下我是如何带来结构的。我很感激你的回答，谢谢。我只是想知道我的代码是否有问题，或者我只是在“处理一些结构上的限制”，我不得不接受并处理=）这似乎是我唯一的选择。谢谢daan，desmedt。
//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>`

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