I'm encountering an issue while setting up my first Angular app with routing. It seems to be a simple problem but it's not working properly.
Whenever I click on the links, the URL changes.
- index.html - file:///C:/Users/me/repos/angularRouteTest/app/index.html#!/
- about click - file:///C:/Users/me/repos/angularRouteTest/app/index.html#!/#about
However, the content inside ng-view remains unchanged.
Here's the code snippet:
<!DOCTYPE html>
<html lang="en>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body data-ng-app="swsApp">
{{1+1}}
<p><a href="#/">Index</a></p>
<a href="#about">About</a>
<div ng-view></div>
</body>
(function() {
"use strict";
var app = angular.module("swsApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click on the links to change this content</p>"
})
.when("about", {
template : "<h1>About</h1><p>Click on the links to change this content</p>"
})
.otherwise({
template: "<h1>otherwise</h1>"
})
})
}());
Does anyone have any idea what might be causing this issue?