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而不刷新所有內容？

回答

相關問題