AngularJS UI Router - ubah url tanpa memuat ulang status

Saat ini proyek kami menggunakan default $routeProvider, dan saya menggunakan "retasan" ini, untuk berubah urltanpa memuat ulang halaman:

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

dan masuk controller

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

Saya sedang berpikir untuk mengganti routeProviderdengan ui-routeruntuk rute bersarang, tetapi tidak dapat menemukan di ini ui-router.

Apakah mungkin - melakukan hal yang sama angular-ui-router?

Mengapa saya membutuhkan ini? Izinkan saya menjelaskan dengan sebuah contoh:
Rute untuk membuat kategori baru /category/new setelah clickingpada SAVE I show success-alertdan saya ingin mengubah rute /category/newke /caterogy/23(23 - adalah id dari item baru yang disimpan dalam db)

Cukup Anda bisa menggunakan $state.transitionTo bukan $state.go . $state.go panggilan secara $state.transitionTo internal tetapi secara otomatis mengatur opsi { location: true, inherit: true, relative: $state.$current, notify: true } . Anda dapat menelepon $state.transitionTo dan mengatur notify: false . Sebagai contoh:

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

dapat digantikan oleh

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

Sunting: Seperti yang disarankan oleh fracz itu bisa saja:

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

Oke, terpecahkan :) Router UI Sudut memiliki metode baru ini, $ urlRouterProvider.deferIntercept () https://github.com/angular-ui/ui-router/issues/64

pada dasarnya turun ke ini:

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

Saya pikir metode ini saat ini hanya termasuk dalam versi master dari router ui sudut, yang dengan parameter opsional (yang bagus juga, btw). Itu perlu dikloning dan dibangun dari sumber dengan

grunt build

Dokumen juga dapat diakses dari sumbernya, melalui

grunt ngdocs

(mereka dibangun ke direktori / situs) // info lebih lanjut di README.MD

Tampaknya ada cara lain untuk melakukan ini, dengan parameter dinamis (yang saya belum pernah gunakan). Banyak kredit untuk nateabele.

Sebagai sidenote, berikut adalah parameter opsional di $ stateProvider Angular UI Router, yang saya gunakan dalam kombinasi dengan yang di atas:

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

}]);

apa yang dilakukan adalah memungkinkan untuk menyelesaikan suatu keadaan, bahkan jika salah satu params hilang. SEO adalah satu tujuan, keterbacaan yang lain.

Dalam contoh di atas, saya ingin doorsSingle menjadi parameter yang diperlukan. Tidak jelas bagaimana mendefinisikannya. Ini berfungsi ok dengan beberapa parameter opsional, jadi tidak terlalu masalah. Diskusi ada di sini https://github.com/angular-ui/ui-router/pull/1032#issuecomment-49196090

Setelah menghabiskan banyak waktu dengan masalah ini, Inilah yang saya dapatkan

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

Panggilan

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

masih akan memuat ulang controller.

Untuk menghindarinya, Anda harus mendeklarasikan parameter sebagai dinamis:

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

Maka Anda bahkan tidak perlu notify, hanya menelepon

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

cukup. Neato!

Dari dokumentasi :

Saat dynamicini true, perubahan nilai parameter tidak akan menyebabkan status dimasukkan / keluar. Resolusi tidak akan diambil kembali, juga tampilan tidak akan dimuat ulang.

[...]

Ini berguna untuk membangun UI tempat komponen memperbarui sendiri ketika nilai param berubah.

Pengaturan ini memecahkan masalah berikut untuk saya:

• Kontroler pelatihan tidak dipanggil dua kali saat memperbarui url dari .../ke.../123
• Kontroler pelatihan tidak dipanggil lagi saat bernavigasi ke negara lain

Konfigurasi keadaan

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

Meminta status (dari pengontrol lain)

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

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

Pengendali Pelatihan

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

Jika Anda hanya perlu mengubah url tetapi mencegah perubahan status:

Ubah lokasi dengan (tambahkan. Ganti jika Anda ingin mengganti dalam riwayat):

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

Cegah pengalihan ke negara Anda:

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

saya melakukan ini tetapi dahulu di versi: v0.2.10 UI-router seperti ini ::

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

Coba sesuatu seperti ini

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

Saya tidak berpikir Anda perlu ui-router sama sekali untuk ini. Dokumentasi yang tersedia untuk layanan $ location mengatakan pada paragraf pertama, "... perubahan ke $ location dicerminkan ke dalam bilah alamat browser." Kemudian berlanjut untuk berkata, "Apa yang tidak dilakukannya? Itu tidak menyebabkan satu halaman penuh dimuat kembali ketika URL browser diubah."

Jadi, dengan itu dalam pikiran, mengapa tidak hanya mengubah $ location.path (karena metode ini adalah pengambil dan penyetel) dengan sesuatu seperti berikut:

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

The dokumentasi catatan bahwa jalan harus selalu dimulai dengan garis miring, tapi ini akan menambahkannya jika itu hilang.