javascripthtmlangularjsngroute

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.

Solution

  • 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>