Question

在this示例中，ng-view指令不会更改地址栏中的URL。但是，当我将此示例移植到我的应用程序时，即使我放置了相对URL（如示例），条形图中的地址也会在每次单击时更改为“href”链接标记中的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。

由于此评论，

编辑已更新：

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

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

一个快速解决方法是在应用的html5mode功能中关闭.config：

$locationProvider.html5Mode(false);

这恢复使用散列sytax，例如 “path.to.your.site /＃/约”。它看起来不太好，但它应该做的工作。 Angular将使用您定义的前缀为任何相对链接添加前缀。

更好选项是修改您的服务器，以便您的其余api位于前缀下，例如/api/，然后对于不 /api/*的所有请求，返回index.html 页面。 Angular之后处理路由。这意味着你拥有两全其美 - 你的地址看起来更好，（它们没有＃），但刷新等工作正常。

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

1 个答案: