javascript - 使用 ngview 时有什么方法可以避免更改 URL 地址栏

Question

在this例如，ng-view 指令不会更改地址栏中的 URL。但是，当我将此示例移植到我的应用程序时，栏中的地址会在每次点击时更改为“href”链接标记中的 URL，即使我放置了相对 URL(如示例)也是如此。

我的html代码

<div ng-view></div>

<div class="navHeader">
    <ul id="navItems" ng-controller="Departments">
        <li ng-repeat="department in departments">
            <a href="{{department.url}}">
                {{department.name}}
            </a>
        </li>
    </ul>
</div>

href 属性已在以下代码中构建:

http.get(SERVICE_ROOT + '/depts').success(function (data) {
  angular.forEach(data, function (value) {
    value.url = SERVICE_ROOT + '/dept/' + value.id; // this line
  });

  model.departments = data;
});

Answer 1

答案是否定的。 ng-view 的要点是根据当前 URL 位置更新模板。它相当于更改页面的 SPA。

如果您想做一些与您链接的示例类似的事情，那么您应该考虑使用 ng-switch。

EDIT 由于此评论而更新:

I question this because everytime that anyone does a refresh on the page, it displays only the JSON returned by the service. This happens because the address bar is filled in with the URL for the RESTful service instead of keep the page URL.

发生这种情况的原因是因为您正在使用 html pushstate history API(有谷歌!)又名 html5mode。这意味着无论出于何种意图和目的，您都在告诉浏览器您加载了不同的页面，尽管实际上根本没有更改页面。当您点击刷新时，浏览器会请求地址栏中的网址，服务器会响应该网址，在您使用 JSON 的情况下。

一个快速解决方法是在应用的 .config 函数中关闭 html5mode:

$locationProvider.html5Mode(false);

这将恢复为使用哈希语法，例如“path.to.your.site/#/about”。它看起来不太好，但应该可以完成工作。 Angular 将使用您定义的前缀为任何相关链接添加前缀。

更好选项是修改您的服务器，以便您的 rest api 位于前缀下，例如/api/，然后对于所有不是/api/*的请求，您返回您的index.html页。之后 Angular 会处理路由。这意味着您拥有两全其美的优势 - 您的地址看起来更好，(它们没有任何 #)，但刷新等按预期工作。