Angular controller not found or defined while doing lazy loading

Question

Hi iam using Angular with Require. Require is managing my dependency sequence. Using lazy loading for loading controller and i was able to load my first home controller but when i wanted to navigate to dashboard controller then iam getting error dashboard controller is not found. hereis code

main.html

<body ng-app >
    <div id="ViewPort"  ng-view>  </div>
 </body>

shell.js

define(['mngRoute', 'mngSanitize'], function (ngRoute, ngSantize) {

var CMSapp = angular.module('CMS', ['ngRoute', 'ngSanitize']);

CMSapp.config(function ($routeProvider, $httpProvider) {
    console.log($httpProvider);
    $routeProvider

       // route for the home page

        .when('/', { templateUrl: 'App/Partials/home.html', resolve: loader(['Home']) })

        .when('/Dashboard', { templateUrl: 'App/Partials/Dashboard.html', resolve: loader(['Dashboard']) })

});
CMSapp.run(function () {
    console.log('shell loaded');
    console.log(CMSapp);
});


return CMSapp;

Home Controller.js

define(function () {

angular.module('CMS').controller('HomeController', ["$scope", "$http", 'MainService', function ($scope, $http, mainService) {
    $scope.message = 'Homess';

    $scope.InitializeController = function ()
    {
        console.log(mainService);
        mainService.initializeApplication($scope.initializeApplicationComplete, $scope.initializeApplicationError);
    }
    $scope.initializeApplicationComplete = function (response) {
        console.log('in default initializeApplicationComplete');

    }
    $scope.initializeApplicationError = function (response) {
        console.log('in default intialize error');
    }

}]);

});

Home.html

 <div data-ng-controller="HomeController" ng-init="InitializeController()">
<span>{{message}}</span>

Dashboardcontroller and dashboard.html are same only difference is the name

 define(function () {

angular.module('CMS').controller('DashboardController', ["$scope", "$http", 'MainService', function ($scope, $http, mainService) {
    $scope.message = 'Dashboard';

    $scope.InitializeController = function ()
    {
        console.log(mainService);

    }
}]);

});

Dasboard html

 <div data-ng-controller="DashboardController" ng-init="InitializeController()">
<span>{{message}}</span>

i was able to load home and able to bind with model, but this not in dashboard when i entered localhost:8999/Main.html#/Dashboard in url it gives error.

See the chrome console Full console

Angular, Route, Dasboardcontroller.js homecontroller.js shell.js are loaded successfuly no error in console only error is Dasboard controller is not a function, got defined

It should be ng-app="CMS" to initialize angular on page

Pankaj Parkar
– Pankaj Parkar

2016-01-14 07:51:34 +00:00
Commented Jan 14, 2016 at 7:51 — Pankaj Parkar
– Pankaj Parkar, Commented Jan 14, 2016 at 7:51

weirdpanda · Accepted Answer · 2016-01-14 07:53:18Z

3

When you use ng-app, Angular will search for a module called app. If you want to specify a custom module, you need to tell it: ng-app="CMS"

I hope this works! :)

answered Jan 14, 2016 at 7:53

weirdpanda

2,6461 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Rakesh Over a year ago

My angular app is bootstrapped and i can see the home page, which is default according to routing defined.

weirdpanda Over a year ago

So, when you go to the #/Dashboard route, it doesn't work?

weirdpanda Over a year ago

@Rakesh, what that essentially means is that it's unable to find a controller named DashboardController. The define statements you're using isn't really recommended. Let me cook up a quick sample for you.

Rakesh Over a year ago

Thanks for the effort, i was wondering if dashboardcontroller got itself registered (shown in image already attached) then why its saying not found.

weirdpanda Over a year ago

Instead of logging the service, do something like: console.log( "Dashboard controller registered" );

|

Martijn Welker · Accepted Answer · 2016-01-14 07:54:12Z

2

<body ng-app >

should be

<body ng-app="CMS">

because in your code you declare your module as so.

angular.module('CMS'

answered Jan 14, 2016 at 7:54

Martijn Welker

5,6151 gold badge19 silver badges26 bronze badges

Comments

Rakesh · Accepted Answer · 2016-01-14 08:20:55Z

0

Chrome console image console2 You can see my app is loaded bootstrapped and controllers are registered as well

answered Jan 14, 2016 at 8:20

Rakesh

377 bronze badges

2 Comments

weirdpanda Over a year ago

Add this information as an edit, lest you should get a downvote.

Rakesh Over a year ago

thanks for the advice i did it you can check full console view.

Collectives™ on Stack Overflow

Angular controller not found or defined while doing lazy loading

3 Answers 3

9 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related