AngularJS routing to static file
I have a simple angularjs app, with ngRoute module for routing in html5Mode.
How can I have a link to some static file on my page, and not to have it intercepted by angular routing module?
Here's the example:
HTML:
<head>
<base href='/'></base>
</head>
<body ng-app="crudApp">
<a href="/">Home</a>
<a href="/user">User</a>
<a href="/users.html">users.html</a>
<div ng-view></div>
JS routing:
$routeProvider
.when('/', {
templateUrl: 'app/components/home/homeView.html',
controller: 'HomeController'
})
.when('/user', {
templateUrl: 'app/components/user/userView.html',
controller: 'UserController'
})
.otherwise({
redirectTo: '/'
});
When I click on User link I get routed to localhost:8080/user, and my controller and template work fine. When I click on users.html link I get routed to home, but I want to invoke a static home.html page.
Answer
From the AngularJS docs, you have 3 options:
Html link rewriting
(...)
In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.
- Links that contain target element
Example:<a href="/ext/link?a=b" target="_self">link</a>- Absolute links that go to a different domain
Example:<a href="http://angularjs.org/">link</a>- Links starting with '/' that lead to a different base path
Example:<a href="/not-my-base/link">link</a>
What you might be looking for is the first example:
<a href="/users.html" target="_self">users.html</a>