javascript Angular/UI-Router - 如何在不刷新所有内容的情况下更新 URL？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20578840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular/UI-Router - How Can I Update The URL Without Refreshing Everything?
提问by ac360
I'm new to both Angular and the ui-router. When someone selects a model and my controller performs a standard SHOW method, I simply want to update the URL to include the model's ID without refreshing the page, and continue on with my original view. I'm not sure how to do this...
我是 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>
采纳答案by Radim K?hler
The code snippets you've used are a bit far from the correct ui-routersettings. I would suggest to you, check this demo application: http://angular-ui.github.io/ui-router/sample/#/contacts/1. Here we can see how the Listis "fixed" while Detailis changed without any page refresh.
您使用的代码片段与正确的ui-router设置相差甚远。我建议你，检查这个演示应用程序：http: //angular-ui.github.io/ui-router/sample/#/contacts/1。在这里我们可以看到List是如何“固定”的，而Detail是如何在没有任何页面刷新的情况下更改的。
The code of this example download here https://github.com/angular-ui/ui-router/tree/master/sample.
这个例子的代码在这里下载https://github.com/angular-ui/ui-router/tree/master/sample。
What should help a lot to understand HOW TO (except the wiki)was this code snippet: state.js. Load the demo, read through this commented explanation. And ui-routerwill make sense...
这个代码片段应该有助于理解 HOW TO （维基除外）：state.js。加载演示，通读此注释说明。并且ui-router会有意义...
回答by Simon H
In essence, what you want to do is notto put the city code in the ui-view and/or not to use a template with this view. As a result, none of the DOM will get changed but the URL will. This is discussed more fully on Angular-ui.router: Update URL without view refresh
本质上，您想要做的不是将城市代码放在 ui-view 中和/或不要在此视图中使用模板。结果，没有任何 DOM 会发生变化，但 URL 会发生变化。这在Angular-ui.router: Update URL without view refresh上有更全面的讨论
