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

【问题标题】：Lazy loading controller from separate file using state provider使用状态提供程序从单独的文件延迟加载控制器
【发布时间】：2017-01-19 21:04:51
【问题描述】：

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

更具体地说，我有 2 个控制器文件。我的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() 角度中提到控制器名称，它会在加载之前尝试访问它，并且整个事情甚至在加载文件之前就崩溃了

【问题讨论】：

标签： javascript angularjs oclazyload

【解决方案1】：

我建议您查看 ocLazyLoad 以了解控制器是如何声明和加载 ui-router 解析状态属性的：

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 服务的许多参数。尝试首先加载您需要的主要元素，在成功后逐步添加一个又一个，因为有时您可能走在正确的轨道上，而您不知道的类似这样的事情可能会导致您进入 loooooong 调试例行公事。

另外，看看下面的例子：

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

它的状态声明与您的非常相似。相互比较并根据您的需要进行修改。

【讨论】：