Angular/UI-Router - 如何在不刷新所有内容的情况下更新 URL？答案

【问题标题】：Angular/UI-Router - How Can I Update The URL Without Refreshing Everything?Angular/UI-Router - 如何在不刷新所有内容的情况下更新 URL？
【发布时间】：2014-01-01 22:48:12
【问题描述】：

我是 Angular 和 ui-router 的新手。当有人选择模型并且我的控制器执行标准 SHOW 方法时，我只想更新 URL 以包含模型的 ID 而无需刷新页面，并继续使用我的原始视图。我不知道该怎么做...

$stateProvider
        .state('citylist', {
          url: "/",
          templateUrl: "views/index.html"
        })
        .state('cityshow', {
          url: "/city/:id",
          templateUrl: "views/index.html"
        })

angular.module('app.system').controller('IndexController', ['$scope', 'Global', 'Cities', '$stateParams', '$location', function ($scope, Cities, $stateParams, $location) {

    $scope.loadTown = function(id) {
        Cities.get({id: id }, function(city) {
             $scope.city = city
             // Change URL
             // Do things within the same view...
        });
    };
});

<button ng-click="loadTown(123456)">Chicago</button>

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

您使用的代码 sn-ps 与正确的 ui-router 设置有点远。我建议你，检查这个演示应用程序：http://angular-ui.github.io/ui-router/sample/#/contacts/1。在这里，我们可以看到 List 是如何“固定”的，而 Detail 是如何在没有任何页面刷新的情况下更改的。

这个例子的代码在这里下载https://github.com/angular-ui/ui-router/tree/master/sample。

对于理解如何（wiki 除外） 应该有很大帮助的是这段代码 sn-p：state.js。加载演示，通读此注释说明。并且ui-router 会有意义...

【讨论】：

我相信你已经看到了：egghead.io/lessons/angularjs-introduction-ui-router Radim 的建议很好。大多数 jsfiddles、plunkers 和文章已经过时了，虽然 ui-router 并没有什么难的地方，但除非找到正确的来源，否则需要一段时间才能意识到。
@radim：这真的解决了最初的问题——即如何更新模型和 URL，但不刷新视图？这是我在stackoverflow.com/questions/27467170/… 重新提出的问题

【解决方案2】：

本质上，您想要做的是不将城市代码放在 ui 视图中和/或不使用此视图的模板。结果，没有任何 DOM 会被更改，但 URL 会。这在Angular-ui.router: Update URL without view refresh 上进行了更全面的讨论

【讨论】：