Question

嗨，我无法在互联网上找到问题的确切答案

我正在玩AngularJs，我意识到，我必须加载index.html中的每个文件。

这样做感觉不太顺利，我很确定它会影响加载时间。

有没有办法以适当和快速的方式做到这一点？

的index.html：

<!-- modules -->
<script src="js/app.js"></script>
<!-- controllers -->
<script src="js/controllers/Controller00.js"></script>
<script src="js/controllers/Controller01.js"></script>
<script src="js/controllers/Controller02.js"></script>
<!-- directives -->
<script src="js/directives/Directive00.js"></script>
<script src="js/directives/Directive01.js"></script>
<!-- services -->
<script src="js/services/Service00.js"></script>
<script src="js/services/Service01.js"></script>

app.js

angular.module('MyApp', ['ngRoute']).config(function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');

  $routeProvider
    .when('/', {
      redirectTo: '/00'
    })
    .when('/00', {
      templateUrl: 'view/00.html',
      controller: 'Controller00',
      controllerAs: 'ctrl00'
    })
    .when('/01', {
      templateUrl: 'view/01.html'
    })
    .when('/02', {
      templateUrl: 'view/02.html',
      controller: 'Controller02',
      controllerAs: 'ctrl02'
    })
    .when('/03', {
      templateUrl: 'view/03.html',
      controller: 'Controller03',
      controllerAs: 'ctrl03'
    })
    .otherwise({
      redirectTo: '/00'
    });
});

Answer 1

您可以使用第三方等延迟加载模块和组件 ocLazyLoad

检查他们的文档 https://oclazyload.readme.io/

Answer 2

您可以使用任务运行器（如grunt，gulp等..）来连接，最小化，uglify您的代码并加载单个* .min.js文件。

或者，您也可以使用静态模块捆绑器。例如，Webpack有很好的文档记录，特别是对Angular而言 - 你也可以用它来封装AngularJS应用程序。

关于ocLazyLoad（由其他用户建议）的问题，请注意AngularJS不是为支持延迟加载而设计的。 OcLazyLoad ，我用过，覆盖一些AngulrJS核心方法，比如 angular.boostrap 函数（只是为了提供一个例子）等等有了它，你不再运行AngularJS了，而是“fork”......

然后，恕我直言，提供启用gzip（服务器端）的文件。

Answer 3

Go for Bundling and Minification，它提供了一种减少获取JS和CSS资源文件所需的请求数量并减少文件大小的方法。

这样做并不是很顺利，我很确定这会影响加载时间。

在调试和开发时，当您想要发布代码时，所有JS文件都应该捆绑到一个文件中。当静态内容在浏览器中缓存时，不要担心性能。

作为最佳实践，使用包管理器，它将帮助您组织文件。您可以查看Bower

如果您真的想要实施最佳网络开发实践，建议您访问Yeoman

Yeoman帮助您启动新项目，规定最佳实践和工具，以帮助您保持工作效率。

AngularJs加载所需的脚本

3 个答案: