SentinelSixSpy SentinelSixSpy - 1 year ago 35
HTML Question

Templates failing when navigating to them

I am working on creating a website. This is a very basic issue. When I click on different routes from the homepage I get a 404 error. I just don't see what is wrong with the code this early in the game.

app.js

'use strict';

angular.module('app', ['ngRoute']).config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/app/templates/home.html'
});
$routeProvider.when('/content', {
templateUrl: '/app/templates/contact.html'
});
$routeProvider.when('/aboutme', {
templateUrl: '/app/templates/aboutme.html'
});
$routeProvider.when('/portfolio', {
templateUrl: '/app/templates/portfolio.html'
})
.otherwise({
templateUrl: '/'
});

$locationProvider.html5Mode(true)
});


index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<nav>
<nav ng-controller="NavCtrl">
<li ng-model="navigation" ng-repeat="navigation in navigation"><a href="{{navigation.link}}">{{navigation.name}}</a></li>
</nav>
<ng-view></ng-view>

<script src="js/jquery/jquery-1.12.1.js"></script>
<script src="js/angular-1.5.0/angular.js"></script>
<script src="js/angular-1.5.0/angular-route.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/navigation.js"></script>
</body>
</html>


my only controller...

angular.module('app').controller('NavCtrl', ['$scope', function($scope) {
$scope.navigation = [
{name: 'Home', link: '/'},
{name: 'Portfolio', link: '/portfolio'},
{name: 'About Me', link: '/aboutme'},
{name: 'Contact Me', link: '/contact'}
];
}]);


error message...

enter image description here

Answer Source

Simon K pointed out that I needed <base href="/"> tag added to my <head>. This still wasn't producing the correct output I was looking for. But when I added <base href="{{navigation.link}}"> to the <head> everything started working properly.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download