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

i'm complete angular noob , trying fancy stuff quickly, forgive me if dumb question.

i've created website uses routing, , i'm using ui-router routing instead of standard angular router. theory still same - have index.html page in root of website "master" or "host" page, , loginview.htm, partial, exists in separate directory.

the maincontroller project loaded in index.html page. referencing controller not cause error or problem.

what i'd do, in order keep code manageable , small, have custom controller partial page lazy load when load partial, , associate partial page newly loaded controller. makes sense, right? don't want load controllers default, because that's waste of time , space.

so structure looks (if matters anyone):

root --app/ ----admin/ ------login/ --------loginview.html --------logincontroller.js --maincontroller.js index.html 

this logincontroller code. testing purposes, have made maincontroller code match exactly.

var logincontroller = function ($scope, $translate) {     $scope.changelanguage = function (key) {$translate.use(key); }; };  angular.module('app').controller('logincontroller', logincontroller); 

finally, here 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 remove whole "resolve" section, , change controller "maincontroller", works. page loads, buttons work, call "changelanguage" function , wonderful.

but want "changelanguage" feature reside in logincontroller because that's page uses it. when code looks above, error fires("uncaught error: [$injector:modulerr]") , partial page fails load.

i don't understand i'm doing wrong, , i'm not finding need via google (maybe don't know right question ask).

help?

looking through docs cannot find name property oclazyload#load.

try following:

resolve: {   loadplugin: function ($oclazyload) {     return $oclazyload.load(['app/admin/login/logincontroller.js']);   } } 

or, pre configure in config block:

app.config(function ($oclazyloadprovider) {   $oclazyloadprovider.config({     modules: [{       name: 'logincontroller',       files: ['app/admin/login/logincontroller.js']     }]   });     });  // load as:   $oclazyload.load('logincontroller');