Angular.js: Opsi pada $location untuk mengizinkan perubahan hash/path tanpa memuat ulang rute

+1, memiliki masalah yang sama.

@cgross Karena layanan $location menggunakan metode chaining gaya JQuery, dan semua perintah ditunda hingga $digest, saya sarankan menambahkan metode chaining baru, misalnya reload(boolean):

$location.path("/thing/"+thing.id).replace().reload(false)

PS Apakah ini Chris Gross yang memulai proyek Eclipse Nebula?

Ya :)

+1 :+1:

+1

Saat ini, kami menggunakan peretasan kotor untuk mengatasi masalah ini.

    $scope.$on('$locationChangeSuccess', function(event) {

        // Want to prevent re-loading when going from /dataEntry/1 to some other dataEntry path
        if ($route && $route.current && $route.current.$route.templateUrl.indexOf('dataEntry') > 0) {
            $route.current = lastRoute; //Does the actual prevention of routing
        }
});

+1

+1

+1

+1

+1

Inilah upaya saya untuk memperbaikinya dengan mendukung preventDefault() untuk $routeChangeStart . Apa pendapatmu tentang itu?
Komit: https://github.com/redhotsly/angular.js/commit/f8ac46e6ac9d76cf855077d21b68b4c2c8043db1

Saya telah bekerja dengan pendekatan @qualidafial selama beberapa hari dan sekarang PR sudah siap. Saya telah membuat metode notify yang memungkinkan melewatkan pemberitahuan perubahan lokasi untuk satu kali. Ini harus menghindari memicu perubahan rute atau memuat ulang.

Ini tidak menyentuh sistem perutean, jadi Anda tidak perlu mengubah definisi rute Anda. Ini akan tetap berfungsi bahkan jika Anda menggunakan ui-router alih-alih sistem perutean AngularJS standar.

Contoh: $location.path('/client/2').replace().notify(false);

Saya juga telah mengerjakan beberapa tes dan bit dokumentasi.

+1

lain +1
Sudah menggunakan permintaan tarik

+1

+1

Sayangnya PR https://github.com/angular/angular.js/pull/2398 telah ditolak oleh tim Angular karena melewatkan pemberitahuan dapat menyebabkan inkonsistensi antara URL aktual dan rute saat ini. Ada penjelasan panjang di akhir diskusi.

Saya tidak memerlukan fitur ini di salah satu proyek saya, tetapi saya akan menyimpannya di repositori saya sehingga dapat digabungkan jika Anda mau. Beri tahu saya jika itu tidak sinkron dengan cabang master sehingga saya dapat mengubah basis perubahan. Terima kasih!

+1

+1, butuh ini :(

+1

Sunting: pendekatan yang lebih baik di sini: https://github.com/angular/angular.js/issues/1699#issuecomment -22511464

Saya telah membuat pabrik yang dapat digunakan kembali untuk melewati ini (berdasarkan ide dari @shahmirn):

/**
 * HACK Do not reload the current template if it is not needed.
 *
 * See AngularJS: Change hash and route without completely reloading controller http://stackoverflow.com/questions/12115259/angularjs-change-hash-and-route-without-completely-reloading-controller
 */
app.factory('DoNotReloadCurrentTemplate', ['$route', function($route) {
  return function(scope) {
    var lastRoute = $route.current;
    scope.$on('$locationChangeSuccess', function() {
      if (lastRoute.$$route.templateUrl === $route.current.$$route.templateUrl) {
        console.log('DoNotReloadCurrentTemplate not reloading template: ' + $route.current.$$route.templateUrl);
        $route.current = lastRoute;
      }
    });
  };
}]);

Cara Penggunaan:

app.controller('MyCtrl',
  ['$scope', 'DoNotReloadCurrentTemplate',
  function($scope, DoNotReloadCurrentTemplate) {

  DoNotReloadCurrentTemplate($scope);
}]);

Sumber: http://stackoverflow.com/a/16496112/990356

Jika Anda menyetel "reloadOnSearch" ke false pada rute, maka tampaknya itu akan memperbaiki perubahan hash yang memuat ulang seluruh halaman.

+1

Ini akan bagus untuk aplikasi seluler, di mana siklus hidup pembuatan/penghancuran ng-view tidak sesuai (membunuh kinerja dan kegunaan).

@tkrotoff Terima kasih untuk contohnya. Karena solusi Anda membatalkan pemberitahuan acara, saya telah menambahkan siaran di rootscope sehingga pengontrol lain masih dapat diberi tahu tentang perubahan rute:

/**
 * HACK Do not reload the current template if it is not needed.
 *
 * See AngularJS: Change hash and route without completely reloading controller http://stackoverflow.com/questions/12115259/angularjs-change-hash-and-route-without-completely-reloading-controller
 */
app.factory('DoNotReloadCurrentTemplate', ['$route', '$rootScope', function($route, $rootScope) {
  return function(scope) {
    var lastRoute = $route.current;
    scope.$on('$locationChangeSuccess', function() {
      if (lastRoute.$$route.templateUrl === $route.current.$$route.templateUrl) {
        console.log('DoNotReloadCurrentTemplate not reloading template: ' + $route.current.$$route.templateUrl);
        $rootScope.$broadcast('locationChangedWithoutReload', $route.current);
        $route.current = lastRoute;        
      }
    });
  };
}]);

Kemudian:

app.controller('MyCtrl',
  ['$scope', 'DoNotReloadCurrentTemplate',
  function($scope, DoNotReloadCurrentTemplate) {

  DoNotReloadCurrentTemplate($scope);

  $rootScope.$on('locationChangedWithoutReload', function(event, route) {
    // set location specific breadcrumbs
    $scope.breadcrumbs = assembleBreadCrumbs();

    // do something for specific route
    if (route.$$route.action == 'item') {
      $scope.item = $scope.items[params.itemId];
      $rootScope.title = $scope.item.name;
    }
  });
}]);

Saya memiliki masalah yang sama dengan penulis topik dan membuat versi solusi yang dimodifikasi yang dijelaskan di atas.

app.factory('skipReload', [
    '$route',
    '$rootScope',
    function ($route, $rootScope) {
        return function () {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        };
    }
]);

Penggunaan:

app.controller('ThingCtrl', ['$scope', '$http', '$location', 'skipReload', function ($scope, $http, $location, skipReload) {
    ...
    $scope.submit = function () {
        ...
        $http.post('thing', thing).success(function (id) {
            skipReload();
            $location.path('/thing/' + id).replace();
        });
    };
}]);

Menggunakan pendengar acara permanen yang menguji templateUrl untuk memutuskan apakah akan mengizinkan pemuatan ulang rute, dapat memutus perutean ke tampilan lain yang menggunakan templateUrl yang sama. Misalnya, saya merutekan ke /thing/new dan tampilan menunjukkan tautan ke /thing/5 yang terakhir ditambahkan, saya tidak akan dapat menavigasi ke hal 5 dan ke hal lain (bahkan mengubah url di browser secara eksplisit). Masalah lain dengan pengujian templateUrl adalah bahwa template dapat ditentukan dengan menggunakan properti template (sebagai string atau fungsi).

Peretasan ini memungkinkan untuk melewati tepat satu pemuatan ulang rute dan tidak merusak perutean.

Saya juga sudah mencoba lebih sedikit solusi verbose (untuk penggunaan di controller):

app.factory('location', [
    '$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;
    }
]);

app.controller('ThingCtrl', ['$scope', '$http', 'location', function ($scope, $http, location) {
    ...
    $scope.submit = function () {
        ...
        $http.post('thing', thing).success(function (id) {
            location.skipReload().path('/thing/' + id).replace();
        });
    };
}]);

Tampaknya bekerja dengan baik.

+1

@sergey-buturlakin $location.skipReload Anda luar biasa! Saya menggunakannya sebagai ganti DoNotReloadCurrentTemplate

@sergey-buturlakin Solusi Anda tampaknya berhasil untuk saya. Terima kasih!

setelah menjalankan skipReload() dari https://github.com/angular/angular.js/issues/1699#issuecomment -22511464 itu terus memuat ulang dinonaktifkan
sepertinya un() harus dipanggil nanti

Ini mencegah pemuatan ulang berikutnya, dan harus dipanggil tepat sebelum jalur berubah.
Ketika perubahan jalur selesai - "un" akan dipanggil.

ya, tetapi saya hanya ingin melewati pemuatan ulang sekali, namun pendekatan yang diusulkan mencegah pemuatan ulang lebih lanjut

+1

+1

+1

PR https://github.com/angular/angular.js/pull/2398 hanya melewatkan reload sekali. Saya tidak tahu apakah itu memiliki konflik gabungan dengan master saat ini. Jika itu masalahnya, kirimi saya satu baris dan saya akan memperbaikinya.

Saya menggunakan solusi sergey, sambil menjatuhkan variabel "un" yang tidak berguna (menurut saya) dan panggilan.

Hal ini menyebabkan:

  angular.module('services.locationChanger', [])
    .service('locationChanger', ['$location', '$route', '$rootScope', function ($location, $route, $rootScope) {

        this.skipReload = function () {
            var lastRoute = $route.current;
            $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
            });
            return this;
        };

        this.withoutRefresh = function (url, doesReplace) {
            if(doesReplace){
                $location.path(url).replace();
            }
            else {
                $location.path(url || '/');
            }
        };
    }]);

dan setiap penelepon:

 locationChanger.skipReload().withoutRefresh("/", true);

+1

+1

+1

+1

@mica16 Bukankah un digunakan untuk melepas ikatan acara?

Saya membuat dua plunkrs untuk pengujian, dengan dan tanpa variabel un untuk melepaskan ikatan acara dan tampaknya tanpa itu acara terus menyala berulang kali

Ya memang, variabel un terdengar aneh.
Menurut penulis aslinya, itu akan dianggap berguna..tapi saya tidak yakin itu adalah solusi yang tepat.

Saya lebih suka menulis ulang, tetapi saya membuang fitur itu karena saya tidak mengharapkannya lagi.

Jadi lakukanlah jika pengujian unit Anda dapat memastikannya berfungsi seperti yang Anda harapkan :)

Anda benar teman-teman
Solusi saya adalah

app.factory 'location', ['$location', '$route', '$rootScope', '$timeout', ($location, $route, $rootScope, $timeout) ->
  $location.skipReload = ->
    lastRoute = $route.current
    un = $rootScope.$on('$locationChangeSuccess', ->
      $route.current = lastRoute
    )
    $timeout((->
      un()
    ), 1000)
    $location

  $location
]

lalu di pengontrol

location.skipReload().path('/new/path').replace()

+1

+1

+1

+1

cara lain untuk melakukannya adalah dengan mengeluarkannya dari "langkah" javascript saat ini sehingga route tidak mengetahui perubahan yang dilakukan pada window.location:

setTimeout(function() {
    window.location.hash = "";
    if (typeof (history.pushState) !== "undefined") {
        history.pushState("", document.title, location.pathname);
    }
}, 0);

+1

+1

+1

+1

Bagaimana dengan menggunakan $anchorScroll? Saya mencari-cari di internet dan menemukan bahwa ada beberapa alat untuk melakukan ini. Ini bekerja untuk saya setidaknya.

Anda harus memeriksanya: http://docs.angularjs.org/api/ng. $anchorScroll

+1

Apakah ini ide yang buruk? Saya akui saya belum mengujinya secara ekstensif. Saya tidak menyukai gagasan untuk memanggil metode terpisah sebelum menetapkan jalur. Dari sudut pandang penggunaan setidaknya ini tampak lebih bersih.

Saya memperluas fungsi $location.path bawaan, menggunakan teknik sergey.

App.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
        var original = $location.path;
        $location.path = function (path, reload) {
            if (reload === false) {
                var lastRoute = $route.current;
                var un = $rootScope.$on('$locationChangeSuccess', function () {
                    $route.current = lastRoute;
                    un();
                });
            }

            return original.apply($location, [path]);
        };
    }])

Penggunaan:

$location.path('/my/path', false);

+1

@EvanWinstanley solusi bekerja untuk saya, terima kasih!

+1

Perbaikan @EvanWinstanley/sergey terlihat bagus dan tidak memuat ulang pengontrol, tetapi ketika mengubah rute, penyelesaian diminta lagi.

Kasus penggunaan utama saya untuk ini adalah secara manual mengubah $location.path tanpa memuat ulang resolves/controller sehingga saya dapat melakukan caching.

Misalnya: Saya memiliki pilihan yang memungkinkan pengguna untuk memilih di antara beberapa aplikasi, yang juga mengubah $location.path untuk url yang lebih bagus. Saat pengguna memilih aplikasi, hasil dari panggilan API di-cache. Bahkan dengan perbaikan, selalu melakukan penyelesaian lagi, yang tidak perlu karena hasilnya sudah di-cache.

+1

Solusi @sergey-buturlakin berfungsi dengan baik untuk saya, itu tidak memuat ulang pengontrol tetapi masih memuat ulang fungsi reslove dan mengirim permintaan ke server.

+1

Solusi @EvanWinstanley tidak berfungsi untuk saya. Di sisi lain solusi @mica16 bekerja terlalu baik... (tombol kembali tidak akan menyegarkan halaman). Saya mencoba menulis versi saya sendiri tanpa hasil :(.

+1

+1

+1

+1
Mohon dukung: $location.reload();

@jvmvik sudahkah anda mencoba $route.current.reload() ?

7.1.1

tidak ada berita tentang ini setelah lebih dari setahun?

+1

+1

Saya telah membuat sedikit perbaikan pada solusi Sergey.
Sekarang mendukung, misalnya, url khusus untuk tab (tab navigasi) tanpa memuat ulang seluruh halaman.

// Original: https://github.com/angular/angular.js/issues/1699#issuecomment-22511464
//
// Usage:
//
// (interception is needed for Back/Forward buttons to work)
//
// location.intercept($scope._url_pattern, function(matched) {
//   // can return false to abort interception
//   var type = matched[1]
//   if (!type) {
//     return;
//   }
//   $scope.safeApply(function() {
//     $scope.data_type = type; 
//     $scope.params.page = 1; 
//     $scope.get_data(); 
//   });
// });
// 
// anywhere in your controller: 
// location.skipReload().path(url);
//
// to replace in history stack:
// location.skipReload().path(url).replace();

app.factory('location', [
    '$location',
    '$route',
    '$rootScope',
    function ($location, $route, $rootScope) {
        var page_route = $route.current;

        $location.skipReload = function () {
            //var lastRoute = $route.current;
            var unbind = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = page_route;
                unbind();
            });
            return $location;
        };

        if ($location.intercept) {
            throw '$location.intercept is already defined';
        }

        $location.intercept = function(url_pattern, load_url) {

            function parse_path() {
                var match = $location.path().match(url_pattern)
                if (match) {
                    match.shift();
                    return match;
                }
            }

            var unbind = $rootScope.$on("$locationChangeSuccess", function() {
                var matched = parse_path();
                if (!matched || load_url(matched) === false) {
                  return unbind();
                }
                $route.current = page_route;
            });
        };

        return $location;
    }
]);

+1

+1

Solusi lain untuk mencegah pemuatan ulang rute saat mengubah jalur $location, adalah dengan menyetel pathParams rute saat ini agar sesuai dengan jalur lokasi baru.

Dalam konfigurasi $routeProvider saya, saya memiliki rute ke /tasks sebagai berikut

when('/tasks/:section/:taskId?', {
      templateUrl: 'partials/tasks.html',
      controller: 'TaskCtrl',
      reloadOnSearch: false
      })

Rute di atas memiliki dua bagian pathParams dan taskId (taskId adalah opsional) dan reloadOnSearch disetel ke false.

Untuk menavigasi dari say /tasks/inbox ke /tasks/inbox/122 tanpa memuat ulang rute, setel taskId pathParam sebelum mengubah jalur $location sebagai berikut

$scope.showTask = function(task) {
    // set taskId to prevent route reloading
    $route.current.pathParams ['taskId'] = task.id;
    $location.path('/tasks/'+$route.current.pathParams ['section']+'/'+task.id);
};

Perhatikan bahwa pathParam bagian tidak perlu disetel karena sudah disetel oleh rute.

Saat rute mengetahui bahwa pathParams yang diekstrak dari jalur $location baru cocok dengan pathParams rute saat ini (dan reloadOnSearch disetel ke false), rute tersebut tidak akan memuat ulang rute, melainkan peristiwa $routeUpdate akan diaktifkan.

Untuk menavigasi kembali dari /tasks/inbox/122 ke /tasks/inbox tanpa memuat ulang rute, hapus taskId pathParam sebelum mengubah jalur $location sebagai berikut

$scope.back = function () {
    // delete taskId to prevent route reloading
    delete $route.current.pathParams ['taskId'];
    $location.path('/tasks/'+$route.current.pathParams ['section']);
};

+1

+:100:

Apakah Anda membaca artikel Derick Bailey tentang router Backbone http://lostechies.com/derickbailey/2011/08/28/dont-execute-a-backbone-js-route-handler-from-your-code/ ? Backbone menyediakan opsi ini dan menurut Derick Anda harus selalu menghindari memicu pemuatan ulang (yang tampaknya kebalikan dari apa yang tampaknya dilakukan router angular di sini).
Ada 48 "+1" di pos ini ... Saya tidak berpikir bahwa semua orang ini melakukan sesuatu yang salah. Harus menyimpan var lastRoute = $route.current; dan mengembalikannya nanti pada $locationChangeSuccess dengan $route.current = lastRoute; tampaknya cukup rumit.
@IgorMinar apakah Anda punya pemikiran?

OK Saya memiliki topik ini untuk minggu depan sehingga kami akhirnya bisa menutup ini.

Hal pertama yang pertama, saya tidak berpikir rute harus memuat ulang ketika nilai #hash berubah.

website.com/#/my-route#top

website.com/#/my-route#bottom

Jadi ketika atas berubah ke bawah seharusnya tidak memuat ulang, tetapi jika nilai rute-saya berubah maka seharusnya. Kita semua bisa sepakat tentang ini kan?

Kedua, yang lebih penting, kita membutuhkan cara mudah untuk menunjukkan bahwa jalur rute tidak akan dimuat ulang saat diubah, tetapi ini akan menjadi masalah jika fragmen rute sebelumnya berubah. Jadi mengapa kita tidak memiliki notasi yang berbeda untuk param rute dengan menggunakan dua titik dua :: untuk menunjukkan bahwa ia bertindak seperti nilai wildcard.

// this will reload the page when the id changes like normal
$routeProvider.register('/users/:id')

// this will reload the page when the id changes, but not the section (since two colons are used)
$routeProvider.register('/users/:id/::section')

apa yang kalian pikirkan?

Ini tidak terlalu membantu dengan situasi di mana Anda ingin pindah:

/users/new

ke

/users/123

setelah pengguna baru dibuat dan diberi id, tanpa memuat ulang pengguna, karena sudah ada di sana.

Karena entah bagaimana seseorang harus memetakan objek pengguna baru ke objek pengguna saat ini dengan id 123. Ini agak spesifik aplikasi bukan?

Untuk apa nilainya, Ember Router juga tidak mendukung pengubahan URL tanpa transisi:

http://stackoverflow.com/questions/19076834/change-url-without-transition

@matsko Bisakah kita memberdayakan insinyur dan membiarkan dia memutuskan apakah rute harus memicu perubahan atau tidak?
Saya baik-baik saja dengan default yang bagus.
Buat cara agar insinyur dapat mengubah url tanpa menjalankan seluruh rangkaian acara pemuatan ulang. Secara pribadi saya setuju dengan menambahkan parameter tambahan opsional dengan opsi (mis: {reload: false}) pada ".path()", ".search()", dll.

@ChrisCinelli ya, tapi apa yang terjadi ketika ada dua parameter dalam definisi rute? Bagaimana Anda bisa mencegah satu memuat ulang sementara mengizinkan yang lain? Bendera akan menjadi fitur semua-atau-tidak sama sekali.

@matsko Jadi pada akhir implementasi, apakah dianggap bahwa kita dapat memilih parameter mana yang menyebabkan pemuatan ulang dan mana yang tidak? Dan jika demikian, apakah Anda sudah memiliki pendekatan dalam pikiran atau di mana kita mengalami hambatan?

@cgross cherry-pick ya (menggunakan titik dua ganda). Ini hanya ide untuk saat ini jadi tidak ada yang konkret. Jika ini sejalan dengan rencana untuk angular 2.0 maka kita mungkin dapat menggunakannya atau mencoba menggunakan sesuatu yang direncanakan untuk dimiliki 2.0 atau sesuatu yang sudah dimiliki Dart (untuk menjaga konsistensi API).

Saya pikir itu akan sempurna, dan akan terlihat bagus (setidaknya IMO) sebagai bagian dari rute.

$routeProvider,when("/:categoryName/:id[reload=no]", { ... })

Dan kemudian, di pengontrol

$scope.$on("$routeChangeSuccess", function () {
  if ($routeParams.id !== $scope.activeId) {
    // React to ID update without reload
  }
});

Ya sesuatu seperti itu, tetapi titik dua ganda '::id' akan digunakan sebagai ganti :id[reload=no] .

Perlu diingat bahwa ini hanya sebuah ide, tetapi banyak orang di sini menginginkan fitur ini.

Saya berpikir dalam hal mungkin akhirnya menambahkan opsi lain, tetapi saya kira sebenarnya tidak ada opsi lain yang mungkin ada. Ada baiknya juga melihat permintaan ini ditanggapi dengan serius. URL cantik adalah masalah besar bagi banyak dari kita.

Matsko +1 untuk titik dua ganda, tetapi saya pikir itu juga akan berguna untuk dapat meneruskan opsi ke path() juga untuk beberapa kasus tepi yang disebutkan di atas

+1 untuk titik dua ganda

@matsko meminta saya untuk mempertimbangkan bagaimana kami menangani ini di router Angular 2.0. Saya tahu itu tidak membantu Anda yang membutuhkan ini untuk ng1.x tapi saya pikir ini mungkin menarik bagi Anda.

Router baru memiliki metode navigate yang dapat Anda lewati dengan _url_ dan objek _options_ opsional. Ini didasarkan pada kemampuan histori router Backbone, sehingga mendukung dua opsi replace dan trigger Jika Anda ingin beralih dari /users/new ke /users/123 tanpa menyebabkan navigasi layar, Anda cukup menentukan trigger:false . Jika Anda juga ingin mengganti entri riwayat /users/new dengan url berbasis id baru, Anda juga akan menentukan replace:true .

Memperbarui rute dari rute _baru_ ke rute _id-based_ tanpa menyebabkan transformasi DOM, dll. adalah kasus penggunaan utama untuk API ini. Contoh umum lainnya adalah pagination. Misalnya, jika Anda memiliki kisi dan Anda ingin pengguna membuka halaman melalui data, Anda dapat menggunakan ini untuk memperbarui fragmen dengan info halaman saat ini tanpa menyebabkan navigasi. Saya yakin ada kegunaan lain, tetapi ini adalah yang telah saya lihat berulang kali dalam konsultasi saya selama bertahun-tahun.

Semoga info ini membantu. Mungkin router 1.x dapat mengadopsi teknik ini?

@EisenbergEffect jadi konfirmasi. Untuk 1.x, metode untuk melakukan ini tanpa mengubah jalur akan terlihat seperti ini:

$location.path(value, { trigger : false })

Dan ini akan secara efektif menggantikan jalur tanpa menyebabkan rute + pengontrol baru menjadi sadar. Ini bisa berhasil untuk saat ini, tetapi bagaimana perasaan Anda tentang ide titik dua :: ?

Untuk semua orang di sini, apakah Anda lebih suka mengubah URL (tanpa memuat ulang rute) difasilitasi melalui rute atau oleh pengembang ketika URL diubah?

Harus ada sumber kebenaran utama untuk lokasi, seperti layanan yang
rute dan browser dapat merujuk dan memengaruhi tetapi tetap menjadi satu-satunya
kebenaran
Pada 1 Juli 2014 23:28, "Matias Niemelä" [email protected] menulis:

@EisenbergEffect https://github.com/EisenbergEffect jadi konfirmasi. Untuk
1.x, metode untuk melakukan ini tanpa mengubah jalur akan terlihat seperti ini:

$location.path(nilai, { trigger : false })

Dan ini akan secara efektif menggantikan jalur tanpa menyebabkan rute baru

• pengontrol untuk menjadi sadar. Ini bisa berhasil untuk saat ini, tetapi bagaimana perasaan Anda?
  tentang double :: ide titik dua?

Untuk semua orang di sini, apakah Anda lebih suka mengubah URL (tanpa
memuat ulang rute) difasilitasi melalui rute atau oleh pengembang
kapan urlnya diganti?

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/angular/angular.js/issues/1699#issuecomment -47741350.

Ini ide lain... Izinkan dua metode baru pada setiap definisi rute, katakan entering(transitionInfo) dan leaving(transitionInfo) atau apalah. Jika ada maka metode leaving akan dipanggil pada rute lama sebelum keluar dan kemudian metode entering() akan dipanggil pada rute baru. transitionInfo akan menjadi objek yang terlihat seperti berikut:

{
  newUrl: ...
  newRoute: ...
  oldUrl: ...
  oldRoute: ...
  cancelRouteChange: false,
  ignoreRouteChange: false
}

Dalam metode ini kita dapat memeriksa rute/url lama dan baru dan kemudian jika Anda ingin URL berubah tetapi tidak menjalankan kembali transisi rute, Anda menetapkan ignoreRouteChange menjadi true . Jika Anda ingin membatalkan perubahan rute dan memutar kembali ke rute sebelumnya, setel cancelRouteChange ke true.

Ini kemudian memberi pengembang kendali penuh ketika transisi rute terjadi, akan berfungsi jika URL dimodifikasi langsung di bilah alamat dan juga menempatkan fungsionalitas untuk memutuskan tentang perubahan rute tertentu yang dekat dengan definisi rute individu yang peduli dengan perubahan .

Saya percaya ada sesuatu yang serupa di router AngularV2 yang disebut activate() . @EisenbergEffect dapatkah Anda mengonfirmasi?

Bagaimana menurut anda?

@matsko Ya, api itu bisa terlihat seperti itu. Anda mungkin juga ingin mempertimbangkan untuk mengimplementasikan opsi replace , karena itu juga sering dibutuhkan. Dalam kasus khusus dari /users/new ke /users/123 Saya pikir Anda akan memanfaatkan kedua opsi karena Anda sebenarnya tidak ingin /users/new tetap berada di back-stack setelah pengguna baru dibuat.

Mengenai :: , saya tidak yakin itu sepenuhnya berguna. Alasannya adalah, dalam contoh pengguna di atas, bukan pola url yang penting, tetapi konteks aplikasi tertentu. Misalnya, jika Anda beralih dari customers ke users/123 maka Anda ingin memberi tahu. Juga, jika Anda meninggalkan users/new dan pergi ke users/456 maka Anda juga ingin memberi tahu. Hanya ketika Anda berada di users/new dan telah menyelesaikan pembuatan pengguna baru, Anda hanya ingin memperbarui fragmen untuk mewakili id ​​pengguna yang baru dibuat tanpa menyebabkan transisi apa pun. Ini sangat bergantung pada apa yang sebenarnya dilakukan pengguna dalam konteks layar pengguna tersebut pada saat itu.

@petebacondarwin Satu masalah dengan gagasan itu adalah bahwa pengetahuan tentang kelonggaran pemberitahuan rute bukanlah sesuatu yang tersedia secara global bersama dengan definisi rute. Sebaliknya, itu tertanam di dalam pengontrol pengguna tertentu karena pengontrol itu adalah bagian dari kode yang mengetahui apakah pengguna baru benar-benar sedang dibuat atau tidak pada saat ini vs. hanya menavigasi menjauh dari layar pengguna baru ke pengguna yang sudah ada sebelumnya.

Bagi saya cara yang harus dilakukan adalah memberikan kontrol kepada penelepon yang ingin mengubah rute. Jadi saya pasti mendukung dua opsi replace dan trigger .

@EisenbergEffect - Anda benar. Secara umum, informasi ini tidak segera tersedia, meskipun saya membayangkan menerapkan ini dengan cara berikut:

Miliki layanan bernama currentUser , yang berisi pengguna yang sedang kami tangani. Saya suka melakukan ini secara umum karena saya tidak nyaman dengan membebani pengontrol saya dengan kode. Jika ini terasa terlalu spesifik maka Anda dapat memiliki currentEntity , yang merupakan "hal" saat ini yang sedang Anda edit/lihat.

Kemudian metode route enter() akan dapat menginjeksi ini dan memutuskan apakah menavigasi ke rute ini benar-benar akan mengubah entitas saat ini. Jika tidak maka kita tidak perlu repot menjalankan transisi, cukup update URL saja.

Saya menghargai bahwa ini bisa menjadi sedikit berat di aplikasi besar, tetapi saya pikir saya akan membuangnya sebagai opsi.

Apa argumen yang menentang pemberian pemanggil (yaitu yang meminta perubahan rute/url) kontrol atas apakah transisi rute benar-benar terjadi? Saya ingat bahwa @IgorMinar khawatir bahwa ini melanggar batasan bahwa satu status aplikasi secara langsung dipetakan ke satu URL dan mengizinkan URL untuk berubah tanpa menjalankan kembali rute berpotensi menempatkan aplikasi dalam status yang berbeda tergantung pada cara Anda tiba di sana.

@petebacondarwin Itu bisa bekerja untuk skenario khusus ini, tetapi menjadi sedikit lebih sulit untuk menangani contoh pagination yang saya sebutkan di atas, yang ingin tidak memicu, dan tidak mengganti, sedangkan skenario pengguna baru ingin tidak memicu tetapi mengganti.

Untuk mengatasi masalah negara sedikit lebih rumit. Alasannya adalah karena kami memiliki dua URL yang mewakili status pengontrol yang sama.... tetapi perbedaannya ada pada modelnya. Jadi, sebenarnya kami memiliki dua keadaan yang berbeda dalam kenyataan....tetapi dari perspektif UX, kami tidak ingin menyentak pengguna dalam melakukan transisi. Dari perspektif perf, kami tidak ingin membuang DOM dan membuat ulang semuanya dengan sia-sia. Jadi, dalam kasus pengguna baru => transisi pengguna yang disimpan, kami benar-benar ingin menghindari pemicuan dan juga mengganti fragmen sehingga tombol kembali _tidak_ membawa Anda kembali ke layar pengguna baru. Secara internal, router atau mekanisme lokasi hanya perlu melacak fragmen saat ini. (Saya membuat sedikit asumsi di sana karena saya tidak tahu bagaimana ng1.x bekerja dalam hal ini. Dengan 2.x kami memastikan untuk melacak dengan hati-hati fragmen saat ini/sebelumnya terlepas dari bagaimana itu diubah.) Dalam skenario pagination, kami tidak ingin memicu karena kami menginginkan UX yang bagus untuk paging melalui data dan tidak ingin pembuangan DOM yang tidak perlu. Tetapi kami ingin agar fragmen sebelumnya disimpan sehingga pengguna dapat menggunakan tombol kembali untuk bergerak mundur melalui halaman data.

Perhatikan bahwa dalam kedua kasus ini, ini bukan hanya tentang url dan status aplikasi, tetapi juga tentang bagaimana kita bertransisi dari status saat ini ke status baru tersebut. Semua ini tidak penting jika Anda menautkan dalam langsung ke tampilan baru. Itu penting ketika Anda berpindah dari satu ke yang lain dalam konteks kasus yang sangat spesifik ini.

+1

+1

+1

+1
Dan juga fitur untuk mengubah URL tanpa mengubah rute

+1 - senang melihat saya tidak sendirian menginginkan ini!

+1, belum ditambahkan(

+1

+1

+1

+1

+1

+1

+1

:+1:

Kamu juga @basarat? :senyum:

@johnnyreilly hanya memiliki layanan di mana Anda menyuntikkan $route dan $location dan Anda dapat memiliki fungsi ini:

/** navigate */
    public navigate(url: string, reload = true) {
        this.$location.url(url);

        // Don't do a controller reload on this navigation. Note: *you* need to be careful not to actually *need* a controller reload
        if (!reload) {
            var lastRoute = this.$route.current;
            var unsub = this.$rootScope.$on('$locationChangeSuccess', () => {
                this.$route.current = lastRoute; // fake this to make the route logic think nothing changed
                unsub();
            });
        }
    }

Bagus @basarat!

+1

+1

Satu hal yang saya perhatikan dengan solusi saat ini adalah bahwa blok penyelesaian router saya masih dieksekusi. Adakah orang lain yang memperhatikan ini? Cukup mudah untuk melewatkan sesuatu di objek $route.current , tapi itu sepertinya tidak masuk akal. Juga, sepertinya masalah ini tidak akan pernah diperbaiki? :menangis:

+1

+1

Bagi kalian yang tidak mau harus scroll ke belakang... sejauh yang saya tahu, inilah yang kami miliki sejauh ini (maaf coffeescript). Sayangnya, ini tidak berfungsi 100% untuk saya. Saya masih menjalankan resolve dan tombol mundur/maju tampaknya rusak sekarang.

#
# Special $location.path function that allows you to change the url, but not
# send things through the router.
# <strong i="7">@see</strong> https://github.com/angular/angular.js/issues/1699
#
@app.run(['$rootScope', '$location', '$route', '$timeout', ($rootScope, $location, $route, $timeout) ->

    originalPath = $location.path

    $location.path = (url, reload=true) ->
        if ! reload
            lastRoute = $route.current
            if lastRoute
                unsub = $rootScope.$on('$locationChangeSuccess', ->
                    $route.current = lastRoute # fake this to make the route logic think nothing changed
                    $route.current.ignore = true
                    unsub()
                )
                # make sure to clean up and unregister the unsub function
                $timeout( ->
                    unsub()
                , 500)

        originalPath.apply($location, [url])

])

@lookfirst Anda menelepon unsub dua kali. Lebih suka: https://github.com/angular/angular.js/issues/1699#issuecomment -54931571

@basarat mengangkat bahu... Saya menambahkan itu karena saya menemukan bahwa unsub() tidak selalu dipanggil dalam contoh pilihan Anda. Mungkin yang terbaik adalah menambahkan penjaga di fungsi unsub.

unsubbed = false
unsub = ... ->
    if ! unsubbed
        ...
        unsubbed = true
        unsub()

$timeout(unsub, 500)

Terlepas dari itu, solusi ini benar-benar berantakan. Itu merusak segala macam hal. Kami benar-benar membutuhkan perbaikan sudut yang disetujui.

karena saya menemukan bahwa unsub() tidak selalu dipanggil dalam contoh pilihan Anda

@lookfirst Anda menggunakan location.path Saya menggunakan location.url . Itu mungkin mempengaruhinya.

Hanya nitpicking (Saya suka membantu): alih-alih originalPath.apply($location, [url]) Anda dapat melakukan originalPath.call($location, url) (Anda mungkin sudah tahu ini)

Menarik... location.url bekerja jauh lebih baik (tombol kembali berfungsi lagi!), tetapi tampaknya menyebabkan masalah lain di pihak saya. Saya harus menggali lebih dalam lagi ketika saya belum mengkode selama 10 jam berturut-turut. Terima kasih atas petunjuk dan diskusinya, sungguh!

+1

+1

+1

@kuchumovn Solusi Anda bagus. Satu masalah yang saya dapatkan adalah $routeParams tidak berubah setelah jalur diubah. Saya menyelesaikannya dengan mengganti nilai $routeParams di dalam pendengar acara. Saya tidak yakin apakah ini cara yang benar, tetapi ini berhasil untuk saya.

app.factory('Location', [
    '$location',
    '$route',
    '$rootScope',
    '$routeParams',
    function ($location, $route, $rootScope, $routeParams) {
        var page_route = $route.current;

        $location.skipReload = function () {
            //var lastRoute = $route.current;
            var unbind = $rootScope.$on('$locationChangeSuccess', function () {
                angular.copy($route.current.params, $routeParams);
                $route.current = page_route;
                unbind();
            });
            return $location;
        };

        if ($location.intercept) {
            throw '$location.intercept is already defined';
        }

        $location.intercept = function(url_pattern, load_url) {

            function parse_path() {
                var match = $location.path().match(url_pattern);
                if (match) {
                    match.shift();
                    return match;
                }
            }

            var unbind = $rootScope.$on("$locationChangeSuccess", function() {
                var matched = parse_path();
                if (!matched || load_url(matched) === false) {
                  return unbind();
                }
                angular.copy($route.current.params, $routeParams);
                $route.current = page_route;
            });
        };

        return $location;
    }
]);

+1

+1

Saya berbicara dengan @IgorMinar secara pribadi kemarin... dia mengatakan bahwa masa depan adalah router di Angular 2.0, yang akan segera di-porting ke 1.3. Sesuatu untuk dipertimbangkan...

mengapa Anda ingin menggabungkan ui-router di sudut?
router uui tampaknya cukup menyelesaikan apa pun yang diperlukan.

setuju dengan @elennaro. meskipun ui-router membutuhkan kreativitas dan studi untuk membuatnya bekerja, itu berhasil dalam setiap skenario yang saya temui. penasaran apa kerugian dari mengadopsi ui-router dan menggunakan sumber daya google?

Tampaknya tidak ada solusi yang tidak akan mengeksekusi tekad, ada ide?

+1

+1

+1 untuk $location.path(value, { trigger : false })
Ada kemajuan dalam hal ini?

+1

+1

+1 bagaimana dengan metode yang sepenuhnya terpisah? meninggalkan path() apa adanya, dan hanya menambahkan metode $location.hash yang hanya mengubah url browser tanpa memuat ulang pengontrol. ini memungkinkan kita untuk mengontrol navigasi balik browser dan merupakan skenario kasus penggunaan yang valid dalam aplikasi yang kaya.

+1

Saat ini menggunakan cuplikan di sini di halaman ini: http://joelsaupe.com/programming/angularjs-change-path-without-reloading/

+1

+1

+1

Solusi yang saya temukan adalah menambahkan status anak dengan url absolut.

$stateProvider.state('state.child', {
    url: '^/some-other-url'
});

Kemudian cukup lakukan $state.go('.child') dan itu akan mengubah url menjadi yang Anda inginkan tanpa memuat ulang dan membuat semua orang senang. Perhatikan bahwa tanda sisipan, yang menunjukkan bahwa url tidak akan mewarisi dari induknya.. butuh beberapa saat untuk mengetahuinya.

+1

+1

+1

+1

+1

+1

+1

@btford bagaimana ini ditangani (jika ada) di componentRouter ?

Terima kasih @balsarori untuk solusi yang sederhana dan berfungsi .

Diuraikan di atasnya untuk memungkinkan pembaruan parameter jalur $route , tanpa memuat ulang pengontrol.

Ia menggunakan console.log alih-alih $log karena kita dapat dengan mudah menghapus semua log untuk build produksi dengan uglifyjs.

Sunting: Perbaiki saat menggunakan dalam proyek:

/**
 * parameter handling
 */

'use strict';

angular.module('route-params', [
  'ng',
  'ngRoute',
])
.service('routeParams', function(
  $route,
  $location
) {
  var R = {};

  /**
   * <strong i="15">@ngdoc</strong> method
   * <strong i="16">@name</strong> routeParams#replace
   *
   * <strong i="17">@description</strong>
   * Replace route params, including path params, without reloading controller.
   *
   * Causes `$route` service to update the current URL, replacing
   * current route parameters with those specified in `params`.
   *
   * Provided property names that match the route's path segment
   * definitions will be interpolated into the location's path, while
   * remaining properties will be treated as query params.
   *
   * If `options.reload` is truthy, the current controller is reloaded.
   *
   * If `options.history` is truthy, the browser history is updated.
   * If `options.history` is undefined, the browser history is only updated
   * when changing value of any existing `$route` parameter,
   * ie. not when adding a previously undefined `$route` parameter.
   *
   * <strong i="18">@param</strong> {!Object<string, string>} params mapping of URL parameter names to values
   * <strong i="19">@param</strong> {!Object<string, boolean>} options `history` and `reload` options.
   *
   * <strong i="20">@returns</strong> {Object} self
   */
  R.replace = function(params, options) {
    var key, value, updateRequired;
    options = options || {};

    // Convert params to strings, and check if they differ from current route params.
    // If `options.history` is undefined, and passed params update any current route params, then set it to true.
    var currentParams = $route.current.params;

    console.log('route: params: replace', {last: angular.copy(currentParams), next: params,
      route: $route.current, options: options});

    if (!$route.current.$$route) {
      // Can't change location.
      return;
    }
    var currentPath = $route.current.$$route.originalPath;
    var history = options.history;

    for (key in params) {
      // jshint eqnull: true
      value = params[key] = (params[key] == null ? undefined : params[key] + '');

      if (value !== currentParams[key]) {
        updateRequired = true;

        console.log('route: params: replace: ' + (currentPath.search(':\\b' + key + '\\b') ? 'path.' : 'search.') +
          key + ' = ' + (key in $route.current.params ? $route.current.params[key] + ' -> ' : '') + params[key]);

        if (history === undefined && key in currentParams) {
          console.log('route: params: replace: update history: ' + key + ' = ' + currentParams[key] + ' -> ' + value);
          history = true;
        }
      }
    }

    if (updateRequired) {
      // If `options.reload` is falsey, then set current route `reloadOnSearch` to false,
      // and make passed path params equal with current route path params,
      // so that `$route` treats the change as update only, and does not broadcast `$routeChangeStart` event.
      //
      // See https://github.com/angular/angular.js/issues/1699#issuecomment-45048054
      // and https://github.com/angular/angular.js/tree/v1.3.x/src/ngRoute/route.js#L484
      // and https://github.com/angular/angular.js/tree/v1.3.x/src/ngRoute/route.js#L539
      if (!options.reload) {
        // Set current route `reloadOnSearch` to false.
        $route.current.$$route.reloadOnSearch = false;

        // Add any passed path params to current route path params, and convert them to strings.
        // Path params are detected by searching for respective name group `:key[*?]` in current route path.
        for (key in params) {
          if (currentPath.search(':\\b' + key + '\\b') !== -1) {
            $route.current.pathParams[key] = params[key];
          }
        }

        // Add any current route path params to passed params, if not set there already.
        for (key in $route.current.pathParams) {
          if (!(key in params)) {
            params[key] = $route.current.pathParams[key];
          }
        }

        // TODO: push state if `options.history` is truthy.
      }
      // If `options.history` is falsey, and controller is reloaded,
      // then make `$location` replace current history state, instead of pushing a new one.
      else if (!history) {
        $location.replace();
      }

      $route.updateParams(params);

      // Update current route params, so the change is reflected immediatelly,
      // and nearby replace() call work correctly.
      for (key in params) {
        $route.current.params[key] = params[key];
      }
    }

    return R;
  };

  return R;
});

Apa status masalah ini saat ini? Ini akan diselesaikan di router baru? Tepat waktu untuk rilis 1.4? Segera?

Saya mengalami masalah yang sama tetapi dengan parameter string kueri. Saya tidak ingin memuat ulang saat mengubahnya. Tetapi saya tidak dapat menonaktifkan reloadOnSearch karena saya perlu mengetahui jika pengguna mengubah string kueri secara manual! :)

Terima kasih!

@marcalj fwiw , kami meretas solusi ini dengan layanan yang membuat url tetap sinkron dengan bilah alamat sehingga kami dapat menonaktifkan reloadOnSearch dan mengambil parameter kueri. juga, pengguna dapat menavigasi url secara langsung melalui bookmark atau tautan.

Dengan ng-router atau ui-router? Bisakah Anda memberi saya tautan dengan kode atau sesuatu?

Mungkin ini bisa diselesaikan dengan menggunakan router baru, saya bisa menunggu karena proyek saya belum selesai.

Terima kasih!

@marcalj contoh kami agak berbelit-belit dan mungkin ketinggalan jaman tetapi lihat https://github.com/irthos/mngr/blob/master/app.js dan periksa baris 10. ia menggunakan metode api.loadState kami yang mengidentifikasi params di url untuk membangun keadaan yang tepat.

NgSilent adalah solusi bagi saya.
Lihat https://github.com/garakh/ngSilent
Diuji dengan ngRoute 1.3.15

Saya menggunakan solusi @sergey-buturlakin dan @kuchumovn , dan saya terus mengalami masalah yang sama.

Pada halaman yang dimaksud (pagex) saya menggunakan location.skipReload dan berfungsi dengan baik - saya dapat memperbarui jalur berulang kali tanpa mengubah rute. Jika saya kemudian menggunakan $location.path aktual untuk mengubah rute dari pagex ke pengontrol baru, itu berfungsi, tetapi jika saya menekan tombol kembali untuk kembali ke pagex, dan kemudian mencoba menavigasi ke halaman lain, saya tidak bisa lagi ubah rute saya lagi tanpa menyegarkan browser. Apakah ada cara untuk mengatasi ini?

+1

+1. Saya suka pendekatan titik dua ganda yang disarankan Matias

+1

Ini adalah kasus penggunaan umum untuk aplikasi satu halaman untuk tidak memuat ulang halaman pada perubahan jalur,
sangat aneh mengapa belum tertanam ke sudut.
membuat plugin berdasarkan solusi @EvanWinstanley :
https://github.com/anglibs/angular-location-update

Mari kita tinjau kembali ini di 1.5. Ada PR terkait di #5860

Saya memerlukan fungsi yang sama untuk pembaruan string kueri tanpa memicu pengontrol rute! :)

Sesuatu seperti: $location.searchSilent('sf', SearchFilter.getForRouteParams());

$lokasi.path(href);
lingkup.$menerapkan();
adalah solusinya!!
kita perlu menginformasikan untuk mengubah perubahan dengan $apply()

Utas ini belum dibuka selama 2 tahun karena angular belum diberi tahu -- kami ingin mengubah sebagian rute tanpa meminta semuanya.

@petebacondarwin akan lebih baik untuk tidak hanya memperbarui jalur lokasi tanpa memuat ulang, tetapi juga memperbarui params jalur tanpa memuat ulang ... seperti yang diterapkan di atas https://github.com/angular/angular.js/issues/1699#issuecomment -96126887

Solusi dari @jicasada bekerja dengan sangat baik untuk saya! Terima kasih!

@jicasada apakah ini berfungsi dengan ui-router? Saya telah memunculkan bug dengan ui-router di mana reloa dOnSearch:false tidak berfungsi jika status induk dan anak berbagi URL yang sama. Jika saya beralih ke status anak dengan param permintaan yang diperbarui, itu akan memanggil pengontrol induk dua kali.

+1

+1

Saya mengonfirmasi bahwa ngSilent melakukan pekerjaan dengan sempurna. Meski begitu solusi resmi akan sangat dihargai.

Solusinya pada dasarnya adalah menambahkan parameter tambahan ke $location.path().

app.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
    var original = $location.path;
    $location.path = function (path, reload) {
        if (reload === false) {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        }
        return original.apply($location, [path]);
    };
}]);

Dan kemudian gunakan saja seperti ini

$location.path('/path/that/you/need', false);

Saya seharusnya bisa melakukan $location.replace() seperti fungsi window.location.replace. Ini konyol karena setiap Buat dalam operasi CRUD akan selalu memiliki masalah ini.

(dan) +1

+1

Saya menyarankan Anda menggunakan "param pencarian" seperti ini:
/thing?id=1234
Jangan mengonfigurasi param di penyedia router, itu tidak akan memuat ulang tampilan dan pengontrol.
Jika Anda ingin mendapatkan id
$location.search().id //1234
@cgross

Demo http://codepen.io/dolymood/details/jrEQBx/
Gunakan decorator untuk dekorator ngViewDirective

+1

+1

+1

+1

+1

+1

+!

Sudah cukup +1 :-)
Kami mendapatkan pesannya. Kita akan melihat ini sebelum Natal!

Ditutup oleh #15002.