首页 > 解决方案 > 我应该在 index.html 中包含所有控制器的所有脚本标签吗?

问题描述

我正在使用 angularjs 创建一个 SPA,并在管理面板中为每个功能都有一个单独的文件夹,其中包含部分视图和控制器,如下所示:
文件和文件夹结构

我现在面临的问题是我发现自己必须添加一个引用所有控制器的所有 .JS 文件的脚本标签。

    <script src="assets/js/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="views/clients/clients_controller.js"></script>
    <script src="views/clients/orders_controller.js"></script>

这意味着如果用户正在查看客户数据,订单、产品等的整个脚本将被加载。

现在,如果我的应用程序中有大约 100 个左右的控制器,那将是无缘无故加载大量 JS 脚本。

对不起,我已经编程了大约 17 年,从 php 到 python 开始,我之前使用 angularjs 作为 ionic 框架应用程序的一部分,但从来没有作为 Web 应用程序,这也是我第一次问关于堆栈溢出,所以请多多包涵,并提前致谢。

标签: javascriptangularjscontroller

解决方案


以下是如何在不使用任何库的情况下延迟加载控制器。

首先获取引导应用程序的控件提供程序的参考。您可以将其附加到您的应用程序对象本身。

var myApp = angular.module('myapp', [])
.config(['$controllerProvider', function($controllerProvider) {
    myApp.controlProvider = $controllerProvider;
}]);

现在将您的控制器放入 .js 或您想要添加到 DOM 的 html 文件中的脚本中 - 或者,可能在路由中。

myApp.controlProvider.register('my-lazy-controller', ['$scope', function($scope) {
}])

如果您不想在路由中使用它,请使用适当的方法加载此新脚本或 html。.load()如果您在 html 文件中有控制器或 jQuerygetScript()用于加载 .js 文件,则可以使用 jQuery


推荐阅读