使用状态提供程序从单独的文件延迟加载控制器

Question

因此，我正在尝试动态加载一个文件，该文件将控制器添加到我的主模块中。问题是我不想在脚本标记中引用文件本身。

更具体地说，我有两个控制器文件。我的index.html文件中引用的主控制器文件mainController.js。我添加到该文件中的任何控制器都可以顺利加载。

我想用于登录页面login.js的控制器文件包含以下信息：

function LoginCtrl($http){
console.log("Controller loaded");  
};
angular
.module('inspinia')
.controller('LoginCtrl', LoginCtrl);

我的所有控制器文件都在同一个文件夹中，但是，与mainController.js相反，login.js文件不会出现在任何.html文件中。

我的意图是在我的stateProvider中动态加载login.js文件，如下所示：

$stateProvider
...
.state('logins', {
url: "/logins",
templateUrl: "views/login.html",
controller: LoginCtrl,
data: { pageTitle: 'Login', specialClass: 'gray-bg' },
resolve: {
loadPlugin: function($ocLazyLoad) {
return $ocLazyLoad.load ({
name: 'inspinia.LoginCtrl',
files: ['js/controllers/login.js']
});
}
}
})
...

只要我不尝试动态加载login.js文件(因此在.html文件中添加对该文件的引用或在mainController.js文件中添加登录控制器代码)，一切都可以。但是，一旦我试图删除引用以迫使stateProvider负责加载，我就会得到一个Error: $injector:modulerr

有人知道调用lazyLoader的正确方法是什么，这样我只能在需要的时候加载.js文件吗？

编辑信息：我忘了提一件事：文件加载部分本身似乎正在工作。如果我不在任何地方调用控制器，只加载它。我可以看到浏览器正在加载控制器文件。但问题似乎是时间问题。如果我在.state()angular中提到控制器名称，我会在它被加载之前尝试访问它，甚至在加载文件之前就崩溃了

Answer 1

我建议您查看ocLazyLoad，看看控制器是如何声明和加载ui路由器解析状态属性的：

https://oclazyload.readme.io/docs/with-your-router

基本上，我认为您的方法中缺少的是使用字符串控制器声明，而不是函数一：

$stateProvider
...
.state('logins', {
url: '/logins',
templateUrl: 'views/login.html',
controller: 'LoginCtrl as login',
data: {
pageTitle: 'Login',
specialClass: 'gray-bg'
},
resolve: {
loadPlugin: function($ocLazyLoad) {
return $ocLazyLoad.load('js/controllers/login.js');
}
}
})
...

一个重要的使用技巧是：简化以前没有使用过的东西的第一个实现。您的示例显示了ocLazyLoad服务上的许多参数。试着先加载你需要的主元素，在成功后一个接一个地逐渐添加，因为有时，你可能走在了正确的轨道上，而这样的事情，你不知道，可能会导致你进入一个冗长的调试例程。

另外，看看下面的例子：

https://github.com/ocombe/ocLazyLoad/tree/master/examples/complexExample

它的国家声明和你的非常相似。相互比较并根据您的需要进行修改。