Cannot modularize AngularJS application

Question

I am new at AngularJS routing so this might sound like a noob question.

I am working on an AngularJS app where there are a lot of controllers. To keep my controllers on seperate JS files, I have decided to create separate modules for each controller.

This is my main module in angularmodule.js file.

        var app = angular.module('adminpanel', ['ngRoute', 'CustomersModule', 'ngFileUpload', 'wysiwyg.module', 'ui.bootstrap']).config(function ($routeProvider) {


        $routeProvider.
                when('/customers', {controller: CustomersCtrl, templateUrl: '/app/webroot/jakiamun/easybooks_admin/views/customers.html'}).
                otherwise({redirectTo: '/dashboard'});
        ;

    });

This is the second module in customers.js file

angular.module('CustomersModule',[])
.config(function ($routeProvider) {


        $routeProvider.
                when('/customers', {controller: CustomersCtrl, templateUrl: '/app/webroot/jakiamun/easybooks_admin/views/customers.html'}).
                otherwise({redirectTo: '/dashboard'});
        ;

    })
.controller("CustomersCtrl" ,function($scope, $rootScope, $http) {


}); 

In my html page, I am including the scripts like this

    <script src="<?php echo base_url(); ?>/assets/js/angular.min.js"></script>
      <script src="<?php echo base_url(); ?>/assets/js/angular-route.min.js"></script>
      <script src="<?php echo base_url(); ?>/assets/js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
      <script src="<?php echo base_url(); ?>/assets/js/ng-file-upload.min.js"></script>  
        <script src="<?php echo base_url(); ?>/assets/js/bootstrap-colorpicker-module.min.js"></script>           
      <script src="<?php echo base_url(); ?>/assets/js/angular-wysiwyg.min.js"></script>

      <script src="<?php echo base_url(); ?>/assets/js/ui-bootstrap-tpls-1.1.2.min.js"></script>

      <script src="<?php echo base_url(); ?>/assets/js/controllers/customers.js"></script>
      <script src="<?php echo base_url(); ?>/assets/js/angularmodule.js"></script>

I have written ng-app='adminpanel' in the body tag of my html code.

When I run my application, I get $injector:modulerr.

Full error report

Failed to instantiate module adminpanel due to:
ReferenceError: CustomersCtrl is not defined
at http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angularmodule.js:9:53
at Object.e [as invoke] (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:40:477)
at d (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:39:148)
at http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:39:272
at n (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:7:344)
at g (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:39:49)
at fb (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:42:360)
at c (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:19:421)
at zc (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:20:225)
at be (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:19:41

Answer 1

You need to change from controller: CustomersCtrl to controller: 'CustomersCtrl'. Beware of javascript syntax!

Answer 2

In the config of main app, It's does'nt know your controller yet CustomersCtrl.

You can define the route by using controller name instead.

$routeProvider. when('/customers', {controller: "CustomersCtrl", templateUrl: '/app/webroot/jakiamun/easybooks_admin/views/customers.html'}). otherwise({redirectTo: '/dashboard'}); ;

Answer 3

Change your code like bellow. angularmodule.js file.

var app = angular.module('adminpanel', ['ngRoute', 'ngFileUpload', 'wysiwyg.module', 'ui.bootstrap'])
.config(function ($routeProvider) {
$routeProvider.
            when('/customers', {controller: CustomersCtrl, templateUrl: '/app/webroot/jakiamun/easybooks_admin/views/customers.html'}).
            otherwise({redirectTo: '/dashboard'});
    ;

})

Your script ordering should be this.

<script src="<?php echo base_url(); ?>/assets/js/angular.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/js/angular-route.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="<?php echo base_url(); ?>/assets/js/ng-file-upload.min.js"></script>  
<script src="<?php echo base_url(); ?>/assets/js/bootstrap-colorpicker-module.min.js"></script>           
<script src="<?php echo base_url(); ?>/assets/js/angular-wysiwyg.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/js/ui-bootstrap-tpls-1.1.2.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/js/angularmodule.js"></script>
<script src="<?php echo base_url(); ?>/assets/js/controllers/customers.js"></script>

And You don't need to define module,simply you can create the controller extend adminpanel,so your customers.js file should like

angular.module('adminpanel).controller("CustomersCtrl" ,function($scope, $rootScope, $http) {
}); 

In Angular Its better to use all route in the the App root module.So Add the route in angularmodoule.js

I didn't debug this answer ,just get and Idea and Do it you own style!

Answer 4

Angular is a bit annoying to debug, but once you find out how it's not a big of a problem.

In Chrome, open Developer Tools, refresh the page and you will get an error message coming directly from angular's source (in Sources tab).

Put a break point there, refresh again, and then you will have the full call stack on the right. Now you will be able to click on previous steps in the call stack to check variable values etc.