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

How should I include the code files for my AngularJS project?

本文关键字：代码 文件 项目 AngularJS 何包含 我的 我应该      更新时间：2023-09-26

假设我有一个中等大小的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文件的首选方法。我不是在问如何构建我的文件。

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

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

首先，您应该根据文件的函数而不是类型对文件进行分类。

如果你需要JS文件的功能，你需要以这样或那样的方式包含它们。也许只有在需要的时候你才能把它们包括在内。

您可以使用类似Recure 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
}]);
相关文章：