AngularJS UI路由器-更改URL而不重新加载状态

当前，我们的项目正在使用default $routeProvider，而我正在使用此“ hack”进行更改url而无需重新加载页面：

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

和在 controller

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

我想到的替换routeProvider用ui-router筑巢路线，但无法找到这ui-router。

有可能angular-ui-router吗？

我为什么需要这个？让我用一个例子来解释：
创建新类别的路线是在SAVE /category/new 之后clicking显示的success-alert，我想将路线更改/category/new为/caterogy/23（23-是存储在db中的新项目的id）

只需使用即可 $state.transitionTo 代替 $state.go 。内部 $state.go 调用， $state.transitionTo 但会自动将选项设置为 { location: true, inherit: true, relative: $state.$current, notify: true } 。您可以呼叫 $state.transitionTo 和设置 notify: false 。例如：

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

可以替换为

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

编辑：正如fracz建议的那样，它可以简单地是：

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

好了，解决了 :) Angular UI Router有这个新方法$ urlRouterProvider.deferIntercept（） 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();
  }]);

我认为目前该方法仅包含在Angular ui路由器的主版本中，该版本具有可选参数（顺便说一句，也不错）。需要从源代码克隆和构建它

grunt build

也可以通过以下方式从源代码访问这些文档：

grunt ngdocs

（它们已内置到/ site目录中）// README.MD中的更多信息

似乎还有另一种方法可以通过动态参数（我没有使用过）来做到这一点。对nateabele有很多功劳。

附带说明一下，这是Angular UI Router的$ stateProvider 中的可选参数，我将其与以上内容结合使用：

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

}]);

它的作用是即使缺少一个参数，也可以解决一个状态。SEO是一个目的，可读性是另一个目的。

在上面的示例中，我希望doorsSingle是必需的参数。目前尚不清楚如何定义它们。不过，它可以与多个可选参数一起使用，因此并不是真正的问题。讨论在这里https://github.com/angular-ui/ui-router/pull/1032#issuecomment-49196090

在花了很多时间解决这个问题之后，这就是我的工作

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

呼唤

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

仍会重新加载控制器。

为了避免这种情况，您必须将参数声明为dynamic：

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

然后，您甚至不需要notify，只需致电

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

足够了。Neato！

从文档中：

当dynamic为时true，更改参数值将不会导致进入/退出状态。解析将不会重新获取，也不会重新加载视图。

[...]

这对于在构建UI时很有用，在该UI中，当参数值发生更改时组件会自行更新。

此设置为我解决了以下问题：

• 从.../到更新网址时，不会两次调用训练控制器.../123
• 导航到其他状态时，不会再次调用训练控制器

状态配置

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

调用状态（从任何其他控制器）

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

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

培训负责人

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

如果您只需要更改url但可以阻止更改状态：

更改位置（如果要在历史记录中替换，请添加.replace）：

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

防止重定向到您的状态：

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

我这样做是在很早以前的版本：UI-router v0.2.10：

$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
      },
      'viewVoucher@home.reservationChart': {
        templateUrl: Url.resolveTemplateUrl('voucher/partial/viewVoucherContainer.html'),
        controller: 'viewVoucherCtrl',
        reloadOnSearch: false
      },
      'addEditVoucher@home.reservationChart': {
        templateUrl: Url.resolveTemplateUrl('voucher/partial/voucherContainer.html'),
        controller: 'voucherCtrl',
        reloadOnSearch: false
      }
    },
    reloadOnSearch: false
  })

试试这个

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

我认为您根本不需要ui-router。$ location服务可用的文档在第一段中说：“ ... $ location的更改反映在浏览器地址栏中。” 稍后继续说：“它不做什么？当浏览器URL更改时，它不会导致重新加载整个页面”。

因此，考虑到这一点，为什么不使用以下内容简单地更改$ location.path（因为该方法既是getter又是setter）：

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

该文件指出，该路径应该始终以正斜杠开始，但是这会增加它，如果它缺少。