NgRoute - Direct URL not rendering template
I'm new to angular, so I'm sorry if it's really obvious! I am making a super basic app and right now all I want is when the user goes directly to the page, it should always display the layout and content. I am using angular ng-route
.
Like now, if I go to localhost: 8080 / it displays the layout (index.html) and content (view / home.html). If I click on the "About" link, it goes to localhost: 8080 / about and displays the layout (index.html) and correct content (view / about.html). Now if I type localhost: 8080 / about in my address bar, hit enter, I get a 404 error from my server log. I'm not sure what I'm missing. Any input is appreciated!
app.js
angular
.module('TestProject', ['ngRoute']);
routes.js
angular.module('TestProject')
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'views/home.html'
})
.when('/about', {
templateUrl: 'views/about.html'
})
.when('/contact', {
templateUrl: 'views/contact.html'
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
index.html
<!DOCTYPE html>
<html lang="en" ng-app="TestProject">
<head>
<meta charset="utf-8">
<title>Test!</title>
<base href="/">
<link rel="stylesheet" href="assets/styles/app.css">
</head>
<body>
<header><h1>Logo</h1></header>
<nav>
<ul class="main">
<li>
<div class="navBorder">
<a href="about">About</a>
</div>
</li>
<li>
<div class="navBorder">
<a href="contact">Contact</a>
</div>
</li>
</ul>
</nav>
<div ng-view></div>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="routes.js"></script>
</body>
</html>
I know that I don't have controllers yet, I just started this project and there was nothing there.
This is how my files are organized:
My file structure is below:
/index.html /app.js /routes.js /views/home.html /views/about.html /views/contact.html
source to share
If you are using AngularJS 1.3+ you need to include the concept <base href="" />
. You can do this in your tag <head>
as such
<head>
<base href="/">
...
From the docs
Before Angular 1.3, we didn't have this hard requirement, and it was easy to write apps that worked when deployed in the root context, but crashed when moved to the sub-context, because in the sub-context, all absolute URLs would be resolved in the root context of the application. To prevent this, use relative URLs in your application:
Also, without that tag, <base />
you can declare .html5Mode()
as such ... You need to take one of these two approaches.
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
source to share