I'm newer to angular so I'm sorry if this is really obvious! I'm making a super basic app and right now all I want is when a user directly goes to a page it should always display the layout and the content. I am using angular's ng-route.
As of right 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 the 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's log. I'm not sure what I'm missing. Any input 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 I don't have any controllers yet, I just started this project and there's nothing there yet.
Here are 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
If using AngularJS 1.3+, you need to include a notion of a
<base href="" />. You can do this in your<head>tag as suchFrom the docs
Additionally, without this
<base />tag, you can declare.html5Mode()as such... You'll need to take one of these two approaches.