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