使用 UI Router 进行分页时如何更改 URL？

Question

我有一个使用 Angular UI-Router 的 Angular JS 项目，效果很好，但我正在尝试实现 UI Bootstrap 分页指令，但无法制定正确的策略。

我有一个数据表，一次显示一页，并且我有分页指令显示正确数量的页面链接。当您单击一个链接时，它会获取新的页码并对 api 进行 Restangular 调用以获取新记录并将它们绑定到表。

这一切都很好，但很明显，当您翻阅数据时，URL 不会改变，因此用户无法使用浏览器的后退/前进按钮来浏览他们的历史记录。理想情况下，我想使用以下 URL：

/contacts
/contacts/page-2
/contacts/page-3

我还想在 URL 中包含排序，但这是另一个问题。

我可以实现这一点，但是通过在单击其中一个分页按钮时手动转换到新状态，但这会重新加载控制器及其所有内容，对服务器进行额外的 ajax 调用并产生丑陋的 un-样式化的内容，因为它重新创建了分页控件等。

理想情况下，我将能够更改 URL 并添加历史状态，但不会触发实际状态更改并为该视图重新加载/运行控制器。我不确定这是否可能，更不用说如何做到了。

有人有什么想法吗？

Answer 1

这很容易通过 $stateParams 实现

例如

$stateProvider
.state('contacts',{
 url: '/contacts',
 templateUrl: 'contacts.html'
}).state('contacts.paginated', {
    url: "/contacts/page-:pageNum",
    templateUrl: 'contacts.html',
    controller: function ($stateParams) {
        // If we got here from a url of /contacts/page-2
        expect($stateParams).toBe({pageNum: 2});
    }
})

不过，我会选择不同的分页方案 /contacts/page/1 或 /contacts?page=1 两者都可以通过 ui-router 轻松实现