stealthberry stealthberry - 6 months ago 52
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

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

see:

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
ngRoute
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:

app.py

from flask import Blueprint, make_response

mod = Blueprint('main', __name__)


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


index.html

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

<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

<!-- 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="/">

</head>

<body ng-controller="mainController">

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

<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>
</ul>
</div>
</nav>
</header>

<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">

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

</div>

</body>
</html>


app.js

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

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

// 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'
});

$locationProvider.html5Mode(true)
});


// 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

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.