AngularJS UI Router - changer l'URL sans recharger l'état

Actuellement, notre projet utilise par défaut $routeProvider, et j'utilise ce "hack", pour changer urlsans recharger la page:

services.service('$locationEx', ['$location', '$route', '$rootScope', function($location, $route, $rootScope) {
    $location.skipReload = function () {
        var lastRoute = $route.current;
        var un = $rootScope.$on('$locationChangeSuccess', function () {
            $route.current = lastRoute;
            un();
        });
        return $location;
    };
    return $location;
}]);

et en controller

$locationEx.skipReload().path("/category/" + $scope.model.id).replace();

Je pense remplacer routeProviderpar ui-routerdes itinéraires de nidification, mais je ne trouve pas cela dans ui-router.

Est-ce possible - faire la même chose avec angular-ui-router?

Pourquoi ai-je besoin de ça? Permettez-moi de vous expliquer avec un exemple: la
route pour créer une nouvelle catégorie est /category/new après clickingsur SAVE je montre success-alertet je veux changer la route /category/newen /caterogy/23(23 - est l'id du nouvel élément stocké dans la base de données)

Vous pouvez simplement utiliser à la $state.transitionTo place de $state.go . $state.go appelle en $state.transitionTo interne mais définit automatiquement les options sur { location: true, inherit: true, relative: $state.$current, notify: true } . Vous pouvez appeler $state.transitionTo et régler notify: false . Par exemple:

$state.go('.detail', {id: newId}) 

peut être remplacé par

$state.transitionTo('.detail', {id: newId}, {
    location: true,
    inherit: true,
    relative: $state.$current,
    notify: false
})

Edit: Comme suggéré par fracz, cela peut simplement être:

$state.go('.detail', {id: newId}, {notify: false}) 

Ok, résolu :) Angular UI Router a cette nouvelle méthode, $ urlRouterProvider.deferIntercept () https://github.com/angular-ui/ui-router/issues/64

en gros, cela se résume à ceci:

angular.module('myApp', [ui.router])
  .config(['$urlRouterProvider', function ($urlRouterProvider) {
    $urlRouterProvider.deferIntercept();
  }])
  // then define the interception
  .run(['$rootScope', '$urlRouter', '$location', '$state', function ($rootScope, $urlRouter, $location, $state) {
    $rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) {
      // Prevent $urlRouter's default handler from firing
      e.preventDefault();

      /** 
       * provide conditions on when to 
       * sync change in $location.path() with state reload.
       * I use $location and $state as examples, but
       * You can do any logic
       * before syncing OR stop syncing all together.
       */

      if ($state.current.name !== 'main.exampleState' || newUrl === 'http://some.url' || oldUrl !=='https://another.url') {
        // your stuff
        $urlRouter.sync();
      } else {
        // don't sync
      }
    });
    // Configures $urlRouter's listener *after* your custom listener
    $urlRouter.listen();
  }]);

Je pense que cette méthode n'est actuellement inclus dans le maître version du routeur angulaire ui, celui avec des paramètres facultatifs (qui sont bien aussi, d' ailleurs). Il doit être cloné et construit à partir de la source avec

grunt build

Les documents sont également accessibles depuis la source, via

grunt ngdocs

(ils sont intégrés dans le répertoire / site) // plus d'informations dans README.MD

Il semble y avoir une autre façon de faire cela, par des paramètres dynamiques (que je n'ai pas utilisés). De nombreux crédits à nateabele.

En guise de remarque, voici les paramètres facultatifs dans $ stateProvider de Angular UI Router, que j'ai utilisés en combinaison avec ce qui précède:

angular.module('myApp').config(['$stateProvider', function ($stateProvider) {    

  $stateProvider
    .state('main.doorsList', {
      url: 'doors',
      controller: DoorsListCtrl,
      resolve: DoorsListCtrl.resolve,
      templateUrl: '/modules/doors/doors-list.html'
    })
    .state('main.doorsSingle', {
      url: 'doors/:doorsSingle/:doorsDetail',
      params: {
        // as of today, it was unclear how to define a required parameter (more below)
        doorsSingle: {value: null},
        doorsDetail: {value: null}
      },
      controller: DoorsSingleCtrl,
      resolve: DoorsSingleCtrl.resolve,
      templateUrl: '/modules/doors/doors-single.html'
    });

}]);

cela permet de résoudre un état, même si l'un des paramètres est manquant. Le référencement est un objectif, la lisibilité en est un autre.

Dans l'exemple ci-dessus, je voulais que doorSingle soit un paramètre obligatoire. On ne sait pas comment les définir. Cela fonctionne bien avec plusieurs paramètres optionnels, donc pas vraiment de problème. La discussion est ici https://github.com/angular-ui/ui-router/pull/1032#issuecomment-49196090

Après avoir passé beaucoup de temps avec ce problème, voici ce que j'ai travaillé

$state.go('stateName',params,{
    // prevent the events onStart and onSuccess from firing
    notify:false,
    // prevent reload of the current state
    reload:false, 
    // replace the last record when changing the params so you don't hit the back button and get old params
    location:'replace', 
    // inherit the current params on the url
    inherit:true
});

Appel

$state.go($state.current, {myParam: newValue}, {notify: false});

rechargera toujours le contrôleur.

Pour éviter cela, vous devez déclarer le paramètre comme dynamique:

$stateProvider.state({
    name: 'myState',
    url: '/my_state?myParam',
    params: {
        myParam: {
          dynamic: true,
        }
    },
    ...
});

Alors tu n'as même pas besoin d' notifyappeler

$state.go($state.current, {myParam: newValue})

suffit. Neato!

De la documentation :

Quand dynamicest-cetrue , les modifications de la valeur du paramètre n'entraîneront pas l'entrée / la sortie de l'état. Les résolutions ne seront pas récupérées à nouveau et les vues ne seront pas rechargées.

[...]

Cela peut être utile pour créer une interface utilisateur dans laquelle le composant se met à jour lorsque les valeurs des paramètres changent.

Cette configuration a résolu les problèmes suivants pour moi:

• Le contrôleur d'entraînement n'est pas appelé deux fois lors de la mise à jour de l'URL de .../à.../123
• Le contrôleur d'entraînement n'est plus appelé lors de la navigation vers un autre état

Configuration de l'état

state('training', {
    abstract: true,
    url: '/training',
    templateUrl: 'partials/training.html',
    controller: 'TrainingController'
}).
state('training.edit', {
    url: '/:trainingId'
}).
state('training.new', {
    url: '/{trainingId}',
    // Optional Parameter
    params: {
        trainingId: null
    }
})

Appel des états (depuis n'importe quel autre contrôleur)

$scope.editTraining = function (training) {
    $state.go('training.edit', { trainingId: training.id });
};

$scope.newTraining = function () {
    $state.go('training.new', { });
};

Contrôleur de formation

var newTraining;

if (!!!$state.params.trainingId) {

    // new      

    newTraining = // create new training ...

    // Update the URL without reloading the controller
    $state.go('training.edit',
        {
            trainingId : newTraining.id
        },
        {
            location: 'replace', //  update url and replace
            inherit: false,
            notify: false
        });     

} else {

    // edit

    // load existing training ...
}   

Si vous avez seulement besoin de modifier l'URL mais que vous évitez le changement d'état:

Changez d'emplacement avec (ajoutez .replace si vous souhaitez remplacer dans l'historique):

this.$location.path([Your path]).replace();

Empêcher la redirection vers votre état:

$transitions.onBefore({}, function($transition$) {
 if ($transition$.$to().name === '[state name]') {
   return false;
 }
});

je l'ai fait mais il y a longtemps dans la version: v0.2.10 de UI-router comme quelque chose comme ceci:

$stateProvider
  .state(
    'home', {
      url: '/home',
      views: {
        '': {
          templateUrl: Url.resolveTemplateUrl('shared/partial/main.html'),
          controller: 'mainCtrl'
        },
      }
    })
  .state('home.login', {
    url: '/login',
    templateUrl: Url.resolveTemplateUrl('authentication/partial/login.html'),
    controller: 'authenticationCtrl'
  })
  .state('home.logout', {
    url: '/logout/:state',
    controller: 'authenticationCtrl'
  })
  .state('home.reservationChart', {
    url: '/reservations/?vw',
    views: {
      '': {
        templateUrl: Url.resolveTemplateUrl('reservationChart/partial/reservationChartContainer.html'),
        controller: 'reservationChartCtrl',
        reloadOnSearch: false
      },
      '[email protected]': {
        templateUrl: Url.resolveTemplateUrl('voucher/partial/viewVoucherContainer.html'),
        controller: 'viewVoucherCtrl',
        reloadOnSearch: false
      },
      '[email protected]': {
        templateUrl: Url.resolveTemplateUrl('voucher/partial/voucherContainer.html'),
        controller: 'voucherCtrl',
        reloadOnSearch: false
      }
    },
    reloadOnSearch: false
  })

Essayez quelque chose comme ça

$state.go($state.$current.name, {... $state.params, 'key': newValue}, {notify: false})

Je ne pense pas que vous ayez besoin du tout d'un ui-router pour cela. La documentation disponible pour le service $ location indique dans le premier paragraphe, "... les modifications apportées à $ location sont reflétées dans la barre d'adresse du navigateur." Il continue plus tard en disant: "Qu'est-ce que cela ne fait pas? Cela ne provoque pas un rechargement complet de la page lorsque l'URL du navigateur est modifiée."

Donc, dans cet esprit, pourquoi ne pas simplement changer le $ location.path (car la méthode est à la fois un getter et un setter) avec quelque chose comme ce qui suit:

var newPath = IdFromService;
$location.path(newPath);

La documentation note que le chemin doit toujours commencer par une barre oblique, mais cela l'ajoutera s'il est manquant.