AngularJS路由到静态文件答案

【问题标题】：AngularJS routing to static fileAngularJS路由到静态文件
【发布时间】：2015-06-21 12:54:46
【问题描述】：

我有一个简单的angularjs 应用程序，带有用于在html5Mode 中路由的ngRoute 模块。我怎样才能在我的页面上有一个指向某个静态文件的链接，而不是让它被角度路由模块拦截？

示例如下：

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 路由：

$routeProvider
            .when('/', {
                templateUrl: 'app/components/home/homeView.html',
                controller: 'HomeController'

            })
            .when('/user', {
                templateUrl: 'app/components/user/userView.html',
                controller: 'UserController'

            })
            .otherwise({
                redirectTo: '/'
            });

当我点击 User 链接时，我被路由到localhost:8080/user，并且我的控制器和模板工作正常。当我点击 users.html 链接时，我会被路由到家，但我想调用一个静态的 home.html 页面。

【问题讨论】：

如果您只想直接使用 html，请尝试不使用斜线（或静态文件所在的路径...）... users.html一个>
为什么不为 home.html 创建一个路由？

标签： javascript html angularjs ngroute

【解决方案1】：

从AngularJS docs，您有 3 个选项：

HTML链接重写

(...)

在以下情况下，链接不会被重写；取而代之的是，浏览器将对原始链接执行完整的页面重新加载。

包含目标元素的链接
示例：<a href="/ext/link?a=b" target="_self">link</a>

指向不同域的绝对链接
示例：<a href="http://angularjs.org/">link</a>

以“/”开头的链接指向不同的基本路径
示例：<a href="/not-my-base/link">link</a>

您可能正在寻找的是第一个示例：

<a href="/users.html" target="_self">users.html</a>

【讨论】：