lgbrf lgbrf - 6 months ago 9
AngularJS Question

Angular routing does not load the route

I'm trying to set up a simple navigation system in angular. Whenever I click a tab, it sends me to the /tab as opposed to loading the content into the page.

Live Demo: http://lintonball.com/blog

Code below, thanks in advance!



angular.module('app', ['ngRoute'])

.directive('languageSelector', function() {
return {
restrict: 'E',
templateUrl: 'includes/directives/language-selector.html'
}
})

.config(function($routeProvider) {
$routeProvider.when('/blog/it', {
templateUrl: 'includes/it/header.html'
})
.when('/blog/fr', {
templateUrl: 'includes/fr/header.html'
})
.when('/blog/es', {
templateUrl: 'includes/es/header.html'
})
.when('/', {
templateUrl: 'includes/it/header.html'
})
.otherwise({
redirectTo: '/'
});
});

<!doctype html>
<html ng-app="app">

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>
<script src="js/app.js"></script>
</head>

<body>
<header>
<div ng-view></div>
<a href="/blog/it" class="svg-wrapper">
<svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
<rect id="it-white" class="shape" height="40" width="40" stroke="#ffffff" />
<rect id="it-red" class="shape" height="40" width="40" stroke="#ed2939" />
<rect id="it-green" class="shape" height="40" width="40" stroke="#009949" />
<text x="10" y="28" fill="#fff" class="text">IT</text>
</svg>
</a>

<a href="/blog/fr" class="svg-wrapper">
<svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
<rect id="fr-white" class="shape" height="40" width="40" stroke="#ffffff" />
<rect id="fr-red" class="shape" height="40" width="40" stroke="#ed2939" />
<rect id="fr-blue" class="shape" height="40" width="40" stroke="#3a3dd9" />
<text x="5" y="28" fill="#fff" class="text">FR</text>
</svg>
</a>

<a href="/blog/es" class="svg-wrapper">
<svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
<rect id="es-red" class="shape" height="40" width="40" stroke="#ed2939" />
<rect id="es-yellow" class="shape" height="40" width="40" stroke="#ffc400" />
<text x="5" y="28" fill="#fff" class="text">ES</text>
</svg>
</a>
</header>
</body>


</html>




Answer

Change your routing config to this:

$routeProvider.when('/it', {
  templateUrl: 'includes/it/header.html'
})
.when('/fr', {
  templateUrl: 'includes/fr/header.html'
})
.when('/es', {
  templateUrl: 'includes/es/header.html'
})
.when('/', {
  templateUrl: 'includes/it/header.html'
})
.otherwise({
  redirectTo: '/'
});

and links to this:

<a href="#/fr" class="svg-wrapper">
    ...
 </a>
Comments