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


1080

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

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

Dalam banyak artikel ketika ngRoute digunakan, rute dikonfigurasikan dengan $ routeProvider . Namun, ketika digunakan dengan ui-router , rute dikonfigurasikan dengan $ stateProvider dan $ urlRouterProvider .

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


11
belum lagi router baru angular di 1.4+ dan 2.0
Zach Lysobey

Jawaban:


1112

ui-router adalah modul pihak ke-3 dan sangat kuat. Ini mendukung semua hal yang bisa dilakukan ngRoute normal serta banyak fungsi tambahan.

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

  • ui-router memungkinkan untuk tampilan bersarang 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 menghubungkan tipe-kuat antar negara berdasarkan nama negara. Mengubah url di satu tempat akan memperbarui setiap tautan ke keadaan itu saat Anda membangun tautan dengan ui-sref. Sangat berguna untuk proyek yang lebih besar di mana URL dapat berubah.

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

  • negara memungkinkan Anda untuk memetakan dan mengakses informasi yang berbeda tentang negara 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 kondisi saat ini) di dalam template Anda melalui yang $statedisediakan oleh ui-router yang dapat Anda paparkan melalui pengaturannya $rootScopeaktif 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:


134
Secara keseluruhan ini adalah penjelasan terbaik, tetapi untuk satu poin kunci: "Secara keseluruhan, ui-router adalah ngRouter dengan lebih banyak fitur". Ini jauh lebih mendasar daripada itu: ngRoutehanya memungkinkan Anda untuk menetapkan pengontrol dan templat ke rute URL, sedangkan abstraksi mendasar di ui.routeradalah status, yang merupakan konsep yang lebih kuat.
Nate Abele

23
Mungkin relevan bagi sebagian orang untuk menunjukkan perbedaan ukuran file dalam jawaban ini. Sampai sekarang ngRoute: 35.9kB / 4.4kB / 2.5kB dan ui-router: 162.9kB / 30.4kB / 11.6kB (tidak ditambang / diperkecil / gzip).
Alex Ross

35
Apakah kita benar-benar khawatir tentang 162kb pada tahun 2015?
Lele

27
Kenapa tidak @Catfish? Ada banyak tempat di dunia dengan koneksi internet yang buruk, khawatir itu sangat penting!
Bruno Casali

4
@ tfrascaroli Saya tidak setuju - jika pengguna memuat aplikasi Anda untuk pertama kalinya, waktu pemuatan halaman berkorelasi kuat dengan rasio pentalan . Saya pasti akan mempertimbangkan biaya / manfaat sebelum menambahkan 130kB ke halaman.
Anthony Manning-Franklin

131

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

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

Dari dokumentasi ui-router :

Router AngularUI adalah kerangka kerja perutean untuk AngularJS, yang memungkinkan Anda untuk mengatur bagian-bagian antarmuka Anda menjadi mesin negara. Tidak seperti layanan $ route di Angular core, yang diorganisasikan di sekitar rute URL, UI-Router diorganisasikan di sekitar state, yang secara opsional memiliki rute, serta perilaku lainnya, yang dilampirkan.

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

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

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


1
FWIW Saya hanya menghabiskan beberapa jam membenturkan kepala saya pada ui-router untuk angularjs. Dokumentasinya dalam keadaan yang SANGAT menyesal, jelas telah ditinggalkan selama bertahun-tahun sekarang. Tautan rusak ke panduan penting, paket nuget yang salah nama dalam tutorial, sebut saja. Akhirnya saya menyerah setelah saya tidak bisa mengetahui masalah ini stackoverflow.com/questions/23585065/… (bersama dengan banyak orang lain). Mencoba ngRoute sekarang ...
UnionP



35

Jika Anda ingin memanfaatkan fungsionalitas tampilan bersarang yang diterapkan dalam paradigma ngRoute, coba segmen sudut-rute - ini bertujuan untuk memperluas ngRoute daripada menggantikannya.


16
Saya tidak melihat relevansi jawaban Anda. Penulis bertanya secara khusus tentang perbedaan antara angular-route dan angular-ui-router. Juga, penafian bahwa Anda adalah pembuatnya akan berguna saat mempromosikan perpustakaan Anda sendiri.
vially

23
Relevansinya sederhana: angular-route + angular-route-segment = angular-ui-router. Jadi, perbedaannya adalah: angular-ui-router - angular-route = angular-route-segment :)
artch

1
saya pikir ini jawaban yang valid. angular-route-segment.com jelas merupakan pilihan yang baik bagi mereka yang tidak ingin menggunakan ui-router. Selain itu, sebenarnya, orang-orang bekerja keras untuk membuat perpustakaan ini, bukan hal yang buruk untuk mempromosikannya
phil

19

Umumnya ui-router bekerja dengan mekanisme state ... Dapat dimengerti dengan contoh mudah:

Katakanlah kita memiliki aplikasi besar 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 diputar. Dalam hal ini, hanya keadaan pemutar musik yang harus diubah alih-alih memuat ulang seluruh halaman. Itu dapat dengan mudah ditangani oleh ui-router.

Sementara di ngRoute kita cukup melampirkan view dan controller.


2
ini bisa dilakukan dan harus dilakukan dengan menggunakan layanan dan pabrik. Penggunaan paket ini adalah kurangnya pemahaman tentang rute sudut, keadaan dan pola. Negara ditangani oleh url, yang benar jika Anda ingin berbagi aplikasi dalam keadaan spesifik, apalagi Anda dapat memiliki beberapa pengontrol dalam tampilan yang sama yang bereaksi pada pembaruan data layanan atau param url. ui router mengacaukan segalanya dan menghancurkan pola sudut sepenuhnya.
Pablo Ezequiel Leone

Saya sangat setuju. Masih tidak dapat menemukan penjelasan di mana perlu untuk menggunakan mesin negara ini
kushalvm

18

1.x sudut

ng-rute :

ng-route dikembangkan oleh Tim angularJS untuk routing.

ng-rute: routing berbasis url (Lokasi).

Ex:

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

rute ui :

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

ui-router: routing berbasis negara

Ex:

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

-> ui-router memungkinkan untuk tampilan bersarang

-> ui-router lebih kuat dari ng-route

ng-router , ui-router


13

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

ui-router mengalihkan fokus dari rute url-centric ke "status" aplikasi, yang mungkin tercermin di url.

Fitur utama yang ditambahkan oleh ui-router adalah status bersarang dan tampilan bernama.

Status bersarang memungkinkan Anda 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 bersarang, pengontrol tunggal biasanya harus menangani logika tampilan untuk navigasi sekunder serta konten. Perutean bersarang memungkinkan Anda untuk memisahkan masalah ini.

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

Perbandingan ngRoute dan ui-router yang bagus dapat ditemukan di episode podcast ini .

Agar lebih membingungkan, awasi modul perutean "resmi" baru yang diharapkan akan dirilis oleh tim Angular untuk versi 1.5 dan 2.0 Angular. Ini akan menggantikan modul ngRoute. Berikut ini adalah dokumentasi saat ini untuk modul Router baru - ini cukup jarang pada posting ini karena implementasi belum diselesaikan. Tonton di sini untuk berita lebih lanjut tentang kapan modul ini sebenarnya akan dirilis.


11

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

Dengan ui-router, Anda dapat menentukan banyak tampilan, baik yang paralel maupun bersarang. Jadi jika aplikasi Anda membutuhkan (atau mungkin memerlukan di masa depan) segala jenis perutean / tampilan yang kompleks, maka lanjutkan dengan ui-router.

Ini panduan memulai terbaik untuk Router AngularUI.


10

Hal dasar yang harus Anda ketahui: penggunaan ng-router $location.path()dan penggunaan ui-router$state.go

Istirahatkan kami semua fitur.


8

router ui membuat hidup Anda lebih mudah! Anda dapat menambahkannya ke aplikasi AngularJS Anda melalui menyuntikkannya ke aplikasi Anda ...

ng-route hadir sebagai bagian dari AngularJS inti, jadi lebih sederhana dan memberi Anda lebih sedikit opsi ...

Lihat di sini untuk memahami ng-rute yang lebih baik: https://docs.angularjs.org/api/ngRoute

Juga saat menggunakannya, jangan lupa untuk menggunakan: ngView ..

ng-ui-router berbeda tetapi:

https://github.com/angular-ui/ui-router tetapi memberi Anda lebih banyak pilihan ....


6

Router AngularUI adalah kerangka kerja perutean untuk AngularJS, yang memungkinkan Anda untuk mengatur bagian-bagian antarmuka Anda menjadi mesin negara. Tidak seperti layanan $ route dalam modul Angular ngRoute, yang diorganisasikan di sekitar rute URL, UI-Router diorganisasikan di sekitar negara, yang secara opsional memiliki rute, serta perilaku lainnya, yang dilampirkan.

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


4

ngRoute adalah modul yang dikembangkan oleh tim Angular.js yang sebelumnya merupakan bagian dari inti Angular.

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


3

1- ngRoute dikembangkan oleh tim sudut sedangkan ui-router adalah modul pihak ke-3. 2- ngRoute mengimplementasikan perutean berdasarkan URL rute sedangkan ui-router mengimplementasikan perutean berdasarkan keadaan aplikasi. 3- ui-router menyediakan segala yang disediakan rute-n plus beberapa fitur tambahan seperti status bersarang dan beberapa tampilan bernama.


0

ng-View(dikembangkan oleh tim AngularJS) dapat digunakan hanya sekali per halaman, sedangkan ui-View(modul pihak ke-3) dapat digunakan beberapa kali per halaman.

ui-View Oleh karena itu pilihan terbaik.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.