Question

我的角度应用程序设置如下：

<div class="main" ng-app="myApp">
    <div class="sub" ng-controller="sub1">
        ...
    </div>
    <div class="sub" ng-controller="sub2">
        ...
    </div>
    <div class="sub" ng-controller="sub3">
        ...
    </div>
</div>

每个控制器都在不同的js文件中，因此文件结构如下：

Templates
-> home.html
Controllers
-> sub1Controller
-> sub2Controller
-> sub3Controller

在每个控制器文件中，我通过执行

将控制器添加到应用程序

ngApp.controller("sub1", function($scope){ ... });

在html文件中我链接了脚本。在经历了一些未定义的错误之后，我发现我正在为每个指令创建一个新的应用程序，因为要获得ngApp我使用的angular.module("myApp", [])，不像angular.module("myApp")那样检索模块。所以基本上我的问题是，我应该在哪里定义模块？由于angular.module("myApp")在angular.module("myApp", [])被调用之前无法工作，因此我无法使用不带括号的那个。在包含页面上定义模块是不好的做法？将控制器分离到不同的文件而不是同一个文件中的所有文件都是不好的做法吗？

Answer 1

将控制器分成单独的文件绝对是个好主意，我赞赏你这样做。我建议在controllers目录上面添加额外的文件来定义角度模块。

templates
-> home.html
js
->
  angular_config.js
  controllers
    -> sub1Controller
    -> sub2Controller
    -> sub3Controller

Answer 2

将所有控制器放在同一个文件中没有任何问题，但为了简单起见和未来的复杂性，最好将每个控制器存储在一个单独的文件中。

一个好的解决方案可能是将所有控制器放在控制器文件夹中（您当前正在做什么）第二件事是加载另一个你可以调用app.js的文件，它将所有控制器和其他东西连接在一起，例如

您可以在js文件夹中的 app.js 中输入

：

window.onload = function(){

   var app = angular.module('mymodal',[]);

   app.controller('sub1Controller',function(){});
   app.controller('sub2Controller',function(){});
   app.controller('sub2Controller',function(){});

};

然后在索引。* 文件中按以下顺序加载js文件

<script src="js/controllers/sub1Controller.js"></script>
<script src="js/controllers/sub2Controller.js"></script>
<script src="js/controllers/sub3Controller.js"></script>
<script src="js/app.js"></script>

顺便说一句，您可以使用grunt或gulp等任务运行器工具将所有控制器文件连接到一个文件中。

我该如何定义模块以向其添加控制器？

2 个答案: