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

I'm a total noob wwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwn nnnnwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

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

The MainController for the project is loaded into the index.html page. Linking to this controller does NOT cause errors or problems.

What I would like to do to keep the code manageable and small is there is a custom controller for partial lazy loading of the page when I load the partial, and then linking that partial page to the newly loaded controller. Makes sense, doesn't it? I don't want to load all the default controllers because it is 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 made the mainController code match this.

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 delete the entire "Solution" section and change the controller to "mainController" everything works. The page is loading, the buttons are working, they call the function "changeLanguage" and everything is great.

But I want the changeLanguage function to be in the loginController because this is the only page that uses it. So when the code looks like the one above, an error ("Unused error: [$ injector: modulerr]") is thrown and the partial page is not loaded.

I don’t understand what I am doing wrong and I don’t find what I need through Google (maybe I just don’t know which is the right question to ask).

reference