Apa perbedaan antara $ routeProvider dan $ stateProvider?

Tolong jelaskan perbedaan antara $routeProviderdan $stateProviderdi AngularJS.

Yang merupakan praktik terbaik?

Keduanya melakukan pekerjaan yang sama seperti yang digunakan untuk keperluan routing di SPA (Aplikasi Halaman Tunggal).

1. Routing Sudut - per $ routeDokumen dokumentasi

URL ke pengontrol dan tampilan (sebagian HTML). Ia mengawasi $ location.url () dan mencoba memetakan jalur ke definisi rute yang ada.

HTML

<div ng-view></div>

Tag di atas akan merender template dari $routeProvider.when()kondisi yang Anda sebutkan di .config(tahap konfigurasi) sudut

Keterbatasan: -

• Halaman hanya dapat berisi satu ng-viewhalaman
• Jika SPA Anda memiliki beberapa komponen kecil pada halaman yang ingin Anda render berdasarkan beberapa kondisi, $routeProvidergagal. (untuk mencapai itu, kita perlu menggunakan arahan seperti ng-include, ng-switch, ng-if, ng-show, yang terlihat buruk untuk memiliki mereka di SPA)
• Anda tidak dapat menghubungkan antara dua rute seperti hubungan orang tua dan anak.
• Anda tidak dapat menampilkan dan menyembunyikan sebagian tampilan berdasarkan pola url.

2. ui-router - per $ stateProvider docs

Router AngularUI adalah kerangka kerja perutean untuk AngularJS, yang memungkinkan Anda untuk mengatur bagian-bagian antarmuka Anda menjadi mesin negara. UI-Router diatur di sekitar negara bagian, yang secara opsional memiliki rute, serta perilaku lainnya, yang dilampirkan.

Beberapa & Bernama Tampilan

Fitur hebat lainnya adalah kemampuan untuk memiliki banyak ui-view dalam sebuah templat.

Sementara beberapa tampilan paralel adalah fitur yang kuat, Anda akan sering dapat mengelola antarmuka Anda lebih efektif dengan membuat sarang Anda view, dan memasangkan pandangan tersebut dengan status bersarang.

HTML

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

Mayoritas ui-routerkekuatannya adalah ia dapat mengatur status & tampilan bersarang.

Pro

• Anda dapat memiliki banyak ui-viewhalaman sekaligus
• Berbagai tampilan dapat bersarang satu sama lain dan dipelihara dengan mendefinisikan keadaan dalam fase routing.
• Kami dapat memiliki hubungan anak & orang tua di sini, seperti halnya warisan di negara bagian, Anda juga dapat menentukan status saudara.
• Anda dapat mengubah ui-view="some"status hanya dengan menggunakan rute absolut menggunakan @nama negara.
• Cara lain yang bisa Anda lakukan perutean relatif adalah dengan hanya menggunakan @perubahan ui-view="some". Ini akan menggantikan ui-viewalih - alih memeriksa apakah bersarang atau tidak.
• Di sini Anda dapat menggunakan ui-srefuntuk membuat hrefURL secara dinamis berdasarkan yang URLdisebutkan dalam keadaan, juga Anda dapat memberikan params negara dalam jsonformat.

Untuk Informasi Lebih Lanjut Angular ui-router

Untuk fleksibilitas yang lebih baik dengan berbagai tampilan bersarang dengan status, saya lebih suka Anda menggunakan ui-router

Ng-Router Angular sendiri URLsmempertimbangkan saat routing, UI-Router mengambil statestambahan URL.

Status terikat pada tampilan yang dinamai, bersarang, dan paralel, memungkinkan Anda mengelola antarmuka aplikasi dengan kuat.

Saat berada di ng-router, Anda harus sangat berhati-hati tentang URL saat memberikan tautan melalui <a href="">tag, di UI-Router Anda hanya perlu statemengingatnya. Anda memberikan tautan seperti <a ui-sref="">. Perhatikan bahwa bahkan jika Anda menggunakan <a href="">di UI-Router, seperti yang Anda lakukan di ng-router, itu akan tetap berfungsi.

Jadi, meskipun Anda memutuskan untuk mengubah URL suatu hari, Anda stateakan tetap sama dan Anda hanya perlu mengubah URL di .config.

Meskipun ngRouter dapat digunakan untuk membuat aplikasi sederhana, UI-Router membuat pengembangan aplikasi jauh lebih mudah. Ini wiki -nya .

$ route: Ini digunakan untuk menghubungkan URL ke pengontrol dan tampilan (sebagian HTML) dan menonton $ location.url () untuk memetakan jalur dari definisi rute yang ada.

Ketika kita menggunakan ngRoute, rute dikonfigurasi dengan $ routeProvider dan ketika kita menggunakan ui-router, rute tersebut dikonfigurasi dengan $ stateProvider dan $ urlRouterProvider.

<div ng-view></div>
    $routeProvider
        .when('/contact/', {
            templateUrl: 'app/views/core/contact/contact.html',
            controller: 'ContactCtrl'
        });


<div ui-view>
    <div ui-view='abc'></div>
    <div ui-view='abc'></div>
   </div>
    $stateProvider
        .state("contact", {
            url: "/contact/",
            templateUrl: '/app/Aisel/Contact/views/contact.html',
            controller: 'ContactCtrl'
        });