Angular / UI-Router – Como posso atualizar o URL sem atualizar tudo?

Sou novo no Angular e no ui-roteador. Quando alguém seleciona um modelo e meu controlador executa um método SHOW padrão, eu simplesmente quero atualizar o URL para include o ID do modelo sem atualizar a página e continuar com a visualização original. Eu não sei como fazer isso …

$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... }); }; });  

Os trechos de código que você usou estão um pouco longe das configurações corretas do ui-roteador . Gostaria de sugerir a você, verifique este aplicativo de demonstração: http://angular-ui.github.io/ui-router/sample/#/contacts/1 . Aqui podemos ver como a lista é “fixa” enquanto o detalhe é alterado sem qualquer atualização de página.

O código deste exemplo faz o download aqui https://github.com/angular-ui/ui-router/tree/master/sample .

O que deve ajudar muito a entender COMO (exceto o wiki ) foi este trecho de código: state.js . Carregue a demonstração, leia esta explicação comentada. E o ui-router fará sentido …

Em essência, o que você quer fazer é não colocar o código da cidade na visualização da interface do usuário e / ou não usar um modelo com essa visualização. Como resultado, nenhum dos DOM será alterado, mas o URL será. Isso é discutido mais detalhadamente no Angular-ui.router: Atualizar URL sem atualizar a visualização