Pertanyaan Apa perbedaan antara angular-route dan angular-ui-router?


Saya berencana untuk menggunakan AngularJS dalam aplikasi besar saya. Jadi saya sedang dalam proses untuk mencari tahu modul yang tepat untuk digunakan.

Apa perbedaan antara ngRoute (angular-route.js) dan ui-router (angular-ui-router.js) modul?

Di banyak artikel kapan ngRoute digunakan, rute dikonfigurasi dengan $ routeProvider. Namun, bila digunakan dengan ui-router, rute dikonfigurasi dengan $ stateProvider dan $ urlRouterProvider.

Modul mana yang harus saya gunakan untuk pengelolaan dan perluasan yang lebih baik?


1005
2018-01-09 15:03


asal


Jawaban:


ui-router adalah modul pihak ketiga dan sangat kuat. Mendukung segala hal yang dapat dilakukan ngRoute normal serta banyak fungsi tambahan.

Berikut adalah beberapa alasan umum ui-router dipilih melalui ngRoute:

  • ui-router memungkinkan untuk nested views dan beberapa tampilan bernama. Ini sangat berguna dengan aplikasi yang lebih besar di mana Anda mungkin memiliki halaman yang mewarisi dari bagian lain.

  • ui-router memungkinkan Anda untuk memiliki tipe-kuat yang menghubungkan antar negara berdasarkan nama-nama negara bagian. Ubah url di satu tempat akan memperbarui setiap tautan ke status itu saat Anda membuat tautan ui-sref. Sangat berguna untuk proyek yang lebih besar di mana URL mungkin berubah.

  • Ada juga konsep tentang penghias yang dapat digunakan untuk memungkinkan rute Anda dibuat secara dinamis berdasarkan URL yang coba diakses. Ini bisa berarti bahwa Anda tidak perlu menentukan semua rute Anda sebelumnya.

  • menyatakan memungkinkan Anda memetakan dan mengakses informasi yang berbeda tentang negara bagian yang berbeda dan Anda dapat dengan mudah menyampaikan informasi antar negara melalui $stateParams.

  • Anda dapat dengan mudah menentukan apakah Anda berada dalam keadaan atau orang tua dari suatu negara untuk menyesuaikan elemen UI (menyoroti navigasi dari keadaan saat ini) di dalam template Anda melalui $state disediakan oleh ui-router yang Anda dapat mengekspos melalui pengaturannya $rootScope di run.

Intinya, ui-router adalah ngRouter dengan lebih banyak fitur, di bawah lembaran itu sangat berbeda. Fitur tambahan ini sangat berguna untuk aplikasi yang lebih besar.

Informasi Lebih Lanjut:


1080
2018-01-09 15:24



ngRoute adalah modul yang dikembangkan oleh tim AngularJS yang merupakan bagian awal dari inti AngularJS.

ui-router adalah kerangka kerja yang dibuat di luar proyek AngularJS untuk meningkatkan dan meningkatkan kemampuan routing.

Dari ui-router dokumentasi:

AngularUI Router adalah kerangka routing untuk AngularJS, yang memungkinkan   Anda mengatur bagian-bagian antarmuka Anda ke mesin negara.   Tidak seperti layanan rute $ di inti Angular, yang diatur di sekitar   Rute URL, UI-Router diatur di sekitar negara bagian, yang dapat dipilih   memiliki rute, serta perilaku lainnya, terlampir.

Negara-negara terikat untuk diberi nama, bersarang dan pandangan paralel, memungkinkan Anda untuk   mengelola antarmuka aplikasi Anda dengan kuat.

Tak satu pun dari mereka lebih baik, Anda harus memilih yang paling sesuai untuk proyek Anda.

Namun, jika Anda berencana untuk memiliki pandangan kompleks dalam aplikasi Anda dan Anda ingin berurusan dengan gagasan "$ state". Saya menyarankan Anda untuk memilih ui-router.


125
2018-01-09 15:30



ngRoute adalah modul inti sudut yang bagus untuk skenario dasar. Saya percaya bahwa mereka akan menambahkan fitur yang lebih kuat dalam rilis yang akan datang.

URL: https://docs.angularjs.org/api/ngRoute

Ui-router adalah modul kontribusi yang mengatasi masalah ngRoute. Terutama dilihat Nested / Complex.

URL: https://github.com/angular-ui/ui-router

Beberapa perbedaan antara ui-router dan ngRoute

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

enter image description here


64
2017-12-18 13:05



ngRoute adalah bagian dari kerangka inti AngularJS.

ui-router adalah pustaka komunitas yang telah dibuat untuk mencoba meningkatkan kemampuan perutean default.

Berikut ini artikel bagus tentang konfigurasi / pengaturan ui-router:

http://www.ng-newsletter.com/posts/angular-ui-router.html


49
2018-01-09 15:28



Jika Anda ingin menggunakan fungsi tampilan bertingkat yang diimplementasikan dalam paradigma ngRoute, cobalah ruas-ruas-ruas sudut - itu bertujuan untuk memperpanjang ngRoute daripada menggantinya.


34
2018-04-07 19:24



Umumnya ui-router bekerja pada mekanisme negara ... Ini dapat dipahami dengan contoh mudah:

Katakanlah kita memiliki aplikasi besar dari perpustakaan musik (seperti ..gaana atau saavan atau lainnya). Dan di bagian bawah halaman, Anda memiliki pemutar musik yang dibagikan di semua keadaan halaman.

Sekarang katakanlah Anda cukup mengeklik beberapa lagu untuk dimainkan. Dalam hal ini, hanya negara pemutar musik yang harus berubah alih-alih memuat ulang halaman lengkap. Itu bisa dengan mudah ditangani oleh ui-router.

Sementara di ngRoute kita tinggal memasang view dan controller.


17
2018-01-02 22:36



Sudut 1.x

ng-rute:

ng-route dikembangkan oleh angularJS Team untuk routing.

ng-rute: url (Lokasi) berdasarkan routing.

Ex:

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

ui-rute:

ui-router adalah develoepd oleh modul pihak ke-3.

ui-router: routing berdasarkan negara

Ex:

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

-> ui-router memungkinkan untuk tampilan bertingkat

-> ui-router lebih kuat daripada ng-rute

ng-router, ui-router


16
2017-08-30 12:12



ngRoute adalah modul yang dibangun oleh tim Angular yang menyediakan fungsionalitas perutean sisi-klien dasar. Modul ini menyediakan basis yang cukup kuat untuk routing, dan dapat dibangun di atas cukup mudah untuk memberikan fungsionalitas routing yang solid, seperti yang dicontohkan posting blog ini (Pastikan untuk membaca jejak komentar antara Ward Bell dan Ben Nadel, penulis - mereka adalah beberapa pro Angular)

ui-router menggeser fokus dari rute url-centric ke aplikasi "states", yang mungkin atau mungkin tidak tercermin dalam url.

Fitur utama yang ditambahkan oleh ui-router adalah nested states dan named views.

Nested states memungkinkan Anda untuk memisahkan logika pengontrol untuk berbagai bagian aplikasi. Contoh yang sangat sederhana dari ini adalah aplikasi dengan navigasi utama di bagian atas, daftar navigasi sekunder di sebelah kiri, dan konten di sebelah kanan. Tanpa status tersarang, pengontrol tunggal biasanya harus menangani logika tampilan untuk navigasi sekunder serta konten. Perutean bersarang memungkinkan Anda memisahkan masalah ini.

Tampilan bernama adalah fitur tambahan lain dari ui-router. Dengan ngRoute, Anda hanya dapat memiliki direktif ngView tunggal pada halaman, sedangkan dengan tampilan bernama di ui-router Anda dapat menentukan beberapa arahan ui-view, dan kemudian setiap negara dapat mempengaruhi template dan pengontrol tampilan nama. Contoh super sederhana dari hal ini adalah memiliki konten utama aplikasi Anda menjadi tampilan utama, dan kemudian juga memiliki bilah footer yang akan menjadi tampilan ui terpisah. Dalam skenario ini, pengendali footer tidak lagi harus mendengarkan perubahan keadaan / rute.

Perbandingan yang baik antara ngRoute dan ui-router dapat ditemukan podcast ini episode.

Untuk membuat semuanya lebih membingungkan, perhatikan modul perutean "resmi" baru yang diharapkan oleh tim Angular untuk dirilis untuk versi 1.5 dan 2.0 dari Angular. Ini akan menggantikan modul ngRoute. Sini  adalah dokumentasi saat ini untuk modul Router baru - itu cukup jarang pada posting ini karena pelaksanaannya belum selesai. Menonton sini untuk berita lebih lanjut tentang kapan modul ini benar-benar akan dirilis.


13
2018-06-27 03:58



ngRoute adalah pustaka routing dasar, di mana Anda dapat menentukan hanya satu tampilan dan pengontrol untuk rute apa pun.

Dengan ui-router, Anda dapat menentukan beberapa tampilan, baik paralel dan bersarang. Jadi, jika aplikasi Anda membutuhkan (atau mungkin memerlukan di masa depan) setiap jenis perutean / tampilan kompleks, lanjutkan dengan ui-router.

Ini adalah panduan memulai terbaik untuk AngularUI Router.


11
2017-08-28 10:06