使用ui-router和ocLazyLoad加载控制器并将部分控制器设置为该控制器 [英] Using ui-router and ocLazyLoad to load a controller and set the partial to it

问题描述

我是一个完整的Angular菜鸟，想尽快做一些有趣的事情，所以如果这是一个愚蠢的问题，请原谅我.

I'm a complete Angular noob and trying to do some fancy stuff quickly, so forgive me if this is a dumb question.

我创建了一个使用路由的网站，并且使用ui-router代替标准的Angular路由器进行路由.理论仍然是一样的-我在网站的根目录中有一个index.html页面，即主"页面或主机"页面，而loginView.htm(是部分页面)存在于单独的目录中.

I've created a website that uses routing, and I'm using ui-router for the routing instead of the standard Angular router. The theory is still the same - I have an index.html page in the root of my website which is the "master" or "host" page, and loginView.htm, which is a partial, exists in a separate directory.

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

The mainController for the project is loaded in the index.html page. Referencing this controller does NOT cause an error or problem.

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

What I'd like to do, in order to keep code manageable and small, is have the custom controller for a partial page lazy load when I load the partial, and then associate that partial page with the newly loaded controller. Makes sense, right? I don't want to load all the controllers by default, because that's a waste of time and space.

所以我的结构看起来像这样(如果对任何人都重要):

So my structure looks like this (if it matters to anyone):

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

这是我的loginController代码.为了进行测试，我使mainController代码与之完全匹配.

This is my loginController code. For testing purposes, I have made the mainController code match this exactly.

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

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

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

Finally, here is my routing code:

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;
    });

现在-如果删除整个解析"部分，并将控制器更改为"mainController"，则一切正常.页面加载，按钮正常工作，它们调用了"changeLanguage"功能，一切都很棒.

Now - if I remove the whole "resolve" section, and change the controller to "mainController", everything works. The page loads, the buttons work, they call the "changeLanguage" function and everything is wonderful.

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

But I want the "changeLanguage" feature to reside in the loginController because that's the only page that uses it. So when the code looks like it does above, an error fires("Uncaught Error: [$injector:modulerr]") and the partial page fails to load.

我不知道自己在做什么错，也无法通过Google找到我需要的东西(也许我只是不知道要问的正确问题).

I don't understand what I'm doing wrong, and I'm not finding what I need via Google (maybe I just don't know the right question to ask).

帮助?

推荐答案

浏览文档时，我找不到name属性"rel =" nofollow> ocLazyLoad#load .

Looking through the docs I cannot find the name property for ocLazyLoad#load.

尝试以下操作:

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

或者，在配置块中对其进行预配置:

Or, pre configure it in a config block:

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加载控制器并将部分控制器设置为该控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！