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

Question

我是一个彻头彻尾的 Angular 菜鸟，正在尝试做一些奇特的事情 quickly，如果这是一个愚蠢的问题，请原谅我。

我创建了一个使用路由的网站，我使用 ui-router 作为路由而不是标准的 Angular 路由器。理论仍然是一样的——我在我网站的根目录中有一个 index.html 页面，它是 "master" 或 "host" 页面，而 loginView.htm 是部分页面，存在于单独的目录中。

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

为了保持代码的可管理性和小型化，我想做的是在我加载部分页面时为部分页面延迟加载自定义控制器，然后将该部分页面与新加载的控制器相关联.有道理，对吧？我不想默认加载所有控制器，因为那是浪费时间 space.

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

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

这是我的登录控制器代码。出于测试目的，我使 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;
    });

现在 - 如果我删除整个 "resolve" 部分，并将控制器更改为 "mainController"，一切正常。页面加载，按钮工作，它们调用 "changeLanguage" 函数，一切都很棒。

但我希望 "changeLanguage" 功能驻留在 loginController 中，因为这是唯一使用它的页面。因此，当代码看起来像上面那样时，会触发错误（"Uncaught Error: [$injector:modulerr]"）并且部分页面无法加载。

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

帮忙？

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 加载控制器并为其设置部分

Using ui-router and ocLazyLoad to load a controller and set the partial to it

angularjs

angular-ui-router

oclazyload