javascript - sref - ui router angularjs template

Enrutador angular/UI: ¿cómo puedo actualizar la URL sin actualizar todo?

Question

Soy nuevo en Angular y en el enrutador ui. Cuando alguien selecciona un modelo y mi controlador realiza un método estándar SHOW, simplemente quiero actualizar el URL para incluir el ID del modelo sin refrescar la página y continuar con mi vista original. No estoy seguro de cómo hacer esto ...

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

Answer 1

En esencia, lo que quiere hacer es no poner el código de la ciudad en la vista de usuario y / o no usar una plantilla con esta vista. Como resultado, ninguno de los DOM cambiará, pero la URL sí lo hará. Esto se analiza con más detalle en Angular-ui.router: Actualizar URL sin actualizar la vista

Answer 2

Los fragmentos de código que ha utilizado están un poco alejados de la configuración correcta del ui-enrutador . Le sugiero que consulte esta aplicación de demostración: http://angular-ui.github.io/ui-router/sample/#/contacts/1 . Aquí podemos ver cómo se "arregla" la Lista, mientras que el Detalle se cambia sin ninguna actualización de página.

El código de este ejemplo se puede descargar aquí https://github.com/angular-ui/ui-router/tree/master/sample .

Lo que debería ayudar mucho a entender CÓMO (excepto el wiki ) fue este fragmento de código: state.js . Cargue la demostración, lea esta explicación comentada. Y ui-router tendrá sentido ...