Question

假设我有一个中等大小的AngularJS应用程序，其目录结构类似于以下内容：

/app
----app.js
----index.html

----/functionalityA
--------/views
------------pageA.html
--------/controllers
------------ctrlA.js
------------ctrlB.js
--------/directives
------------directiveA.js
--------/services
------------serviceA.js
------------serviceB.js

----/functionalityB
--------/views
------------pageB.html
--------/controllers
------------ctrlC.js
------------ctrlD.js
--------/directives
------------directiveB.js
--------/services
------------serviceC.js
------------serviceD.js

它有很多文件。我应该如何在我的申请中包含所有这些内容？

一种方法是在<script>中为所有这些标记使用index.html标记：

<script src="angular.js"></script>
<script src="app.js"></script>
<script src="functionalityA/controllers/ctrlA.js"></script>
<script src="functionalityA/controllers/ctrlB.js"></script>
<script src="functionalityA/directives/directiveA.js"></script>
<script src="functionalityA/services/serviceA.js"></script>
<script src="functionalityA/services/serviceB.js"></script>
<script src="functionalityB/controllers/ctrlC.js"></script>
<script src="functionalityB/controllers/ctrlD.js"></script>
<script src="functionalityB/directives/directiveB.js"></script>
<script src="functionalityB/services/serviceC.js"></script>
<script src="functionalityB/services/serviceD.js"></script>

这是一种可接受的方法吗？

如果没有，我可以采取哪些其他方法？

请注意，我的问题是了解包含项目.js文件的首选方法。我不是在询问如何构建我的文件。

Answer 1

首先 - 您应该按照其功能对文件进行分类 - 而不是按类型进行分类。

如果您需要其功能，则需要以某种方式包含JS文件。也许只有在需要时才能包含它们。

您可以使用Requre JS这样的库。

或者您可以在动态视图中包含这些脚本标记，并在标题中引用JQuery以动态包含它们。您可以使用ng-include。

好消息是，如果您按照在动态模块中注册它们的方式放置控制器和指令，这些脚本可以包含控制器和指令。

myApp.config(function($controllerProvider, $provide) {
    myApp.controlProvider = $controllerProvider;
    myApp.serviceProvider = $provide;
});

myApp.serviceProvider.factory('myDynFactory', function(){
        return {
                  //Whatever you like
        }
});

myApp.controlProvider.register('myDynController', [function($scope) {

   //Whatever you like
}]);

Answer 2

将所有这些文件包含在单独的脚本标记中并不是错误的，但它们每个都会向服务器创建单独的请求。这不是很有效，因为每个请求都有自己的标题和其他膨胀。但是，如果服务器和浏览器都支持HTTP / 2，则不会出现问题。

但由于HTTP / 2仍然是新的并且没有得到广泛支持，因此源文件通常捆绑在一起，或者根据需要延迟加载。

我应该如何包含AngularJS项目的代码文件？

2 个答案: