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

问题

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

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.

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

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

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.

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.

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).

Help?

回答1:

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

Try the following:

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

来源：https://stackoverflow.com/questions/31466237/using-ui-router-and-oclazyload-to-load-a-controller-and-set-the-partial-to-it

标签

angularjs

angular-ui-router

oclazyload