0

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

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

我想用于登录页面的控制器文件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() 角度中提到控制器名称，它会在加载之前尝试访问它，并且整个事情甚至在加载文件之前就崩溃了

4

1 回答 1

0

我建议您查看 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

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

于 2017-01-20T15:01:08.210 回答