AngularJS UI路由器 - 变更网址无需重新加载状态 [英] AngularJS UI Router - change url without reloading state

问题描述

目前我们的项目是使用默认的 $ routeProvider ，和我使用的这个黑客，改变网​​址而不需要刷新页面：

Currently our project is using default $routeProvider, and I am using this "hack", to change url without reloading 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;
}]);

和控制器

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

我想替换的 routeProvider 与 UI路由器筑巢路线，但不能在<$觉得这C $ C> UI路由器。

I am thinking of replacing routeProvider with ui-router for nesting routes, but cant find this in ui-router.

是否有可能？ - 做同样的角UI路由器

Is it possible - do the same with angular-ui-router?

为什么我需要这个？
让我用一个例子说明一下：结果
路线为创造新的类别是 /分类/新
在点击上保存我秀成功警戒，我想改变路线 /分类/新到 / caterogy / 23 （23 - 是存储在数据库的新项的ID）

Why do I need this? Let me explain with an example :
Route for creating new category is /category/new after clicking on SAVE I show success-alert and I want to change route /category/new to /caterogy/23 (23 - is id of new item stored in db)

推荐答案

确定，解决了 :)
角UI路由器有这种新方法，$ urlRouterProvider.deferIntercept（）
<一href=\"https://github.com/angular-ui/ui-router/issues/64\">https://github.com/angular-ui/ui-router/issues/64

基本上它归结为：

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();
  }]);

我觉得这个方法目前只包括在主版本UI角路由器，一个与可选参数（这是很好过，顺便说一句）。它需要被复制，从源代码建有

I think this method is currently only included in the master version of angular ui router, the one with optional parameters (which are nice too, btw). It needs to be cloned and built from source with

grunt build

该文档是从源头上访问以及通过

The docs are accessible from the source as well, through

grunt ngdocs

（它们会内置到/站点目录）//在README.MD更多信息

(they get built into the /site directory) // more info in README.MD

似乎有另一种方式来做到这一点，通过动态参数（我没用过）。
许多学分nateabele。

There seems to be another way to do this, by dynamic parameters (which I haven't used). Many credits to nateabele.

一点题外话，这里的可选参数在角UI路由器的$ stateProvider，这是我结合使用上述

As a sidenote, here are optional parameters in Angular UI Router's $stateProvider, which I used in combination with the above:

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'
    });

}]);

什么作用是它允许解决的状态下，即使PARAMS缺少一个。
SEO是一个目的，另一个可读性。

what that does is it allows to resolve a state, even if one of the params is missing. SEO is one purpose, readability another.

在上面的例子中，我想doorsSingle是必需的参数。目前尚不清楚如何定义的。它的工作原理与OK多个可选参数的，所以不是一个真正的问题。讨论的是这里的https://github.com/angular-ui/ui-router/pull/1032#issuecomment-49196090

In the example above, I wanted doorsSingle to be a required parameter. It is not clear how to define those. It works ok with multiple optional parameters though, so not really a problem. The discussion is here https://github.com/angular-ui/ui-router/pull/1032#issuecomment-49196090

这篇关于AngularJS UI路由器 - 变更网址无需重新加载状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！