Question

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

<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页面时加载这些控制器？我试图在offer.html中嵌入offercontrolller它不工作!!我怎么处理这个？

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将你的状态添加到...

Answer 2

您可以使用ng-include动态加载模块。您也可以在角度路由中使用reslove。加载动态脚本时，需要使用$controllerProvider注册控制器。

请参阅如何使用ng-include加载模板。
您无权访问模块.config之外的$ controllerProvider。因此，请通过.config获取对它的引用。方法如下：
```
var myApp = angular.module('myApp', []).config(function($controllerProvider){
    myApp.controllerProvider = $controllerProvider
});
```
此处myApp是一个全局对象，其controllerProvider属性指向您的$controllerProvider。到目前为止 - 非常好。
将控制器和注册包含在模板中的脚本标记内（在您的案例中为offer.html）。这是：
```
    myApp.controllerProvider.register('myController', function($scope) {
        //code
    })
```

在angularjs中处理页面加载时间

2 个答案: