chows2603 chows2603 - 3 months ago 16
AngularJS Question

Angular Module injection error while injecting controllers

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.

Answer

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

Comments