I am struggling to create a basic Single Page Application (SPA) using Angular and ngRoute/ngView. Unfortunately, I can't seem to get it to work properly.
Every time I try, I encounter the error: angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module demoApp due to: Error: [$injector:nomod] Module 'demoApp' is not available! It seems like there's an issue with either misspelling the module name or forgetting to load it. When registering a module, make sure to specify the dependencies as the second argument.
I've looked at different code examples online and watched numerous YouTube tutorials to compare my code with theirs, but I'm still unable to pinpoint what I'm doing wrong. At first glance, they all appear identical to me.
I apologize in advance if this question has been asked frequently before, but previous solutions haven't helped me in any way.
This HTML file is named "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>
The following is the content of "demoApp.js", located 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 have omitted including Partial1 and Partial2 since they don't seem relevant to the issue, being just simple HTML files without any scripts.