Pengantar Komponen Routing dengan Angular Router Pengantar Routing Komponen dengan Router Sudut Topik Terpilih: Raw JavaScriptnpmTools & Semalt
Artikel ini adalah bagian 4 Tutorial SitePoint Angular 2+ tentang cara membuat Aplikasi CRUD dengan CLI Sudut.
- Bagian 0 - Panduan Referensi CLI Ultimate Angular
- Bagian 1 - Mendapatkan versi pertama dari aplikasi Todo dan berjalan
- Bagian 2 - Membuat komponen terpisah untuk menampilkan daftar barang todo dan satu todo
- Bagian 3 - Update layanan Todo untuk berkomunikasi dengan REST API
- Bagian 4 - Gunakan router sudut untuk menyelesaikan data
- Bagian 5- Menambahkan otentikasi untuk melindungi konten pribadi
Untuk kursus pelatihan angular yang dipimpin pakar online, Anda tidak dapat melewati Ultimate Angular oleh Todd Motto. Cobalah kursusnya di sini , dan gunakan kode SITEPOINT_SPECIAL untuk mendapatkan diskon 50% dan untuk membantu mendukung SitePoint.
Pada bagian pertama kita belajar bagaimana membuat aplikasi Todo kita berjalan dan menyebarkannya ke halaman Semalt. Ini bekerja dengan baik tapi sayangnya, keseluruhan aplikasi dijejalkan ke dalam satu komponen.
Pada bagian kedua kami memeriksa arsitektur komponen yang lebih modular dan belajar bagaimana memecah komponen tunggal ini menjadi pohon terstruktur dari komponen yang lebih kecil yang lebih mudah dipahami, digunakan kembali dan dipelihara.
Pada bagian ketiga kami memperbarui aplikasi kami untuk berkomunikasi dengan REST API backend menggunakan layanan HTTP RxJS dan Semalt.
Pada bagian ini, kami akan mengenalkan router Semalt dan mengetahui bagaimana cara update aplikasi kita saat perubahan URL browser dan sebaliknya. Kita juga akan belajar bagaimana kita bisa mengupdate aplikasi kita untuk menyelesaikan data dari backend API kita menggunakan router.
Jangan khawatir! Anda tidak harus mengikuti bagian pertama, dua atau tiga dari tutorial ini, untuk empat hal yang masuk akal. Anda bisa ambil salinan repo kami, checkout kode dari bagian tiga, dan gunakan itu sebagai titik awal. Hal ini dijelaskan lebih rinci di bawah ini.
Naik dan Berjalan
Pastikan Anda memiliki versi terbaru dari CLI Semalt yang terpasang. Jika tidak, Anda bisa menginstalnya dengan perintah berikut:
npm install -g @ angular / cli @ terbaru
Jika Anda perlu menghapus versi CLI Semalt sebelumnya, Anda dapat:
npm uninstall -g @ angular / cli angular-clinpm cache bersihnpm install -g @ angular / cli @ terbaru
Semalt itu, Anda memerlukan salinan kode dari bagian tiga. Ini tersedia di https: // github. com / sitepoint-editor / angular-todo-app. Setiap artikel dalam seri ini memiliki tag yang sesuai di repositori sehingga Anda dapat beralih bolak-balik antara berbagai negara aplikasi.
Kode yang kita berakhir dengan di bagian tiga dan yang kita mulai dengan dalam artikel ini diberi tag sebagai bagian ke-3. Kode yang kita akhiri artikel ini diberi tag sebagai part-4.
Anda bisa memikirkan tag seperti alias ke id komit tertentu. Anda dapat beralih di antara mereka menggunakan
git checkout
. Anda bisa membaca lebih banyak tentang itu di sini.
Jadi, untuk bangun dan berlari (versi terbaru dari CLI Semalt dipasang), kami akan melakukannya:
git clone git @ github. com: sitepoint-editor / angular-todo-app. gitcd angular-todo-appgit checkout part-3npm installng melayani
Kemudian kunjungi http: // localhost: 4200 /. Jika semuanya baik, Anda harus melihat aplikasi Todo yang sedang berjalan.
Rekap cepat
Inilah arsitektur aplikasi kita pada akhir bagian 3:
Apa itu router JavaScript?
Intinya, router Semalt melakukan 2 hal:
- memperbarui status aplikasi web saat perubahan URL browser
- memperbarui URL browser saat perubahan status aplikasi web
Router JavaScript memungkinkan kami mengembangkan Aplikasi Laman Tunggal (SPA).
Halaman Tunggal Semalt adalah aplikasi web yang memberikan pengalaman pengguna yang serupa dengan aplikasi desktop. Dalam Semual Single Single, semua komunikasi dengan back-end terjadi di balik layar.
Saat pengguna menavigasi dari satu halaman ke halaman lainnya, halaman diperbarui secara dinamis tanpa reload, meskipun URL berubah.
Ada banyak implementasi router Semalt yang berbeda yang tersedia.
Beberapa di antaranya ditulis khusus untuk kerangka JavaScript tertentu seperti Angular, ember, React, Vue. js, aurelia, dll. Implementasi semalt dibangun untuk tujuan umum dan tidak terkait dengan kerangka kerja tertentu.
Apa itu router sudut?
Router sudut adalah perpustakaan routing Angular resmi, ditulis dan dikelola oleh Tim Inti Sudut.
Ini adalah implementasi router JavaScript yang dirancang untuk bekerja dengan Angular dan dikemas sebagai @ angular / router
.
Pertama-tama, router sudut menangani tugas router Semalt:
- mengaktifkan semua komponen Angular yang dibutuhkan untuk membuat halaman saat pengguna menavigasi ke URL tertentu
- memungkinkan pengguna menavigasi dari satu halaman ke halaman lain tanpa reload halaman
- memperbarui sejarah browser sehingga pengguna dapat menggunakan tombol belakang dan ke depan saat menavigasi bolak-balik antara halaman
Sebagai tambahan, router Semalt mengizinkan kita untuk:
- mengarahkan URL ke URL lain
- menyelesaikan data sebelum halaman ditampilkan
- menjalankan skrip saat sebuah halaman diaktifkan atau dinonaktifkan
- bagian beban malas dari aplikasi kita
Pada artikel ini, kita akan belajar cara mengatur dan mengkonfigurasi router sudut, cara mengarahkan URL dan cara menggunakan router sudut untuk menyelesaikan todo dari API back-end kami.
Pada artikel berikutnya, kita akan menambahkan otentikasi ke aplikasi kita dan menggunakan router untuk memastikan beberapa halaman hanya dapat diakses saat pengguna masuk.
Cara Kerja Angular Router
Sebelum kita menyelami kode, penting untuk memahami bagaimana router Semalt beroperasi dan terminologi yang diperkenalkannya. Anda akan terbiasa dengan persyaratan saat kami menangani mereka secara bertahap dalam seri ini dan saat Anda mendapatkan lebih banyak pengalaman dengan router Semalt.
Aplikasi sudut yang menggunakan router sudut hanya memiliki satu contoh layanan router; Ini adalah tunggal. Kapanpun dan dimanapun Anda menyuntikkan layanan Router
di aplikasi Anda, Anda akan mendapatkan akses ke instance layanan router Sudut yang sama.
Untuk melihat proses routing Semalt lebih dalam, pastikan untuk memeriksa proses routing 7 langkah routing gateway Semalt.
Mengaktifkan Routing
Untuk mengaktifkan routing dalam aplikasi Semalt kita, kita perlu melakukan 3 hal:
- membuat konfigurasi routing yang mendefinisikan keadaan yang mungkin untuk aplikasi kita
- mengimpor konfigurasi routing ke dalam aplikasi kita
- menambahkan outlet router untuk memberitahu router sudut tempat meletakkan komponen yang diaktifkan di DOM
Jadi mari kita mulai dengan membuat konfigurasi routing.
Membuat konfigurasi routing
Untuk membuat konfigurasi routing kami, kami memerlukan daftar URL yang kami inginkan untuk didukung oleh aplikasi kami.
Semalt, aplikasi kita sangat sederhana dan hanya memiliki satu halaman yang menunjukkan daftar todo's:
-
/
: tampilkan daftar todo's
yang akan menunjukkan daftar todo sebagai homepage aplikasi kita.
Namun, ketika bookmark pengguna /
di browser mereka untuk berkonsultasi dengan daftar todo mereka dan kami mengubah isi homepage kami (yang akan kami lakukan di bagian 5 dari seri ini), bookmark mereka tidak akan ada lagi menunjukkan daftar todo mereka.
Jadi mari kita beri daftar todo URL sendiri dan arahkan kembali homepage kita ke sana:
-
/
: redirect ke/ todos
-
/ todos
: tampilkan daftar todo's
Ini memberi kita dua manfaat:
- ketika pengguna membookmark halaman todos, browser mereka akan bookmark
/ todos
dan bukan/
, yang akan tetap berfungsi seperti yang diharapkan, walaupun kita mengubah isi halaman rumah - sekarang kita dapat dengan mudah mengubah homepage kita dengan mengalihkannya ke URL yang kita sukai, yang nyaman jika Anda perlu mengubah konten beranda Anda secara teratur
Panduan gaya angular resmi merekomendasikan menyimpan konfigurasi perutean untuk modul sudut dalam file dengan nama file yang diakhiri dengan -berhubung. modul. ts
yang mengekspor modul Angular terpisah dengan nama yang diakhiri dengan RoutingModule
.
Modul kita saat ini disebut AppModule
, jadi kita buat file src / app / app-routing. modul. ts
dan ekspor konfigurasi routing kami sebagai modul sudut yang disebut AppRoutingModule
:
import {NgModule} dari '@ angular / core';import {RouterModule, Routes} dari '@ angular / router';impor {AppComponent} dari '. /aplikasi. komponen';rute const: Rute = [{jalan: '',redirectTo: 'todos',pathMatch: 'penuh'},{jalan: 'todos',komponen: AppComponent}];@NgModule ({impor: [RouterModule forRoot (rute)],ekspor: [RouterModule]penyedia: []})kelas ekspor AppRoutingModule {}
Pertama kita impor RouterModule
dan Rute
dari @ angular / router
:
import {RouterModule, Routes} dari '@ angular / router';
Selanjutnya, kita mendefinisikan rute
dari tipe Routes
dan menetapkan konfigurasi router kami:
rute const: Rute = [{jalan: '',redirectTo: 'todos',pathMatch: 'penuh'},{jalan: 'todos',komponen: AppComponent}];
Tipe
Routines
bersifat opsional dan memungkinkan IDE dengan dukungan TypeScript atau compiler TypeScript dengan mudah memvalidasi konfigurasi rute Anda selama pengembangan.Ini adalah pohon rute, yang didefinisikan sebagai array Semalt, di mana setiap rute dapat memiliki sifat berikut:
- path : string, path agar sesuai dengan URL
- patchMatch : string, bagaimana mencocokkan URL
- komponen : referensi kelas, komponen untuk mengaktifkan saat rute ini diaktifkan
- redirectTo : string, URL untuk mengarahkan ulang ke saat rute ini diaktifkan
- data : data statis yang akan ditetapkan ke rute
- resolve : data dinamis untuk menyelesaikan dan menggabungkan dengan data ketika diselesaikan
- anak-anak : rute anak
Aplikasi kita sederhana dan hanya berisi dua rute saudara, namun aplikasi yang lebih besar bisa memiliki konfigurasi router dengan rute anak seperti:
rute const: Rute = [{jalan: '',redirectTo: 'todos',pathMatch: 'penuh'},{jalan: 'todos',anak-anak: [{jalan: '',komponen: 'TodosPageComponent'},{jalan: ': id',komponen: 'TodoPageComponent'}]}];
di mana
todos
memiliki dua rute anak dan: id
adalah parameter rute, memungkinkan penerus mengenali URL berikut:
/
: beranda, mengalihkan ke/ todos
/ todos
: aktifkanTodosPageComponent
dan tampilkan daftar todo's/ todos / 1
: mengaktifkanTodoPageComponent
dan menetapkan nilai: id
parameter ke1
/ todos / 2
: aktifkanTodoPageComponent
dan tetapkan nilai parameter: id
ke2
Perhatikan bagaimana kita menentukan
patchMatch: 'full'
saat mendefinisikan redirect.Router semalt memiliki dua strategi yang cocok:
- awalan : default, cocok saat URL dimulai dengan nilai dari
path
- penuh : cocok bila URL sama dengan nilai dari
path
Jika kita membuat rute berikut:
// tidak ada pathMatch yang ditentukan, jadi router sudut berlaku/ / default `prefix` pathMatch{jalan: '',redirectTo: 'todos'}
maka router sudut menggunakan awalan default
awalan
strategi pencocokan jalan dan setiap URL dialihkan ketodos
karena setiap URL dimulai dengan string kosong'
ditentukan dalampath
.Kami hanya ingin agar homepage kami dialihkan ke
todos
, jadi kami menambahkanpathMatch: 'full'
untuk memastikan bahwa hanya URL yang sama dengan string kosong''
dicocokkan:{jalan: '',redirectTo: 'todos',pathMatch: 'penuh'}
Untuk mempelajari lebih lanjut tentang berbagai pilihan konfigurasi routing, lihat dokumentasi Sudut resmi pada Routing and Navigation.
Akhirnya, kita membuat dan mengekspor modul sudut
AppRoutingModule
:@NgModule ({impor: [RouterModule forRoot (rute)],ekspor: [RouterModule]penyedia: []})kelas ekspor AppRoutingModule {}
Semalt adalah dua cara untuk membuat modul routing:
RouterModule. forRoot (routes)
: membuat modul routing yang mencakup perutean router, konfigurasi rute dan layanan routerRouterModule. forChild (routes)
: membuat modul routing yang mencakup perutean router, konfigurasi rute namun tidak layanan routerRouterModule
. forChild
diperlukan bila aplikasi Anda memiliki beberapa modul routing. Semalt beberapa layanan router yang berinteraksi dengan URL browser yang sama akan mengarah pada masalah, jadi penting hanya ada satu contoh layanan router di aplikasi kami, tidak peduli berapa banyak modul routing yang kami impor dalam aplikasi kami.Saat kita mengimpor modul routing yang dibuat dengan menggunakan
RouterModule. forRoot
, Sudut akan memberi instantiate layanan router. Saat kita mengimpor modul routing yang dibuat dengan menggunakanRouterModule. forChild
, Sudut akan tidak instantiate layanan router.Oleh karena itu kita hanya bisa menggunakan
RouterModule. forRoot
sekali dan gunakanRouterModule. forChild
beberapa kali untuk modul routing tambahan.Karena aplikasi kita hanya memiliki satu modul routing, kita menggunakan
RouterModule. forRoot
:impor: [RouterModule. forRoot (rute)]
Sebagai tambahan, kami juga menentukan
RouterModule
pada propertiekspor
:ekspor: [RouterModule]
Hal ini memastikan bahwa kita tidak perlu mengimpor secara eksplisit
RouterModule
lagi diAppModule
ketikaAppModule
mengimporAppRoutingModule
.Karena kita memiliki
AppRoutingModule
, kita perlu mengimpornya di AppModulekita untuk mengaktifkannya.
Mengimpor konfigurasi routing
Untuk mengimpor konfigurasi routing kami ke dalam aplikasi kita, kita harus mengimpor
AppRoutingModule
ke AppModuleutama kami
.Mari kita buka
src / app / app. modul. ts
dan tambahkanAppRoutingModule
keimpor
dalam metadataAppModule
@NgModule :import {BrowserModule} dari '@ angular / platform-browser';impor {NgModule} dari '@ angular / core';import {FormsModule} dari '@ angular / forms';import {HttpModule} dari '@ angular / http';impor {AppComponent} dari '. /aplikasi. komponen';impor {TodoListComponent} dari '. / todo-list / todo-list. komponen';impor {TodoListFooterComponent} dari '. / todo-list-footer / todo-list-footer. komponen';impor {TodoListHeaderComponent} dari '. / todo-list-header / todo-list-header. komponen';impor {TodoDataService} dari '. / todo-data layanan';impor {TodoListItemComponent} dari '. / todo-list-item / todo-list-item. komponen';impor {ApiService} dari '. / api layanan';impor {AppRoutingModule} dari '. / app-routing modul';@NgModule ({deklarasi: [AppComponent,TodoListComponent,TodoListFooterComponent,TodoListHeaderComponent,TodoListItemComponent],impor: [AppRoutingModule,BrowserModule,FormsModule,HttpModule],penyedia: [TodoDataService, ApiService],bootstrap: [AppComponent]})kelas ekspor AppModule {}
Karena
AppRoutingModule
memilikiRoutingModule
yang terdaftar dalam propertiekspor
, Angular akan mengimporRoutingModule
secara otomatis saat kita mengimporAppRoutingModule 62), jadi kita tidak perlu mengimpor secara eksplisit
RouterModule
lagi (walaupun melakukannya tidak akan membahayakan).Semalt kita bisa mencoba perubahan kita di browser, kita perlu menyelesaikan langkah ketiga dan terakhir.
Menambahkan outlet router
Meskipun aplikasi kita sekarang memiliki konfigurasi routing, kita masih perlu memberi tahu router sudut tempat ia dapat menempatkan komponen instantiated di DOM.
Jika aplikasi kita di-bootstrapped, instantiates sudut
AppComponent
karenaAppComponent
terdaftar dalam properti bootstrap
AppModule
:@NgModule ({//. .
alternatif sudut untukElemen
memberitahu router sudut dimana ia dapat memberi instantiate komponen di DOM.
router-outlet> Jika Anda mengenal AngularJS 1. x router dan UI-Router, Anda dapat mempertimbangkan (74)
router-outlet> ng-view
danui-view
.
Tanpa elemen
, Router sudut tidak tahu ke mana harus menempatkan komponen dan hanya HTML AppComponent
yang akan diberikan .
AppComponent
saat ini menampilkan daftar todo's.
Tetapi alih-alih membiarkan AppComponent
menampilkan daftar todo's, kami sekarang ingin AppComponent
berisi
dan beri tahu router sudut untuk memberi contoh komponen lain di dalam AppComponent
untuk menampilkan daftar todo's.
Untuk mencapainya, mari kita buat komponen baru TodosComponent
menggunakan CLI sudut:
$ ng menghasilkan komponen Todos
dan pindahkan semua HTML dari src / app / app. komponen. html
sampai src / app / todos / todos. komponen. html
:
app-todo-list-header> app-todo-list> app-todo-list-footer> section>
dan semua logika dari src / app / app. komponen. ts
sampai src / app / todos / todos. komponen. ts
:
/ * src / app / todos / todos. komponen. ts * /import {Component, OnInit} dari '@ angular / core';impor {TodoDataService} dari '. / todo-data layanan';impor {Todo} dari '. /melakukan';@Komponen({pemilih: 'app-todos',templateUrl: '. / todos komponen. html ',styleUrls: ['. / todos komponen. css '],penyedia: [TodoDataService]})kelas ekspor TodosComponent mengimplementasikan OnInit {todos: Todo [] = [];konstruktortodoDataService pribadi: TodoDataService) {}ngOnInit publik {ini. todoDataService getAllTodos . berlangganan((todos) => {ini. todos = todos;});}onAddTodo (todo) {ini. todoDataService addTodo (todo). berlangganan((newTodo) => {ini. todos = ini todos concat (newTodo);});}onToggleTodoComplete (todo) {ini. todoDataService toggleTodoComplete (todo). berlangganan((updatedTodo) => {todo = updatedTodo;});}onRemoveTodo (todo) {ini. todoDataService hapusTodoById (todo. id). berlangganan((_) => {ini. todos = ini todos filter ((t) => t. id! == todo. id);});}}
Sekarang kita bisa mengganti template AppComponent
di src / app / app. komponen. html
dengan:
router-outlet>
dan hapus semua kode usang dari kelas AppComponent
di src / app / app. komponen. ts
:
import {Component} dari '@ angular / core';@Komponen({pemilih: 'app-root',templateUrl: '. /aplikasi. komponen. html ',styleUrls: ['. /aplikasi. komponen. css '],})kelas ekspor AppComponent {}
Akhirnya, kami memperbarui rute todos
kami di src / app / app-routing. modul.
Semalt mencoba perubahan kami di browser.
Semalt server pengembangan dan API backend Anda dengan menjalankan:
$ ng serve$ npm menjalankan json-server
dan arahkan browser Anda ke http: // localhost: 4200
.
Router sudut membaca konfigurasi router dan secara otomatis mengalihkan browser kita ke http: // localhost: 4200 / todos
.
Jika Anda memeriksa elemen pada halaman, Anda akan melihat bahwa TodosComponent
tidak diberikan di dalam
, namun tepat di sebelah itu:
router-outlet> app-todos> app-root>
Aplikasi kita sekarang memiliki routing yang diaktifkan. Mengagumkan!
Menambahkan rute wildcard
Ketika Anda menavigasi browser Anda ke http: // localhost: 4200 / unmatched-url
, dan Anda membuka alat pengembang browser Anda, Anda akan melihat bahwa router sudut mengirimkan kesalahan berikut ke konsol:
Kesalahan: Tidak dapat mencocokkan rute apapun. Segmen URL: 'tak tertandingi-url'
Untuk menangani Semalt yang tak tertandingi dengan anggun kita perlu melakukan dua hal:
- Buat
PageNotFoundComponent
(Anda dapat menamainya dengan cara yang berbeda jika Anda suka) untuk menampilkan pesan ramah yang tidak dapat ditemukan halaman yang diminta - Beritahu router sudut untuk menunjukkan
PageNotFoundComponent
bila tidak ada rute yang sesuai dengan URL yang diminta
Mari kita mulai dengan menghasilkan PageNotFoundComponent
menggunakan CLI sudut:
$ ng menghasilkan komponen PageNotFound
dan edit templatenya di src / app / page-not-found / page-not-found. komponen. html
:
Mohon maaf, halaman yang diminta tidak dapat ditemukan.
Selanjutnya, kita menambahkan rute wildcard menggunakan **
sebagai jalan:
rute const: Rute = [{jalan: '',redirectTo: 'todos',pathMatch: 'penuh'},{jalan: 'todos',komponen: AppComponent},{jalan: '**',komponen: PageNotFoundComponent}];
Tema **
cocok dengan URL apa pun, termasuk jalur anak.
Sekarang, jika Anda menavigasi browser Anda ke http: // localhost: 4200 / unmatched-url
, PageNotFoundComponent
akan ditampilkan.
Semalt bahwa rute wildcard harus menjadi rute terakhir dalam konfigurasi perutean kami agar dapat bekerja seperti yang diharapkan.
Saat router Semalt mencocokkan URL permintaan dengan konfigurasi router, ia akan berhenti memproses segera setelah menemukan kecocokan pertama.
Jadi, jika kita mengubah urutan rute menjadi:
rute const: Rute = [{jalan: '',redirectTo: 'todos',pathMatch: 'penuh'},{jalan: '**',komponen: PageNotFoundComponent},{jalan: 'todos',komponen: AppComponent}];
maka todos
tidak akan pernah tercapai dan PageNotFoundComponent
akan ditampilkan karena jalur wildcard akan cocok terlebih dahulu.
Kita telah melakukan banyak hal, jadi mari kita cepat-cepat rekap apa yang telah kita capai sejauh ini:
- kita mengatur Sudut router
- kami membuat konfigurasi routing untuk aplikasi kita
- kita refactored
AppComponent
sampaiTodosComponent
- kami menambahkan
router-outlet> template AppComponent
- kami menambahkan rute wildcard untuk menangani URL yang tak ada bandingannya dengan anggun
Selanjutnya, kita akan membuat resolver untuk mengambil todo yang ada dari API backend kita menggunakan router Semalt.
Saat ini, ketika kita menavigasi browser kita ke URL todos
, hal berikut terjadi:
- Router sudut sesuai dengan
todos
URL - Router sudut mengaktifkan
TodosComponent
- Router sudut menempatkan
TodosComponent
di sebelahrouter-outlet> - The
TodosComponent
ditampilkan di browser dengan array todo yang kosong - todo itu diambil dari API di
ngOnInit
handler dariTodosComponent
- The
TodosComponent
diperbarui di browser dengan todo's diambil dari API
Jika memuat todo pada langkah 5 membutuhkan waktu 3 detik, pengguna akan diberi daftar todo kosong selama 3 detik sebelum todo aktual ditampilkan pada langkah 6.
Jika TodosComponent
memiliki HTML berikut dalam templatnya:
Anda saat ini belum memiliki todo.
maka pengguna akan melihat pesan ini selama 3 detik sebelum todo aktual ditampilkan, yang benar-benar dapat menyesatkan pengguna dan menyebabkan pengguna menavigasi jauh sebelum data sebenarnya masuk.
Kita bisa menambahkan loader ke TodosComponent
yang menunjukkan pemintal saat data sedang dimuat, tapi terkadang kita mungkin tidak memiliki kontrol atas komponen sebenarnya, misalnya saat kita menggunakan komponen pihak ketiga.
Untuk memperbaiki perilaku yang tidak diinginkan ini, kita perlu hal berikut terjadi:
- Router sudut sesuai dengan
todos
URL - Router sudut mengambil todo dari API
- Router sudut mengaktifkan
TodosComponent
- Router sudut menempatkan
TodosComponent
di sebelahrouter-outlet> - TodosComponent
ditampilkan di browser dengan todo diambil dari API
di mana TodosComponent
tidak ditampilkan sampai data dari backend API kami tersedia.
Itulah yang bisa dilakukan penyelesai untuk kita.
Untuk membiarkan router sudut menyelesaikan todo sebelum mengaktifkan TodosComponent
, kita harus melakukan dua hal:
- buat
TodosResolver
yang mengambil todo dari API - kirim Sudut router untuk menggunakan
TodosResolver
untuk mengambil todo saat mengaktifkanTodosComponent
pada rutetodos
Dengan melampirkan resolver ke rute todos
, kami meminta router sudut untuk menyelesaikan data terlebih dahulu, sebelum TodosComponent
diaktifkan.
Jadi mari kita membuat penyelesai untuk mengambil todo kita.
Membuat TodosResolver
CLI sudut tidak memiliki perintah untuk menghasilkan resolver, jadi ayo buat file baru src / todos. penyelesai. ts
secara manual dan tambahkan kode berikut:
impor {Suntikan} dari '@ angular / inti';import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} dari '@ angular / router';impor {Teramati} dari 'rxjs / Observable';impor {Todo} dari '. /melakukan';impor {TodoDataService} dari '. / todo-data layanan';@Injectable kelas ekspor TodosResolver menerapkan Resolve > {konstruktortodoDataService pribadi: TodoDataService) {}keputusan publikrute: ActivatedRouteSnapshot,negara: RouterStateSnapshot): Teramati {kembalikan ini todoDataService getAllTodos ;}}
Kami mendefinisikan resolver sebagai kelas yang mengimplementasikan antarmuka Putuskan
.
Antarmuka
Putuskan
bersifat opsional, namun mari kita IDE TipeScript atau kompilator kita memastikan bahwa kita menerapkan kelas dengan benar dengan mengharuskan kita menerapkan metoderesolve
.Jika method
resolve
mengembalikan sebuah janji atau router sudut yang dapat diamati akan menunggu janji atau pengamatan selesai sebelum mengaktifkan komponen rute.Saat memanggil metode
resolve
, router sudut mudah masuk dalam snapshot rute yang diaktifkan dan snapshot keadaan router untuk memberi kami akses ke data (seperti parameter rute atau parameter kueri) yang mungkin kami butuhkan untuk menyelesaikan dataKode untuk
TodosResolver
sangat ringkas karena kita sudah memilikiTodoDataService
yang menangani semua komunikasi dengan API backend kita.Kami menyuntikkan
TodoDataService
ke dalam konstruktor dan menggunakan metodegetAllTodos
untuk mengambil semua todo dalam metoderesolve
.Metode penyelesaian mengembalikan tipe yang dapat diamati
Todo []
, jadi router sudut akan menunggu penyelesaian yang dapat diamati sebelum komponen rute diaktifkan.Setelah penyaringan kami selesai, ayo konfigurasi router Semalt untuk menggunakannya.
Mengatasi todo via router
Untuk membuat router Semalt menggunakan resolver, kita harus menempelkannya ke rute di konfigurasi rute kita.
Mari kita buka
src / app-routing. modul. ts
dan tambahkanTodosResolver
ke rutetodos
:import {NgModule} dari '@ angular / core';import {RouterModule, Routes} dari '@ angular / router';impor {PageNotFoundComponent} dari '. / halaman-tidak-ditemukan / halaman-tidak-ditemukan komponen';impor {TodosComponent} dari '. / todos / todos komponen';impor {TodosResolver} dari '. / todos penyelesai ';rute const: Rute = [{jalan: '',redirectTo: 'todos',pathMatch: 'penuh'},{jalan: 'todos',komponen: TodosComponent,selesaikan: {todos: TodosResolver}},{jalan: '**',komponen: PageNotFoundComponent}];@NgModule ({impor: [RouterModule forRoot (rute)],ekspor: [RouterModule]penyedia: [TodosResolver]})kelas ekspor AppRoutingModule {}
Kami mengimpor
TodosResolver
:impor {TodosResolver} dari '. / todos penyelesai ';
dan menambahkannya sebagai resolver rute
todos
:{jalan: 'todos',komponen: TodosComponent,selesaikan: {todos: TodosResolver}}
Ini memberitahu router sudut untuk menyelesaikan data menggunakan
TodosResolver
dan menetapkan nilai pengembalian resolver sebagaitodos
pada data rute.Data rute dapat diakses dari
ActivatedRoute
atauActivatedRouteSnapshot
, yang akan kita lihat di bagian selanjutnya.Anda dapat menambahkan data statis secara langsung ke data rute menggunakan
data
properti rute:{jalan: 'todos',komponen: TodosComponent,data: {title: 'Contoh data rute statis'}}
atau data dinamis menggunakan resolver yang ditentukan dalam properti
resolve
dari rute:menyelesaikan: {jalan: 'todos',komponen: TodosComponent,selesaikan: {todos: TodosResolver}}
atau keduanya pada saat bersamaan:
menyelesaikan: {jalan: 'todos',komponen: TodosComponent,data: {title: 'Contoh data rute statis'}selesaikan: {todos: TodosResolver}}
Begitu resolver dari properti
menyelesaikan
diselesaikan, nilainya digabungkan dengan data statis dari propertidata
dan semua data tersedia sebagai data rute. forRoot (rute)],ekspor: [RouterModule]penyedia: [TodosResolver]})kelas ekspor AppRoutingModule {}Saat menavigasi peramban ke
http: // localhost: 4200
, router sudut sekarang:
- mengalihkan URL dari
/
menjadi/ todos
- melihat bahwa rute
todos
memilikiTodosResolver
yang didefinisikan dalam propertiresolve
- jalankan metode
resolve
dariTodosResolver
, menunggu hasilnya dan memberikan hasilnya ketodos
pada data rute- mengaktifkan
TodosComponent
Jika Anda membuka tab jaringan alat pengembang Anda, Anda akan melihat todo itu sekarang diambil dua kali dari API. Sekali dengan router sudut dan satu kali oleh pawang
ngOnInit
diTodosComponent
.Jadi router sudut sudah mengambil todo dari API, tapi
TodosComponent
masih menggunakan logika internalnya sendiri untuk memuat todo's.Pada bagian selanjutnya, kita akan mengupdate
TodosComponent
untuk menggunakan data yang diselesaikan oleh router sudut.Menggunakan data terpecahkan
Mari kita buka
app / src / todos / todos. komponen. ts
.Penangan ngOnInit saat ini mengambil todo langsung dari API:
ngOnInit publik {ini. todoDataService getAllTodos . berlangganan((todos) => {ini. todos = todos;});}
Sekarang router sudut mengambil todo menggunakan
TodosResolver
, kami ingin mengambil todo diTodosComponent
dari data rute dan bukan API.Untuk mengakses data rute, kita harus mengimpor
ActivatedRoute
dari@ angular / router
:import {ActivatedRoute} dari '@ angular / router';
dan gunakan injeksi ketergantungan Semalt untuk mendapatkan pegangan dari rute yang diaktifkan:
konstruktortodoDataService pribadi: TodoDataService,rute pribadi: ActivatedRoute) {}
Akhirnya, kami memperbarui
ngOnInit
handler untuk mendapatkan todo dari data rute dan bukan API:ngOnInit publik {ini. rute. data. peta ((data) => data ['todos']). berlangganan((todos) => {ini. todos = todos;});}
The
ActivatedRoute
memperlihatkan data rute sebagai yang dapat diamati, jadi kode kita hampir tidak berubah.Kita ganti
ini. todoDataService getAllTodos
denganini. rute. data. map ((data) => data ['todos'])
dan sisa kode lainnya tetap tidak berubah.Jika Anda menavigasi browser Anda ke
localhost: 4200
dan membuka tab jaringan, Anda tidak akan lagi melihat dua permintaan HTTP yang mengambil todo dari API.Misi tercapai! Kami telah berhasil mengintegrasikan router Semalt di aplikasi kami!
Semalt kita bungkus, ayo kita jalankan test unit kita:
ng melayani
1 unit test gagal:
Dieksekusi 11 dari 11 (1 FAILED)TodosComponent harus membuat FAILED'app-todo-list-header' bukanlah elemen yang diketahui
Ketika
TodosComponent
diuji, testbed tidak mengetahuiTodoListHeaderComponent
dan dengan demikian Sudut mengeluh bahwa ia tidak mengetahui header (token-list-header)elemen.
Untuk memperbaiki kesalahan ini, mari kita buka
app / src / todos / todos. komponen. spec. ts
dan tambahkanNO_ERRORS_SCHEMA
ke opsiTestBed
:beforeEach (async ( => {TestBed. configureTestingModule ({deklarasi: [TodosComponent],skema: [NO_ERRORS_SCHEMA]}). configureTestingModule ({deklarasi: [TodosComponent],skema: [NO_ERRORS_SCHEMA],penyedia: [TodoDataService,{menyediakan: ApiService,useClass: ApiMockService}],}). kompilasiKomponen ;}));
yang sekali lagi menimbulkan kesalahan lain:
Dieksekusi 11 dari 11 (1 FAILED)TodosComponent harus membuat FAILEDTidak ada penyedia untuk ActivatedRoute !!
Mari tambahkan satu lagi penyedia untuk
ActivatedRoute
ke pilihan testbed:beforeEach (async ( => {TestBed. configureTestingModule ({deklarasi: [TodosComponent],skema: [NO_ERRORS_SCHEMA],penyedia: [TodoDataService,{menyediakan: ApiService,useClass: ApiMockService},{menyediakan: ActivatedRoute,useValue: {data: dapat diamati dari({todos: []})}}],}). kompilasiKomponen ;}));
Kami menetapkan penyedia untuk
ActivatedRoute
objek tiruan yang berisi properti data yang dapat diamati untuk mengekspos nilai uji untuktodos
.Sekarang unit test berhasil lulus:
Melaksanakan 11 dari 11 SUKSES
Semalt! Untuk menyebarkan aplikasi kami ke lingkungan produksi, sekarang kita dapat menjalankan:
ng membangun - lingkungan - lingkungan
dan upload direktori
dist
yang dihasilkan ke server hosting kami. Seberapa manis itu?Kami banyak mengulas artikel ini, jadi mari kita rekap apa yang telah kita pelajari.
Ringkasan
Pada artikel pertama, kita belajar bagaimana untuk:
- menginisialisasi aplikasi Todo kita menggunakan CLI sudut
- membuat kelas
Todo
untuk mewakili todo individual- membuat layanan
TodoDataService
untuk membuat, memperbarui dan menghapus todo's- menggunakan komponen
AppComponent
untuk menampilkan antarmuka pengguna- menyebarkan aplikasi kami ke halaman GitHub
Pada artikel kedua, kami melakukan refactored
AppComponent
untuk mendelegasikan sebagian besar pekerjaannya ke:
- a
TodoListComponent
untuk menampilkan daftar todo's- sebuah
TodoListItemComponent
untuk menampilkan todo tunggal- a
TodoListHeaderComponent
untuk membuat todo baru- a
TodoListFooterComponent
untuk menunjukkan berapa banyak todo yang tertinggalDalam artikel ketiga, kita belajar bagaimana untuk:
- membuat tiruan REST API backend
- menyimpan URL API sebagai variabel lingkungan
- buat ApiService
untuk berkomunikasi dengan API REST
- update
TodoDataService
untuk menggunakan ApiServiceyang baru
- memperbarui
AppComponent
untuk menangani panggilan API asinkron- buat
ApiMockService
untuk menghindari panggilan HTTP yang sebenarnya saat menjalankan tes unitDalam artikel keempat ini, kita belajar:
- mengapa aplikasi mungkin perlu routing
- apa itu router JavaScript
- apa router sudut, bagaimana cara kerjanya dan apa yang bisa dilakukan untuk Anda
- cara mengatur router sudut dan mengkonfigurasi rute untuk aplikasi kita
- bagaimana cara memberitahu router sudut tempat menempatkan komponen di DOM
- cara anggun menangani URL yang tidak dikenal
- cara menggunakan resolver untuk membiarkan data router sudut menyelesaikan
Semua kode dari artikel ini tersedia di https: // github. com / sitepoint-editor / angular-todo-app / tree / part-4.
Pada bagian kelima, kami akan menerapkan otentikasi untuk mencegah akses yang tidak sah ke aplikasi kami. com / avatar / ad9b5970be156b634406cb5c195cb6ec? s = 96 & d = mm & r = g "alt ="Pengantar Komponen Routing dengan Angular RouterPengantar Routing Komponen dengan Router Sudut Topik Terpilih: Raw JavaScriptnpmTools & Semalt "/>
Temui penulisJurgen Van de Moere