Angular lazy loading controller not found exception - angularjs

Question

I have tried to lazy load a controller in angularjs app, but got stuck with some problems i.e. view loads after the controller but in console throws exception controller not found.
Here i have attched the sample code.
index.html:
Click here
<div data-ng-view>
</div>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/ocLazyLoad.min.js"></script>
<script src="js/app.js"></script>
<script src="js/cofig.js"></script>
</body>
</html>
app.js:
var testapp = angular.module('test',['ngRoute','oc.lazyLoad']);
config.js:
testapp.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/test1',{
templateUrl: 'partials/test.html',
controller: 'testController',
resolve: {
lazy: ['$ocLazyLoad',function($ocLazyLoad) {
$ocLazyLoad.load([{
name: 'test',
files: ['js/testController.js']
}]);
}]
}
})
}]);
console.log error:-
enter code here`Error: [ng:areq] http://errors.angularjs.org/1.3.7/ng/areq?p0=testController&p1=not%20aNaNunction%2C%20got%20undefined

Answer 1

This issue is because of you are loading the controllers lazily. When you load the controller lazily, this will not be available to the main module. So you have to register those controllers.
By attaching the controller provider and provide to the main module, we can use it later to register controller.
In app config,
SampleApp.registerController = $controllerProvider.register;
SampleApp.$register = $provide;
To register controller:
var SampleApp = angular.module('SampleApp');
SampleApp.$register.factory('landingService', ['$http', '$rootScope', function ($http, $rootScope) {
debugger
return {
GetQuestions: function () {
return $http({
url: ""
});
}
}
}]);
SampleApp.registerController('landingController',
['$scope', '$http', 'landingService', function (scope, http, landingService) {
scope.GetQuestions = function () {
landingService.GetQuestions().success(function (data) {
}).
error(function (data) {
});
}
}]);
The following tutorial will help you to implement the Angular Lazy Loading using RequireJS with OcLazyLoad.
Angular Lazy Load implementation

Answer 2

You should add the lazyLoad service to your config injection:
testapp.config(['$routeProvider', '$ocLazyLoad', function($routeProvider, $ocLazyLoad){
$routeProvider.when('/test1',{
templateUrl: 'partials/test.html',
controller: 'testController',
resolve: {
lazy: ['$ocLazyLoad',function($ocLazyLoad) {
$ocLazyLoad.load([{
name: 'test',
files: ['js/testController.js']
}]);
.......
[UPDATED]
I guess you defined your test controller in the js file and want to lazy load the controller. But your code is not correct. Try this:
testapp.config(['$routeProvider', '$ocLazyLoad', function($routeProvider, $ocLazyLoad){
$routeProvider.when('/test1',{
templateUrl: 'partials/test.html',
controller: 'testController',
resolve: {
lazyTestCtrl: ['$ocLazyLoad',function($ocLazyLoad) {
return $ocLazyLoad.load('js/testController.js');
}]
}
You can get the doc from official site.