I know there are a ton of questions regarding AngularJS routing and trust me I've read through them all..
My issue is a weird one. Basically the routing works for one route, but none of the others.. and with the route that works I get a strange error regarding the controller that I don't know how to solve:
So the routing works for the Settings button, but when I press the English button the view does not load. And what's even weirder is if i remove the controller from the settings view, then the settings page doesn't load either..
Here's the relevant code:
Index.html
<!DOCTYPE html>
<html>
<head>
<title>CRS Client Portal</title>
<base href="/" />
<!-- The HTML5 Shim is required for older browsers, mainly older versions IE -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
</div>
<![endif]-->
{% include 'stylesheets.html' %}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body ng-app="crsportal">
{% if user.is_authenticated %}
<div class="container-fluid user-profile">
{% include 'userprofile.html' %}
</div>
{% else %}
<div class="container-fluid" ng-controller="LoginController as vm">
{% include 'login.html' %}
</div>
{% endif %}
{% include 'javascripts.html' %}
</body>
</html>
userprofile.html
{% include 'navbar.html' %}
<div class="container">
<h1 id="languagehead">Please choose a language to get started:</h1>
<a href="/english" class="btn btn-primary langbtn" role="button"> English</a>
<a href="/spanish" class="btn btn-primary langbtn" role="button"> Spanish</a>
</div>
<div ng-view></div>
**app
.js**
(function () {
'use strict';
angular
.module('crsportal', [
'crs.authentication',
'crs.config',
'crs.routes',
'crs.profiles.controllers',
'video.controller',
]);
angular
.module('crs.config', []);
angular
.module('crs.profiles.controllers', []);
angular
.module('crs.routes', ['ngRoute']);
angular
.module('video.controller', []);
angular
.module('crsportal')
.run(run);
run.$inject = ['$http'];
/**
* @name run
* @desc Update xsrf $http headers to align with Django's defaults
*/
function run($http) {
$http.defaults.xsrfHeaderName = 'X-CSRFToken';
$http.defaults.xsrfCookieName = 'csrftoken';
}
})();
routes.js
(function () {
'use strict';
angular
.module('crs.routes')
.config(config);
config.$inject = ['$routeProvider'];
/**
* @name config
* @desc Define valid application routes
*/
function config($routeProvider) {
$routeProvider.when('/home', {
templateURL: 'static/templates/home.html'
}).when('/english', {
templateURL:'static/templates/test.html',
controller: 'VideoController',
controllerAs: 'vm'
}).when('/spanish', {
templateURL:'static/templates/spanish.html'
}).when('/:username/settings', {
templateUrl: 'static/templates/settings.html',
controller: 'ProfileSettingsController',
controllerAs: 'vm'
}).when('/english/:title', {
templateUrl: 'static/templates/video.html'
}).otherwise('/home');
}
})();
profile-settings.controller.js
/**
* ProfileSettingsController
* @namespace crs.profiles.controllers
*/
(function () {
'use strict';
angular
.module('crs.profiles.controllers')
.controller('ProfileSettingsController', ProfileSettingsController);
ProfileSettingsController.$inject = [
'$location', '$routeParams', 'Authentication', 'Profile', 'Snackbar'
];
/**
* @namespace ProfileSettingsController
*/
function ProfileSettingsController($location, $routeParams, Authentication, Profile, Snackbar) {
var vm = this;
vm.destroy = destroy;
vm.update = update;
activate();
/**
* @name activate
* @desc Actions to be performed when this controller is instantiated.
* @memberOf thinkster.profiles.controllers.ProfileSettingsController
*/
function activate() {
var authenticatedAccount = Authentication.getAuthenticatedAccount();
var username = $routeParams.username.substr(1);
// Redirect if not logged in
if (!authenticatedAccount) {
$location.url('/');
Snackbar.error('You are not authorized to view this page.');
} else {
// Redirect if logged in, but not the owner of this profile.
if (authenticatedAccount.username !== username) {
$location.url('/');
Snackbar.error('You are not authorized to view this page.');
}
}
Profile.get(username).then(profileSuccessFn, profileErrorFn);
/**
* @name profileSuccessFn
* @desc Update `profile` for view
*/
function profileSuccessFn(data, status, headers, config) {
vm.profile = data.data;
$location.url('/home');
}
/**
* @name profileErrorFn
* @desc Redirect to index
*/
function profileErrorFn(data, status, headers, config) {
$location.url('/');
Snackbar.error('That user does not exist.');
}
}
/**
* @name destroy
* @desc Destroy this user's profile
* @memberOf thinkster.profiles.controllers.ProfileSettingsController
*/
function destroy() {
Profile.destroy(vm.profile.username).then(profileSuccessFn, profileErrorFn);
/**
* @name profileSuccessFn
* @desc Redirect to index and display success snackbar
*/
function profileSuccessFn(data, status, headers, config) {
Authentication.unauthenticate();
window.location = '/';
Snackbar.show('Your account has been deleted.');
}
/**
* @name profileErrorFn
* @desc Display error snackbar
*/
function profileErrorFn(data, status, headers, config) {
Snackbar.error(data.error);
}
}
/**
* @name update
* @desc Update this user's profile
* @memberOf thinkster.profiles.controllers.ProfileSettingsController
*/
function update() {
Profile.update(vm.profile).then(profileSuccessFn, profileErrorFn);
/**
* @name profileSuccessFn
* @desc Show success snackbar
*/
function profileSuccessFn(data, status, headers, config) {
Snackbar.show('Your profile has been updated.');
}
/**
* @name profileErrorFn
* @desc Show error snackbar
*/
function profileErrorFn(data, status, headers, config) {
Snackbar.error(data.error);
}
}
}
})();
Profileprovider?