Angular/UI-Router - 如何更新URL而不刷新所有内容？

我是Angular和ui路由器的新手。当某人选择模型并且我的控制器执行标准的SHOW方法时，我只想更新URL以包含模型的ID而不刷新页面，并继续使用我的原始视图。我不知道如何做到这一点？Angular/UI-Router - 如何更新URL而不刷新所有内容？

$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>

来源

2013-12-14 ac360

你使用的代码片段是有点远，从正确的UI路由器设置。我向你建议，查看这个演示应用程序：http://angular-ui.github.io/ui-router/sample/#/contacts/1。在这里，我们可以看到列表是“固定的”，而详细信息在没有任何页面刷新的情况下被更改。

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

我应该有很大的帮助，以了解如何（在wiki除外）是这样的代码片段：state.js。加载演示，阅读此评论说明。而ui-router将有意义...

来源

2013-12-14 08:20:36

更详细的讨论我确定你已经看到了这个：http://egghead.io/lessons/angularjs-introduction-ui-router Radim的建议是好的。大多数jsfiddles，plunkers和articles已经过时了，虽然ui-router没有什么困难，但是需要一段时间才能实现，除非你找到正确的源码。 – scalaGirl

@radim：这是否真的解决了原始问题 - 即如何更新模型和URL，但不刷新视图？这是我在http://stackoverflow.com/questions/27467170/angular-ui-router-update-url-without-view-refreshes –

实质上，你想要做的是而不是把城市代码放在UI视图和/或不要使用这个视图模板。因此，没有任何DOM会被更改，但URL会。这在Angular-ui.router: Update URL without view refresh

来源

2014-12-17 13:59:38

Angular/UI-Router - 如何更新URL而不刷新所有内容？

回答

相关问题