Using oclazyload with $routeProvider giving controller is undefined.

[pratikm23]

Hi ,
I have removed the controller js file from the head section of my main html file in order to lazy load it.

I am using $routeProvider

var app = angular.module('myApp', ['ngRoute','ngAnimate','oc.lazyLoad']);

app.config(function ($routeProvider) {
$routeProvider
    .when('/time',
        {
            controller: 'timeController', 
            templateUrl: '/app/partials/time.html',
            access: { requiredLogin: true },
            resolve: {
                lazy: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load([{
                        name: 'myApp',
                        files: ['/app/controllers/timeController.js']
                    }]);
                }]
            }
        })

The file timeController.js is perfectly being loaded as i can see it in the network tab of browser console.
But still i am getting the error Argument 'timeController' is not a function, got undefined.

Plz help.

[ocombe]

Everything looks fine in this code. Do you have the code of the controller ?

[pratikm23]

app.controller('timeController', function ($scope, $http,$filter,$sce) {
    $scope.time = 'am';
});

[ocombe]

Change app.controller by angular.module('myApp').controller :)

[pratikm23]

Yippee .. Thanks a lot!!!

[devonzara]

@ocombe, I just ran into this same problem when implementing ocLazyLoad and had to go through and redefine all of my controllers and such after wasting a lot of time trying to find the problem...

What's the difference between app and angular.module('app')? Doesn'tangular.module('app')just get the instance ofapp`? Why does the latter work while the former doesn't?

Also, is there a way to map app.controller to angular.module('app').controller so the definitions don't have to be changed?

[ocombe]

The difference is a question of variable scopes. The variable app is not available within another file. If you define it on window.app, then it would work.
Whereas angular.module('app') is a function that will get the reference, and since angular is a global variable then it's available for you there.

[mastermoin]

as following this thread i modified my controller like :

define(['angular', 'lodash'], function(angular, _) {
return angular.module('myApp').controller('homeCtrl',[...]);
});

but still same problem : Argument 'homeCtrl' is not a function, got undefined.

please give me some hint to over come with this

[essivision]

+1

[burakkilic]

+1

[nirmalgoswami]

if you want to use app.controller instead of angular.module('appname').controller than you need use following code

app.config(['$stateProvider', '$httpProvider', '$locationProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$ocLazyLoadProvider',
    function ($stateProvider, $httpProvider, $locationProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $ocLazyLoadProvider) {


        app.controller = $controllerProvider.register;
        app.directive = $compileProvider.directive;
        app.filter = $filterProvider.register;
        app.factory = $provide.factory;
        app.service = $provide.service;
        app.constant = $provide.constant;
        app.value = $provide.value;



    }]);