stealthberry stealthberry - 1 year ago 125
AngularJS Question

Why do I get a Module Error when I add more than one route to my AngularJS app?

If I have a single

route in my app.js, the testApp module loads, and the site works. However, when I add another
, (about and contact, for example), my module will not load.


angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to: Error: [$injector:nomod] Module 'testApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I have AngularJS and Angular-Routes installed, and specify the
dependency (in app.js):

├── angular#1.5.6 extraneous (1.5.7-build.4844+sha.cd3673e available)
├─┬ angular-route#1.5.6 extraneous (1.5.7-build.4844+sha.cd3673e available)

Any ideas?

Here's the code:

from flask import Blueprint, make_response

mod = Blueprint('main', __name__)

# Pass routing onto the Angular app
def main(**kwargs):
return make_response(open('app/static/index.html').read())


<!DOCTYPE html>
<html ng-app="testApp">

<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="//" />

<!-- load angular and angular route -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="app.js"></script>

<meta charset="utf-8">
<base href="/">


<body ng-controller="mainController">

<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Test App</a>

<ul class="nav navbar-nav navbar-right">
<li><a href="/"><i class="fa fa-home"></i> Home</a></li>
<li><a href="/about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="/contact"><i class="fa fa-comment"></i> Contact</a></li>

<div id="main">

<!-- this is where template content will be injected -->




// Create the module
var testApp = angular.module('testApp', ['ngRoute']);

// Routes
testApp.config(function($routeProvider, $locationProvider) {

// Home page
.when('/', {
templateUrl : 'templates/home.html',
controller : 'mainController'

// About
.when('/about', {
templateUrl : 'templates/about.html',
controller : 'aboutController'

// Contact
.when('/contact', {
templateUrl : 'templates/contact.html',
controller : 'contactController'


// Controllers
// create the controller and inject Angular's $scope
testApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'It works!';

testApp.controller('aboutController', function($scope) {
// create a message to display in our view
$scope.message = 'About page here';

testApp.controller('contactController', function($scope) {
// create a message to display in our view
$scope.message = 'Contact page here';

Answer Source

You have syntax errors; you can't have a line starting with . immediately after a line ending with ;. Remove those semicolons after each when clause.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download