Angular Module injection error while injecting controllers

Question

I am new to AngularJS and facing a problem injecting controller to an angular app. I am trying to build a single page application where the user can navigate through the pages of a particular application form. While the code for the controllers was in the same JS file, it was working fine. But moving the controllers to a separate file(as in this case, 'js/controllers/pagecontroller.js') is throwing the error below.

Error:

Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.5/$injector/nomod?p0=uwApp.controllers
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=uwApp&p1=Error%3A%2…oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.min.js%3A21%3A19)

index.html:

<!DOCTYPE html>
<html ng-app="uwApp">
    <head>

        <!-- SCROLLS -->
        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css" />

        <!-- SPELLS -->
        <!-- load angular and angular route via CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>

        <!-- Donut chart api -->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <script src="js/app.js"></script>
        <script src="js/controllers/maincontroller.js"></script>
        <script src="js/controllers/pagecontroller.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body ng-controller="mainController">
        <div ng-view></div>
    </body>
</html>

app.js

'use strict';
    var uwApp = angular.module('uwApp', ['uwApp.controllers','ngRoute'])
    .config(function($routeProvider) {

        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            })

            // route for the page
            .when('/acknandagreement', {
                templateUrl : 'pages/loan/acknandagreement.html',
                controller  : 'pageCtrl9'
            })

            // route for the page
            .when('/assetsandliabilities', {
                templateUrl : 'pages/loan/assetsandliabilities.html',
                controller  : 'pageCtrl6'
            })

            // route for the page
            .when('/borrowerinfo', {
                templateUrl : 'pages/loan/borrowerinfo.html',
                controller  : 'pageCtrl3'
            })

            // route for the page
            .when('/employmentinfo', {
                templateUrl : 'pages/loan/employmentinfo.html',
                controller  : 'pageCtrl4'
            })

            // route for the page
            .when('/infoandgovpurpose', {
                templateUrl : 'pages/loan/infoandgovpurpose.html',
                controller  : 'pageCtrl10'
            })

            // route for the page
            .when('/monthlyincomeandche', {
                templateUrl : 'pages/loan/monthlyincomeandche.html',
                controller  : 'pageCtrl5'
            })

            // route for the page
            .when('/morttypeandterm', {
                templateUrl : 'pages/loan/morttypeandterm.html',
                controller  : 'pageCtrl1'
            })

            // route for the page
            .when('/propertyinfoandpurpose', {
                templateUrl : 'pages/loan/propertyinfoandpurpose.html',
                controller  : 'pageCtrl2'
            })

            // route for the page
            .when('/residualapplication', {
                templateUrl : 'pages/loan/residualapplication.html',
                controller  : 'pageCtrl11'
            })

            // route for the page
            .when('/txndetails', {
                templateUrl : 'pages/loan/txndetails.html',
                controller  : 'pageCtrl7'
            })

            // route for the page
            .when('/declarations', {
                templateUrl : 'pages/loan/declarations.html',
                controller  : 'pageCtrl8'
            })
            ;
    });

pagecontroller.js:

'use strict';

angular.module('uwApp.controllers')
.controller('pageCtrl1', function($scope) {
    $scope.page = 'morttypeandterm';
})

.controller('pageCtrl2', function($scope) {
    $scope.page = 'propertyinfoandpurpose';
})

.controller('pageCtrl3', function($scope) {
    $scope.page = 'borrowerinfo';
})

.controller('pageCtrl4', function($scope) {
    $scope.page = 'employmentinfo';
})

.controller('pageCtrl5', function($scope) {
    $scope.page = 'monthlyincomeandche';
})

.controller('pageCtrl6', function($scope) {
    $scope.page = 'assetsandliabilities';
})

.controller('pageCtrl7', function($scope) {
    $scope.page = 'txndetails';
})

.controller('pageCtrl8', function($scope) {
    $scope.page = 'declarations';
})

.controller('pageCtrl9', function($scope) {
    $scope.page = 'acknandagreement';
})

.controller('pageCtrl10', function($scope) {
    $scope.page = 'infoandgovpurpose';
})

.controller('pageCtrl11', function($scope) {
    $scope.page = 'residualapplication';
});

maincontroller.js

'use strict';
angular.module('uwApp.controllers', [])
 .controller('mainController', function($scope) {

});

I have no clue why its not working. Please suggest.

try replacing angular.module('uwApp.controllers') with angular.module('uwApp.controllers', []) and you can remove the var uwApp = no need for that — Sahil Sharma
– Sahil Sharma, Commented Jun 19, 2016 at 3:25
uwApp.controllers is not properly defined. Do as @valarmorghulis suggested — Suman Lama
– Suman Lama, Commented Jun 19, 2016 at 3:38
@chows2603 Please look at the example I provided in my answer as I am fairly sure it will solve your problem. — CautemocSg
– CautemocSg, Commented Jun 19, 2016 at 4:40
@chows2603 Multiple people have correctly answered your question. Please accept one so the question is closed. People put their time into trying to help you, the least you can do is appropriately accept their answer. — CautemocSg
– CautemocSg, Commented Jun 30, 2016 at 13:51

Sahil Sharma · Accepted Answer · 2016-09-01 09:11:29Z

1

In pageController.js write like this

angular.module('uwApp.controllers', [])
 .controller('mainController', function($scope) {
    $scope.page = 'main controller';
})

some Explanation:

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

Find more angular docs module

There is an interesting style guidelines for angular by jonpapa johnpapa/angular-styleguide

edited Sep 1, 2016 at 9:11

answered Jun 19, 2016 at 3:40

Sahil Sharma

2,01728 silver badges34 bronze badges

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

7 Comments

chows2603 Over a year ago

I don't think ng-route's mentioned wrongly. As i said, there's no change in HTML, just the separation of the controller is creating this issue.

chows2603 Over a year ago

After the change you suggested I am now getting the following error: Argument 'mainController' is not a function, got undefined

Sahil Sharma Over a year ago

have you written this controller .controller('mainController', function($scope) { $scope.page = 'main controller'; }) please add this as well

chows2603 Over a year ago

Yes, its there in a seperate module.

Sahil Sharma Over a year ago

Let us continue this discussion in chat.

|

CautemocSg · Accepted Answer · 2016-06-19 04:46:12Z

1

Update

I made a working example on plnkr from supplied code. There are a couple things I changed:

1) Since your base route will be running mainController you should not put it on the ng-controller as well.

2) When you are referencing a module, as in the angular.module('uwApp.controllers'), the module must first have been defined. The way to define a module is to have brackets for it's dependencies, like angular.module('uwApp.controllers', []).

With those things fixed you do not need to do what I said below.

There is no need to inject the controllers through a separate module.

You can change pagecontroller.js:

angular.module('uwApp.controllers')

to...

angular.module('uwApp')

Then app.js:

var uwApp = angular.module('uwApp', ['uwApp.controllers','ngRoute'])

to...

var uwApp = angular.module('uwApp', ['ngRoute'])

edited Jun 19, 2016 at 4:46

answered Jun 19, 2016 at 3:19

CautemocSg

1065 bronze badges

2 Comments

Sahil Sharma Over a year ago

the way chows has written is also an valid way.

CautemocSg Over a year ago

@valarmorghulis You're right, I updated it with the actual needed changes.

Collectives™ on Stack Overflow

Angular Module injection error while injecting controllers

2 Answers 2

some Explanation:

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

some Explanation:

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related