Sebaliknya di StateProvider

95

Menggunakan angular-ui-router, Bagaimana saya bisa menggunakan metode sebaliknya di $ stateProvider atau bagaimana saya bisa menggunakannya sama sekali?

Adelin
sumber
apa yang sedang Anda coba lakukan? (Harap dicatat bahwa saya tidak sepenuhnya mengerti $stateProvider.otherwise, jadi itu akan membantu saya)
Kevin Meredith

Jawaban:

123

Anda tidak bisa hanya menggunakan $stateProvider.

Anda perlu memasukkan $urlRouterProviderdan membuat kode yang mirip dengan:

$urlRouterProvider.otherwise('/otherwise');

The /otherwiseurl harus didefinisikan pada keadaan seperti biasa:

 $stateProvider
    .state("otherwise", { url : '/otherwise'...})

Lihat tautan ini di mana ksperling menjelaskan

Richard Keller
sumber
Anda benar-benar bisa menggunakan $stateProvider. Ini kurang berfungsi jika Anda hanya ingin menampilkan template, tetapi tidak mengalihkan. Saya lebih suka jawaban @ juan-hernandez.
weltschmerz
apakah nilai yang diteruskan otherwise(dalam hal ini '/otherwise') harus cocok dengan nama negara bagian (parameter pertama ke .state) atau nilai untuk urlopsi?
d512
Ini sekarang sudah usang - lihat jawaban dari @babyburger
Vedran
81

Anda bisa dengan $stateProvidermenggunakan sintaks menangkap semua ( "*path"). Anda hanya perlu menambahkan konfigurasi status di bagian bawah daftar Anda seperti yang berikut:

$stateProvider.state("otherwise", {
    url: "*path",
    templateUrl: "views/error-not-found.html"
});

Semua opsi dijelaskan di https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters .

Hal yang menyenangkan dari opsi ini, sebagai lawan $urlRouterProvider.otherwise(...), adalah Anda tidak dipaksa untuk mengubah lokasi.

Juan Hernandez
sumber
bisa tolong menjelaskan: you're not forced to a location change?
Kevin Meredith
1
Yang dia maksud adalah url akan tetap apa adanya. Jadi jika pengguna pergi ke /this/does/not/exist, maka URL akan tetap seperti itu di bilah alamat. Solusi lain akan membawa Anda ke/otherwise
Matt Greer
Saya menggunakan solusi Anda dan berhasil (saya dapat menyimpan url yang tidak ditemukan yang bagus karena saya menggunakan luisfarzati.github.io/angulartics dan dengan cara ini saya juga dapat melihat navigasi ke halaman yang tidak ditemukan) untuk kasus ketika url yang dinavigasi pengguna tidak ada. Namun jika saya menavigasi ke url ini menggunakan $ state.go ('jika tidak') di dalam pengontrol, saya kehilangan url. Saya menavigasi secara eksplisit ke status ini saat pengguna membuka halaman detail item dan server mengembalikan 404 (misalnya jika item telah dihapus). Apakah Anda mengetahui cara untuk memperbaikinya?
pcatre
@pcatre Anda dapat menggunakan opsi location = false dan url tidak akan berubah. Misalnya. $ state.go ('jika tidak', {}, {location: false})
JakubKnejzlik
35

Anda juga dapat memasukkan $ state secara manual ke dalam fungsi sebaliknya, yang kemudian dapat Anda navigasikan ke status non-url. Ini memiliki keuntungan karena browser tidak mengubah bilah alamat, yang berguna untuk menangani kembali ke halaman sebelumnya.

    $urlRouterProvider.otherwise(function ($injector, $location) {
        var $state = $injector.get('$state');

        $state.go('defaultLayout.error', {
            title: "Page not found",
            message: 'Could not find a state associated with url "'+$location.$$url+'"'
        });
    });
Zak Henry
sumber
yang memecahkan masalah saya tentang cara memeriksa apakah kami sedang dalam aplikasi atau sedang memuat saat sebaliknya digunakan - terima kasih banyak :)
Jörn Berkefeld
kamu menyelamatkan hariku!
Maelig
Jangan lupa jika Anda ingin meminimalkan ini, Anda perlu menyuntikkan $
Sten Muchow
3

Oke, momen konyol ketika Anda menyadari bahwa pertanyaan yang Anda ajukan sudah terjawab di baris pertama kode sampel! Lihat saja kode contoh.

       angular.module('sample', ['ui.compat'])
      .config(
        [        '$stateProvider', '$routeProvider', '$urlRouterProvider',
        function ($stateProvider,   $routeProvider,   $urlRouterProvider) {
          $urlRouterProvider
            .when('/c?id', '/contacts/:id')
            .otherwise('/'); // <-- This is what I was looking for ! 


          ....

Coba lihat di sini.

Adelin
sumber
3

Saya hanya ingin berpadu dengan jawaban bagus yang telah disediakan. Versi terbaru @uirouter/angularjsmenandai kelas UrlRouterProvidersebagai tidak digunakan lagi. Mereka sekarang merekomendasikan penggunaan UrlServicesebagai gantinya. Anda dapat mencapai hasil yang sama dengan modifikasi berikut:

$urlService.rules.otherwise('/defaultState');

Metode tambahan: https://ui-router.github.io/ng1/docs/1.0.16/interfaces/url.urlrulesapi.html

Babyburger
sumber
0

The jawaban yang diterima referensi angular-routebertanya tentang ui-router. Jawaban yang diterima menggunakan "monolitik" $routeProvider , yang membutuhkan ngRoutemodul (sedangkan ui-routermembutuhkanui.router modul)

The jawaban tertinggi dinilai menggunakan $stateProvidersebaliknya, dan mengatakan sesuatu seperti .state("otherwise", { url : '/otherwise'... }), tapi saya tidak dapat menemukan penyebutan "jika" dalam dokumentasi itu link . Namun, saya melihat yang $stateProviderdisebutkan dalam jawaban ini di mana dikatakan:

Anda tidak bisa hanya menggunakan $stateProvider. Anda perlu menyuntikkan$urlRouterProvider

Di situlah jawaban saya dapat membantu Anda. Bagi saya, cukup menggunakan $urlRouterProviderseperti ini:

 my_module
   .config([
    , '$urlRouterProvider'
    , function(
        , $urlRouterProvider){
            //When the url is empty; i.e. what I consider to be "the default"
            //Then send the user to whatever state is served at the URL '/starting' 
            //(It could say '/default' or any other path you want)
            $urlRouterProvider
                    .when('', '/starting');
                    //...
    }]);

Saran saya konsisten dengan ui-router dokumentasi , ( revisi khusus ini ), yang menyertakan penggunaan serupa dari file. when(...)metode (panggilan pertama ke fungsi):

app.config(function($urlRouterProvider){
  // when there is an empty route, redirect to /index   
  $urlRouterProvider.when('', '/index');

  // You can also use regex for the match parameter
  $urlRouterProvider.when(/aspx/i, '/index');
})
Kacang Merah
sumber