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

【问题标题】：Is there any way to avoid changing URL address bar when using ngview使用 ngview 时有什么方法可以避免更改 URL 地址栏
【发布时间】：2014-03-10 14:30:43
【问题描述】：

在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;
});

【问题讨论】：

你的代码在哪里？
In this example ng-view directive don´t change the URL。当然它会改变，你只是看不到它，因为它是 iframe。
有没有其他方法可以避免URL地址栏发生变化？
你可以分配一个ng-click函数，传入department.url，然后运行get函数。
这无法完成，因为控制器由路由处理

标签： javascript html angularjs

【解决方案1】：

答案是否定的。 ng-view 的重点是根据当前 URL 位置更新模板。这相当于换页的 SPA。

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

EDIT因这条评论而更新：

我对此提出质疑，因为每当有人在页面上进行刷新时，它只会显示服务返回的 JSON。发生这种情况是因为地址栏填充了 RESTful 服务的 URL，而不是保留页面 URL。

发生这种情况的原因是因为您使用的是 html pushstate history API（有一个 google！）AKA html5mode。这意味着从所有意图和目的来看，您是在告诉浏览器您已经加载了一个不同的页面，尽管实际上根本没有改变页面。当您点击刷新时，浏览器会请求地址栏中的 url，服务器会响应该 URL，在您的情况下使用 JSON。

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

$locationProvider.html5Mode(false);

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

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

【讨论】：

那么是不是可以在SPA中使用ng-view和restful服务呢？
你是怎么得出这个结论的？ SPA 非常依赖后端的良好 RESTful API。
我的意思是ng-view SPA 和 RESTful。我对此提出质疑，因为每次有人在页面上进行刷新时，它只显示服务返回的 JSON。发生这种情况是因为地址栏填充了 RESTful 服务的 URL，而不是保留页面 URL。不是吗？
不确定这是否可以与球衣一起使用，不容易重定向到 index.html 就可以了。我的restful服务在localhost:8080/app/service/*下，URL还是变成了localhost:8080/app/#/service/，看起来很丑，解决不了问题。
您应该访问localhost:8080/app，并且只向localhost:8080/app/service/* 发出AJAX 请求。您的链接都应该是相对的，这意味着您的 URL 将更改为：localhost:8080/app/#/dept/:id。我从未使用过 Jersey，但无论如何您都不想 redirect，您应该返回 index.html 而不重定向。任何好的 http 服务器都应该能够轻松做到这一点。