The initial template loads just fine, but when I click on the link inside of purpose.html to load the new view, nothing happens, although the address in the browser changes. No errors appear in the console.
index.html
<!doctype html>
<html ng-app="playlist">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>Playlist Roulette</title>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
<link href="/stylesheets/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script><!-- load angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-resource.min.js"></script>
<script src="/javascripts/core.js"></script>
<script src="/javascripts/genre-list.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-body" ng-view>
</div>
</div>
</div>
</body>
<script src="/javascripts/bootstrap.min.js"></script>
</html>
core.js
var app = angular.module('playlist', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'PurposeController as purpose',
templateUrl:'../purpose.html'
})
.when('/genre', {
controller:'GenreController as genre',
templateUrl:'../genre.html'
});
})
.factory("settings",function(){
return {
purpose: null,
genre: [],
track: null,
popularity: false
};
})
.controller('PurposeController', function(settings) {
var purpose = this;
purpose.navRight = "Skip";
purpose.save = function(option){
if (purpose.isActive(option)) {
settings.purpose = null;
purpose.navRight = "Skip";
} else {
settings.purpose = option;
purpose.navRight = "Next";
}
};
purpose.isActive = function(option){
return settings.purpose == option;
};
})
.controller('GenreController', function(settings) {
var genre = this;
genre.navRight = "Skip";
genre.save = function(genreItem){
if (genre.isActive(genreItem)) {
settings.genre.splice(settings.genre.indexOf(genreItem), 1);
if (settings.genre.length() == 0){
genre.navRight = "Skip";
}
} else {
settings.genre.push(genreItem);
genre.navRight = "Next";
}
};
genre.isActive = function(genreItem){
return settings.genre.indexOf(genreItem) > -1;
};
});
purpose.html
<div class="step">
<div class="step-indicator">1</div><span class="step-text">What type of playlist do you want to make?</span>
</div>
<div class="row">
<div ng-click="purpose.save('Party')" ng-class="{active:purpose.isActive('Party')}" class="col-md-3 purpose-item">
<div class="purpose-icon purple text-center"></div>
<div class="step-text text-center">Party</div>
</div>
<div ng-click="purpose.save('Study')" ng-class="{active:purpose.isActive('Study')}" class="col-md-3 purpose-item">
<div class="purpose-icon red text-center"></div>
<div class="step-text text-center">Study</div>
</div>
<div ng-click="purpose.save('Relax')" ng-class="{active:purpose.isActive('Relax')}" class="col-md-3 purpose-item">
<div class="purpose-icon orange text-center"></div>
<div class="step-text text-center">Relax</div>
</div>
<div ng-click="purpose.save('Workout')" ng-class="{active:purpose.isActive('Workout')}" class="col-md-3 purpose-item">
<div class="purpose-icon yellow text-center"></div>
<div class="step-text text-center">Workout</div>
</div>
</div>
<div class="row nav-row">
<div class="col-xs-1 col-sm-offset-4 progress-container"><div class="progress-dot active"></div></div>
<div class="col-xs-1 progress-container"><div class="progress-dot"></div></div>
<div class="col-xs-1 progress-container"><div class="progress-dot"></div></div>
<div class="col-xs-1 progress-container"><div class="progress-dot"></div></div>
<div class="col-xs-2 col-sm-offset-2">
<a href="#/genre" class="step-text nav-button text-uppercase">
{{purpose.navRight}}
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
genre.html
<div class="step">
<div class="step-indicator">2</div><span class="step-text">Select up to four genres.</span>
</div>
<div class="row nav-row">
<div class="col-xs-1 col-sm-offset-4 progress-container"><div class="progress-dot active"></div></div>
<div class="col-xs-1 progress-container"><div class="progress-dot"></div></div>
<div class="col-xs-1 progress-container"><div class="progress-dot"></div></div>
<div class="col-xs-1 progress-container"><div class="progress-dot"></div></div>
</div>
</div>
Your Routing is not working because ,to aa077e8,(angularjs 1.6.0 (latest now)) the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!').
So if you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to your application:
You can get mote information see - MigraAngularJS Guidetion - aa0077e8