AngularJS UI Router - durumu yeniden yüklemeden url'yi değiştirin

Şu anda projemiz varsayılan kullanıyor $routeProviderve urlsayfayı yeniden yüklemeden değiştirmek için bu "hack" i kullanıyorum :

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

ve controller

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

Ben değiştirilmesi düşünüyorum routeProviderile ui-routeriç içe rotalar için, ancak bu in bulamıyorum ui-router.

Mümkün mü - aynısını yap angular-ui-router?

Buna neden ihtiyacım var? Bir örnekle açıklayayım:
Yeni kategori yaratma rotası , KAYDET'ten /category/new sonra clickinggösteriliyor success-alertve rotayı /category/newşu şekilde değiştirmek istiyorum /caterogy/23(23 - db'de depolanan yeni öğenin kimliği)

$state.transitionTo Bunun yerine basitçe kullanabilirsiniz $state.go . dahili olarak $state.go arar, $state.transitionTo ancak seçenekleri otomatik olarak olarak ayarlar { location: true, inherit: true, relative: $state.$current, notify: true } . Arayabilir $state.transitionTo ve ayarlayabilirsiniz notify: false . Örneğin:

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

ile değiştirilebilir

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

Düzenleme: fracz tarafından önerildiği gibi basitçe şunlar olabilir:

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

Tamam, çözüldü :) Angular UI Router bu yeni yönteme sahip, $ urlRouterProvider.deferIntercept () https://github.com/angular-ui/ui-router/issues/64

temelde şuna geliyor:

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

Sanırım bu yöntem şu anda yalnızca açısal ui yönlendiricinin ana sürümüne dahil edildi, isteğe bağlı parametrelere sahip olan (ki bunlar da güzel, btw). Kaynaktan klonlanması ve oluşturulması gerekir.

grunt build

Dokümanlara kaynaktan da erişilebilir.

grunt ngdocs

(/ site dizinine yerleştirilirler) // README.MD'de daha fazla bilgi

Bunu yapmanın dinamik parametrelerle (kullanmadığım) başka bir yolu var gibi görünüyor . Nateabele'ye birçok kredi.

Bir yan not olarak, Angular UI Router'ın $ stateProvider'ında yukarıdakilerle kombinasyon halinde kullandığım isteğe bağlı parametreler :

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

}]);

bunun yaptığı şey, parametrelerden biri eksik olsa bile bir durumu çözmeye izin vermektir. SEO bir amaç, okunabilirlik başka bir amaçtır.

Yukarıdaki örnekte, doorsSingle'ın gerekli bir parametre olmasını istedim. Bunların nasıl tanımlanacağı belli değil. Birden fazla isteğe bağlı parametrede sorunsuz çalışır, bu yüzden gerçekten bir sorun değildir. Tartışma burada https://github.com/angular-ui/ui-router/pull/1032#issuecomment-49196090

Bu sorunla çok zaman geçirdikten sonra işte çalıştığım şey

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

çağrı

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

yine de denetleyiciyi yeniden yükleyecektir.

Bundan kaçınmak için parametreyi dinamik olarak tanımlamanız gerekir:

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

O zaman ihtiyacın bile yok notify, sadece arıyorsun

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

yeterli. Neato!

Gönderen belgeler :

Olduğunda dynamic, trueparametre değerinde yapılan değişiklikler duruma girilmesine / çıkılmasına neden olmaz. Çözümler yeniden getirilmeyecek ve görünümler yeniden yüklenmeyecek.

[...]

Bu, param değerleri değiştiğinde bileşenin kendini güncellediği UI oluşturmak için yararlı olabilir.

Bu kurulum benim için aşağıdaki sorunları çözdü:

• Dan url güncellerken eğitim kontrolörü iki kez çağrılmaz .../için.../123
• Eğitim denetleyicisi başka bir duruma geçerken tekrar çağrılmıyor

Durum yapılandırması

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

Durumları çağırmak (başka herhangi bir denetleyiciden)

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

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

Eğitim Kontrolörü

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

Yalnızca url'yi değiştirmeniz gerekiyor, ancak durumu değiştirmeyi engelliyorsanız:

Şununla konumu değiştirin (geçmişte değiştirmek istiyorsanız .replace ekleyin):

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

Eyaletinize yeniden yönlendirmeyi önleyin:

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

Bunu uzun zaman önce yaptım: UI-yönlendiricinin v0.2.10 sürümünde şöyle bir şey gibi:

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

Bunun gibi bir şey dene

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

Bunun için ui yönlendiriciye ihtiyacınız olduğunu sanmıyorum. $ Location hizmeti için mevcut dokümantasyon ilk paragrafta "... $ location'da yapılan değişiklikler tarayıcının adres çubuğuna yansıtılır." Daha sonra "Ne yapmaz? Tarayıcı URL'si değiştirildiğinde tam sayfanın yeniden yüklenmesine neden olmaz" demeye devam eder.

Öyleyse, bunu akılda tutarak, neden basitçe $ location.path'i (yöntem hem alıcı hem de ayarlayıcı olduğu için) aşağıdaki gibi bir şeyle değiştirmiyorsunuz:

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

Dokümantasyon notları yolu daima eğik çizgi ile başlaması gerektiğini, ancak eksik olursa bu ekleyecektir.