Bộ định tuyến UI AngularJS - thay đổi url mà không cần tải lại trạng thái

Hiện tại dự án của chúng tôi đang sử dụng mặc định $routeProvidervà tôi đang sử dụng "hack" này để thay đổi urlmà không cần tải lại trang:

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

và trong controller

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

Tôi đang nghĩ đến việc thay thế routeProviderbằng ui-routercác tuyến đường lồng nhau, nhưng không thể tìm thấy điều này trong ui-router.

Có thể - làm tương tự với angular-ui-router?

Tại sao tôi cần cái này? Hãy để tôi giải thích với một ví dụ:
Tuyến để tạo danh mục mới là /category/new sau khi clickingTIẾT KIỆM tôi hiển thị success-alertvà tôi muốn thay đổi tuyến /category/newthành /caterogy/23(23 - là id của mục mới được lưu trữ trong db)

Đơn giản là bạn có thể sử dụng $state.transitionTo thay vì $state.go . $state.go gọi $state.transitionTo nội bộ nhưng tự động đặt tùy chọn thành { location: true, inherit: true, relative: $state.$current, notify: true } . Bạn có thể gọi $state.transitionTo và thiết lập notify: false . Ví dụ:

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

có thể được thay thế bởi

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

Chỉnh sửa: Theo đề xuất của fracz, nó có thể chỉ đơn giản là:

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

Ok, đã giải quyết :) Bộ định tuyến UI góc có phương thức mới này, $ urlRouterProvider.deferIntercept () https://github.com/angular-ui/ui-router/issues/64

về cơ bản nó đi xuống này:

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

Tôi nghĩ rằng phương pháp này hiện đang chỉ bao gồm trong tổng thể phiên bản của router ui góc, là với các thông số tùy chọn (trong đó là tốt đẹp quá, btw). Nó cần được nhân bản và xây dựng từ nguồn với

grunt build

Các tài liệu cũng có thể truy cập được từ nguồn

grunt ngdocs

(chúng được tích hợp vào thư mục / site) // thêm thông tin trong README.MD

Dường như có một cách khác để làm điều này, bằng các tham số động (mà tôi chưa sử dụng). Nhiều tín dụng cho natablesele.

Là một sidenote, đây là các tham số tùy chọn trong $ stateProvider của Angular UI Router, mà tôi đã sử dụng kết hợp với ở trên:

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

}]);

những gì nó làm là cho phép giải quyết một trạng thái, ngay cả khi một trong các thông số bị thiếu. SEO là một mục đích, dễ đọc khác.

Trong ví dụ trên, tôi muốn cửa ra vào là một tham số bắt buộc. Không rõ làm thế nào để xác định những người. Nó hoạt động tốt với nhiều tham số tùy chọn, vì vậy không thực sự là một vấn đề. Cuộc thảo luận ở đây https://github.com/angular-ui/ui-router/pull/1032#issuecomment-49196090

Sau khi dành nhiều thời gian cho vấn đề này, đây là những gì tôi đã làm việc

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

Gọi điện thoại

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

vẫn sẽ tải lại bộ điều khiển.

Để tránh nó, bạn phải khai báo tham số là động:

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

Sau đó, bạn thậm chí không cần notify, chỉ cần gọi

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

đủ. Neato!

Từ tài liệu :

Khi dynamiccó true, thay đổi giá trị tham số sẽ không khiến trạng thái được nhập / thoát. Các độ phân giải sẽ không được tải lại, cũng như các khung nhìn sẽ được tải lại.

[...]

Điều này có thể hữu ích để xây dựng UI nơi thành phần tự cập nhật khi giá trị param thay đổi.

Thiết lập này đã giải quyết các vấn đề sau cho tôi:

• Bộ điều khiển đào tạo không được gọi hai lần khi cập nhật url từ .../đến.../123
• Bộ điều khiển đào tạo sẽ không được gọi lại khi điều hướng đến trạng thái khác

Cấu hình nhà nước

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

Gọi các trạng thái (từ bất kỳ bộ điều khiển nào khác)

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

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

Kiểm soát viên đào tạo

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

Nếu bạn chỉ cần thay đổi url nhưng ngăn trạng thái thay đổi:

Thay đổi vị trí bằng (thêm .replace nếu bạn muốn thay thế trong lịch sử):

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

Ngăn chặn chuyển hướng đến trạng thái của bạn:

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

tôi đã làm điều này nhưng từ lâu trong phiên bản: v0.2.10 của bộ định tuyến UI giống như thế này ::

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

Hãy thử một cái gì đó như thế này

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

Tôi không nghĩ bạn cần ui-router cho việc này. Tài liệu có sẵn cho dịch vụ định vị $ nói trong đoạn đầu tiên, "... thay đổi đối với vị trí $ được phản ánh vào thanh địa chỉ trình duyệt." Nó tiếp tục sau đó để nói, "Nó không làm gì? Nó không gây ra tải lại toàn bộ trang khi URL trình duyệt bị thay đổi."

Vì vậy, với ý nghĩ đó, tại sao không chỉ đơn giản là thay đổi $ location.path (vì phương thức vừa là getter vừa là setter) với nội dung như sau:

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

Các tài liệu ghi chú rằng con đường nên luôn luôn bắt đầu với một dấu gạch chéo, nhưng điều này sẽ thêm nó nếu nó mất tích.