Question

我是一个完整的Angular noob并试图快速做一些奇特的东西，所以请原谅我，如果这是一个愚蠢的问题。

我创建了一个使用路由的网站，我使用ui-router进行路由而不是标准的Angular路由器。理论仍然相同 - 我的网站根目录中有一个index.html页面，即＃34; master＆＃34;或者＆＃34;主持人＆＃34;页面和loginView.htm，它是一个部分，存在于一个单独的目录中。

项目的mainController加载到index.html页面中。引用此控制器不会导致错误或问题。

为了保持代码可管理性和小，我想做的是在加载部分页面时为部分页面延迟加载设置自定义控制器，然后将该部分页面与新加载的控制器关联起来。有道理，对吗？我不想默认加载所有控制器，因为这样做浪费时间和空间。

所以我的结构看起来像这样（如果对任何人都重要）：

Root
--app/
----admin/
------login/
--------loginView.html
--------loginController.js
--mainController.js
index.html

这是我的loginController代码。出于测试目的，我已经使mainController代码与此完全匹配。

var loginController = function ($scope, $translate) {
    $scope.changeLanguage = function (key) {$translate.use(key); };
};

angular.module('app').controller('loginController', loginController);

最后，这是我的路由代码：

function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {

    $urlRouterProvider.otherwise("/admin/login");

    $stateProvider
        .state('login', {
            url: "/admin/login",
            templateUrl: "app/admin/login/loginView.html",
            controller: loginController,
            resolve: {
                loadPlugin: function ($ocLazyLoad) {
                    return $ocLazyLoad.load([
                        {
                            name: 'loginController',
                            files: ['app/admin/login/loginController.js']
                        }
                    ]);
                }
            }
        })
    ;
}

angular
    .module('app')
    .config(config)
    .run(function ($rootScope, $state) {
        $rootScope.$state = $state;
    });

现在 - 如果我删除整个＆＃34;解决＆＃34;部分，并将控制器更改为＆＃34; mainController＆＃34;，一切正常。页面加载，按钮工作，他们调用＆＃34; changeLanguage＆＃34;功能和一切都很棒。

但我想要＆＃34; changeLanguage＆＃34;驻留在loginController中的功能，因为它是唯一使用它的页面。因此，当代码看起来像上面那样时，会触发错误（＆＃34;未捕获错误：[$ injector：modulerr]＆＃34;）并且部分页面无法加载。

我不明白我做错了什么，而且我找不到我需要的东西（也许我只是不知道要问的正确问题）。

帮助？

Answer 1

浏览文档时，我找不到ocLazyLoad#load的name属性。

尝试以下方法：

resolve: {
  loadPlugin: function ($ocLazyLoad) {
    return $ocLazyLoad.load(['app/admin/login/loginController.js']);
  }
}

或者，在配置块中预先配置它：

app.config(function ($ocLazyLoadProvider) {
  $ocLazyLoadProvider.config({
    modules: [{
      name: 'loginController',
      files: ['app/admin/login/loginController.js']
    }]
  });    
});

// then load it as: 

$ocLazyLoad.load('loginController');

使用ui-router和ocLazyLoad加载控制器并将其设置为部分

1 个答案: