Writing a very simple angular js app to learn routes and partials. The problem is that my would just not load the partial template at all.
index.html
<!DOCTYPE html>
<html ng-app="website">
<head>
<title>Hello World, AngularJS</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script type="text/javascript" src="../js/website.js"></script>
</head>
<body>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/login'>Login</a></li>
<li><a href='/about'>About</a></li>
</ul>
<ng-view></ng-view>
</body>
</html>
website.js
angular.module('website', ['ngRoute']).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/about', {templateUrl: 'partials/about.html'}).
when('/login', {templateUrl: 'partials/login.html'}).
otherwise({redirectTo:'/'});
$locationProvider.html5Mode(true)
});
When I load index.html, it shows the links. When I click on one of the them, or go manually to #/about, it should load the contents of the template inside ng-view, but it doesn't.
The about.html and login.html are just two files with a single
tag in them with Hello World text. What am I missing? I was earlier not including angular-route.js, but fixing that didn't work.
My directory structure goes like this:
views
--js
--website.js
--views
--index.html
--partials
--about.html
--login.html
The network says that it did GET about, but brings me back to index.html without anything in ng-view
../js/website.js? Have you at least checked that your js file was loaded and your angular application was started? Why are you learning angularJS with an obsolete version?href='/about'tohref='#/about'(#is missing) ?