Flux Flux - 5 months ago 19
AngularJS Question

Failed to instantiate module demoApp due to: Error: [$injector:nomod] Module 'demoApp' is not available

I am trying to build a simple SPA using angular and ngRoute/ngView. I simply cannot make it work.

I get the error: angular.js:68
Uncaught Error: [$injector:modulerr] Failed to instantiate module demoApp due to:
Error: [$injector:nomod] Module 'demoApp' 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 looked at various code examples on the web as well as youtube tutorials and compared my code to theirs, but I simply cannot figure out what I am doing wrong. To me, they look identical.

I apologize in advance, this seems to be a question that has been asked a lot in the past, but previous answers have not been to any help for me.

This is my HTML-file, it is called "test.html".


<html ng-app="demoApp">
<head>
<title>My Angular App</title>

</head>

<body>
<h2>DemoApp Demo</h2>
<div>
<a href="#/partial1.html">Partial 1</a>
<a href="#/partial2.html">Partial 2</a>
<div ng-view></div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src = "demoApp.js" />
</body>
</html>


This is "demoApp.js", it is in the same directory as test.html

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

demoApp.config(['$routeProvider', function($routeProvider) {
$routeProvider

.when('/partial1',
{
controller: 'SimpleController',
templateUrl: 'Partials/partial1.html'
}).when('/partial2',
{
controller: 'SimpleController',
templateUrl: 'Partials/partial2.html'
}).otherwise({redirectTo: '/partial1'});
}]);


demoApp.controller('SimpleController', function($scope){
$scope.customers = [
{name:'Victor', city:'Norrköping'},
{name:'Mikael', city:'Göteborg'},
{name:'Jocke', city:'Göteborg'},
{name:'Skåne', city:'Ystad'}
];

$scope.addCustomer = function(){
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
}
});


I did not include Partial1 and Partial2 as they seem irrelevant to the problem as they are only simple HTML files with no scripts.

Answer

follows the error and how tidies them:

WRONG

<script src="..." />

CORRECT

<script src="..." > </script>

Plunker with awnser: http://plnkr.co/edit/Mz1GRSFRxaUN9q6gUONl

Comments