angularjs - 在 angularjs 中处理页面加载时间

Question

我是 angularjs 的新手。我写了一个简单的网站代码。在这里，我正在加载 index.php 主索引页面本身中的所有 Controller 。

<script src="app/components/productController.js"></script> 
<script src="app/components/categoryController.js"></script>
<script src="app/components/offersController.js" ></script>
<script src="app/components/CheckController.js"></script>
<script src="app/components/orderController.js"></script>

加载时间更多。有什么方法可以仅在调用特定的 HTML 页面时加载这些 Controller ？我曾尝试将优惠 Controller 嵌入 offer.html它不工作!我该如何处理？

Answer 1

您可以使用 ocLazyLoad .您所要做的就是配置哪个页面将使用哪些文件...

如果您正在使用 ui.router ，lazyLoad 在这里很好用，这是一个在特定状态下加载文件的例子......

$stateProvider.state('index', {
  url: "/", // root route
  views: {
    "lazyLoadView": {
      controller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve
      templateUrl: 'partials/main.html'
    }
  },
  resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
    loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
      // you can lazy load files for an existing module
             return $ocLazyLoad.load('js/AppCtrl.js');
    }]
  }
});

此示例取自 ocLazyLoad文档，如您所见，您将加载 AppCtrl.js 仅在此状态下，您可以想象您只能在需要的状态下加载任何文件。

想想你只在一个页面中使用非常大的图表库，所以你所要做的就是将它添加到你的状态解析中使用 ocLazyLoad ...