Soru Yeniden oluşturma görünümü olmadan Angular JS'de URL güncelleniyor


AngularJS'de bir gösterge paneli sistemi yapıyorum ve URL'yi kullanarak ayarlamaya başladım. $location.path

Kontrol panelimizde bir sürü widget var. Her biri üzerine tıkladığınızda daha büyük bir maksimum görünüm gösterir. Kullanıcıların, en üst düzeye çıkarılmış bir widget ile bir gösterge panosuna bağlanmasına izin vermek için derin bağlantı kurmaya çalışıyoruz.

Şu anda benzeyen 2 rotamız var. /dashboard/:dashboardId ve /dashboard/:dashboardId/:maximizedWidgetId

Bir kullanıcı bir widget’ı en üst düzeye çıkardığında, URL’yi $location.pathAncak bu, görünümün yeniden oluşturulmasına neden oluyor. Tüm verilere sahip olduğumuzdan, tüm görünümü yeniden yüklemek istemiyoruz, sadece URL’yi güncellemek istiyoruz. Görünümün yeniden oluşturulmasına neden olmadan URL'yi ayarlamanın bir yolu var mı?

HTML5Mode ayarlandı true.


76
2017-08-20 14:03


Menşei


Verilerinizin istemci tarafında rota değişikliklerinden korunmasını istiyorsanız, neden bir hizmete itmiyorsunuz? - Riko


Cevaplar:


Aslında, bir URL'yi her değiştirdiğinizde bir görünüm oluşturulur. $ RouteProvider'ın Açısal olarak nasıl çalıştığını biliyorsunuz ama siz maximizeWidgetId Bir görünümü yeniden oluşturmayan bir sorgulama aracı olarak.

App.config(function($routeProvider) {
  $routeProvider.when('/dashboard/:dashboardId', {reloadOnSearch: false});
});

En üst düzeye çıkarmak için bir widget'ı tıkladığınızda:

<a href="#/dashboard/1?maximizeWidgetId=1">Maximum This Widget</a>
or
$location.search('maximizeWidgetId', 1);

Adres çubuğundaki URL, http://app.com/dashboard/1?maximizeWidgetId=1

URL'de arama değiştiğinde bile izleyebilirsiniz (bir widget'dan diğerine)

$scope.$on('$routeUpdate', function(scope, next, current) {
   // Minimize the current widget and maximize the new one
});

125
2017-08-31 18:32



Eğer cevap kabul edilirse, hiçbir ": param" şeyleri olmadan ayrı bir soru yaratacağım. Sadece düz aptal soru: nasıl yeniden görüntülemez. - OZ_
bence açısal ui-yönlendirici Bu durumda bariz bir seçim olacak. - codef0rmer
Kullanıyorum $routeUpdate Etkinlik. Bence $routeChangeStart Başka bir yere taşınırken tetiklenir. - lucassp
@lucassp: Oh Yeah. Cevabı güncellememe izin ver. - codef0rmer
@ codef0rmer, bu cevabı bir kereden fazla buldum. Teşekkürler! Büyük cevap, hala tüm bu zamandan sonra! - frosty


$ RouteProvider'ın reloadOnSearch özelliğini false olarak ayarlayabilirsiniz.

Olası yinelenen soru: AngularJS'de denetleyiciyi yeniden yüklemeden bir yolu değiştirebilir misiniz?

Saygılarımızla


8
2017-08-20 14:44



Bu bir kopyası gibi görünüyor. Ne yazık ki, aynı soruna sahip gibi görünüyor, bir URL değişkeninin parçası olduğu sürece, bir sorgu değişkeni değil, yenilenir. - Ian Muir
Hayır, kopya değil. - OZ_
Bağlantılı soru, denetleyiciyi yeniden yüklememeyle ilgili olduğundan ve bu, şablonu yeniden yüklememekle ilgili olduğundan, bu bir kopya değildir. Bağlantılı sorudaki çözüm, görünümün yeniden yüklenmesini sağlayacaktır. - Lajos Meszaros


Denetleyicileri yeniden doldurmadan tam yolun () değiştirmesi gerekenler için

İşte eklenti: https://github.com/anglibs/angular-location-update

Kullanımı:

$location.update_path('/notes/1');

6
2017-08-12 11:36



teşekkürler, işler. Ama belki orijinal $ yerini uzatmamalısınız? - rofrol


Angular UI kullanıyoruz Yönlendirici Benzer senaryo için yerleşik yollar yerine. Denetleyiciyi yeniden örneklendirmek ve tüm görünümü yeniden oluşturmak görünmüyor.


3
2017-08-31 18:08



Denedim ve rota değişikliği ile ilgili görüşleri yeniden oluşturuyorum. - OZ_
Kullanmayı denediniz mi $state.transitionTo() yerine $location.path()? - DreamSonic
$ Location.path () 'ı hiç değiştirmem, nerede yazmalıyım $state.transitionTo() sonra? - OZ_
Quote: "Bir kullanıcı bir widget'ı en üst düzeye çıkardığında, url'yi location.path kullanarak güncelleriz, ancak bu, görünümün yeniden oluşturulmasına neden oluyor." Yolu değiştirmek yerine, aramalısın $state.transitionTo()sırayla url hash güncelleyecektir. - DreamSonic
Buradaki fikir, iki iç içe geçmiş durumunuz olmalıdır: bir tanesi gösterge tablonuz için ve bir tanesi de en fazla widget'ınız için. Ana durumdan alt öğeye geçtiğinizde, ana görünüm değil, yalnızca alt görünüm yeniden görüntülenir. - DreamSonic


Bunun eski bir soru olduğunu anlıyorum, ama cevabı bulmak için iyi bir gün ve buçuk beni aldığından beri, işte burada.

Yolunuzu sorgu dizelerine dönüştürmenize gerek yoktur Eğer kullanırsan açısal ui-yönlendirici.

Şu an itibariyle bir hata olarak kabul edilebilir, ayar reloadOnSearch: false Bir durumda, görünümü yeniden yüklemeden rotayı değiştirebilir. GitHub kullanıcısı lmessinger, bir demo sunacak kadar nazikti. Bağlantıyı yukarıda bağlantısı verilen yorumundan bulabilirsiniz.

Temel olarak yapmanız gereken tek şey:

  1. kullanım ui-router yerine ngRoute
  2. Eyaletlerinizde, dilediğinizleri ilan edin reloadOnSearch: false

Uygulamamda, aşağıdaki gibi bir durum kullanarak başka bir kategoriye ulaşabileceğiniz bir kategori girişi görünümüm var:

$stateProvider.state('articles.list', {
  url: '{categorySlug}',
    templateUrl: 'partials/article-list.html',
    controller: 'ArticleListCtrl',
    reloadOnSearch: false
  });

Bu kadar. Bu yardımcı olur umarım!


3
2018-04-04 12:49





Nasıl uygulandım:
(çözümüm çoğunlukla alt parçaları değil, tüm güzergahı değiştirmeniz gerektiğinde) 

Menü (menuPage) içeren bir sayfam var ve navigasyonda veriler temizlenmemeli (her sayfada çok fazla giriş var ve eğer veriler yanlışlıkla kaybolursa kullanıcı çok mutsuz olacak).

  1. $ routeProvider'ı kapatın
  2. mainPage denetleyicisinde, özel yönerge özniteliğine sahip iki div ekleyin - her yönerge yalnızca 'templateUrl' ve 'scope: true' içeriyor

     <div ng-show="tab=='tab_name'" data-tab_name-page></div>
    
  3. mainPage denetleyicisi, yönlendirmeyi simüle etmek için satırlar içerir:

    if (!$scope.tab && $location.path()) {
        $scope.tab = $location.path().substr(1);
    }
    $scope.setTab = function(tab) {
        $scope.tab = tab;
        $location.path('/'+tab);
    };
    

Bu kadar. Her sayfa için ayrı bir yönergeye sahip olmak biraz çirkin, ancak direktifte dinamik templateUrl (işlev olarak) kullanımı, sayfanın yeniden oluşturulmasını (ve girdi verilerinin kaybedilmesini) kışkırtır.


2
2017-09-04 13:04





Sorunuzu doğru anladıysam,

  1. Kullanıcı / dashboard /: dashboardId olduğunda widget'ı en üst düzeye çıkarın ve widget'ı en üst düzeye çıkarır.
  2. Kullanıcının / dashboard /: dashboardId /: maximizedWidgetId öğesine geri dönme yeteneğine sahip olmasını ve yine de widget'ı en üst düzeye çıkarmış olmasını istersiniz.

RouterConfig'te sadece ilk rotayı yapılandırabilir ve kullanabilirsiniz. RouteParams En üst düzeye çıkarılmış küçük parçacığın, bu yapılandırılmış yolun denetleyicisindeki param içinde geçip geçmediğini ve param olarak geçirilenin en üst düzeye çıkarıldığını belirlemek. Kullanıcı ilk kez en üst düzeye çıkarsa, URL'yi bu maksimum görüntülemeye UI'daki maximizedWidgetId ile paylaşın.

Yolu güncelleştirmek için $ konumu (yerel konum nesnesi üzerinde sadece bir sarmalayıcı) kullandığınız sürece görünümü yenileyecektir.


0
2017-08-31 19:37



Sadece $ konumu değil, görünümü yenileyecek. ng-include da, $ konumu değiştirmeden bile olacaktır. - OZ_
@OZ_ ngInclude önermedim çünkü bu sadece bir görünüm içinde bir durum değişikliği. Ben sadece bir olasılıkla ng-eğer rotaParams anlayabilen bir fonksiyon ile ilişkili olurdu gibi bir şey düşündüren - Sivakumar Kailasam


Kullanmak için bir fikrim var

window.history.replaceState ('Object', 'Title', '/ new-url');

Bunu yaparsanız ve bir sindirim döngüsü gerçekleşirse, şeyleri tamamen karıştırır. Ancak, bunu, açısal olarak beklediği doğru URL'ye geri yüklerseniz tamamdır. Yani teoride, açtığı doğru url'yi, sindirim yangınlarını bilmeden önce bekler ve sıfırlayabilirsiniz.

Bunu test etmedim bile.


0
2018-02-21 16:42





Aşağıdaki kod, yönlendirme olmaksızın URL'yi değiştirmenize izin verir: http:? // localhost / # / 691 foo bar blabla

for(var i=0;i<=1000;i++) $routeProvider.when('/'+i, {templateUrl: "tabPages/"+i+".html",reloadOnSearch: false});

Ama değiştiğinde http: // localhost / # / 692, yönlendirileceksiniz.


-2
2018-01-25 21:33



Burada başka bir cevap eklemenin nedenini anlamıyorum. - gsamaras
tarihine bir not. - abc