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

IT技术 javascript angularjs angular-ui-router
2021-02-15 02:12:10

我是 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>
2个回答

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

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

这个代码片段应该有助于理解 HOW TO 维基除外state.js加载演示,通读此注释说明。并且ui-router会有意义...

@radim:这真的解决了最初的问题——即如何更新模型和 URL,但不刷新视图?这就是我在stackoverflow.com/questions/27467170/ 上重新提出的问题...
2021-05-03 02:12:10
我确定你已经看到了这个:egghead.io/lessons/angularjs-introduction-ui-router Radim 的建议很好。大多数 jsfiddles、plunkers 和文章已经过时了,虽然 ui-router 没有什么难点,但除非你找到正确的来源,否则需要一段时间才能意识到。
2021-05-13 02:12:10

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