Back to Question Center
0

Pengantar Komponen Routing dengan Angular Router            Pengantar Routing Komponen dengan Router Sudut Topik Terpilih: Raw JavaScriptnpmTools & Semalt

1 answers:
Pengantar Komponen Routing dengan Angular Router

Artikel ini adalah bagian 4 Tutorial SitePoint Angular 2+ tentang cara membuat Aplikasi CRUD dengan CLI Sudut.


  1. Bagian 0 - Panduan Referensi CLI Ultimate Angular
  2. Bagian 1 - Mendapatkan versi pertama dari aplikasi Todo dan berjalan
  3. Bagian 2 - Membuat komponen terpisah untuk menampilkan daftar barang todo dan satu todo
  4. Bagian 3 - Update layanan Todo untuk berkomunikasi dengan REST API
  5. Bagian 4 - Gunakan router sudut untuk menyelesaikan data
  6. 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:

  1. memperbarui status aplikasi web saat perubahan URL browser
  2. 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:

  1. membuat konfigurasi routing yang mendefinisikan keadaan yang mungkin untuk aplikasi kita
  2. mengimpor konfigurasi routing ke dalam aplikasi kita
  3. 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 : aktifkan TodosPageComponent dan tampilkan daftar todo's
  • / todos / 1 : mengaktifkan TodoPageComponent dan menetapkan nilai : id parameter ke 1
  • / todos / 2 : aktifkan TodoPageComponent dan tetapkan nilai parameter : id ke 2

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 ke todos karena setiap URL dimulai dengan string kosong ' ditentukan dalam path .

Kami hanya ingin agar homepage kami dialihkan ke todos , jadi kami menambahkan pathMatch: '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:

  1. RouterModule. forRoot (routes) : membuat modul routing yang mencakup perutean router, konfigurasi rute dan layanan router
  2. RouterModule. forChild (routes) : membuat modul routing yang mencakup perutean router, konfigurasi rute namun tidak layanan router

RouterModule . 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 menggunakan RouterModule. forChild , Sudut akan tidak instantiate layanan router.

Oleh karena itu kita hanya bisa menggunakan RouterModule. forRoot sekali dan gunakan RouterModule. 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 properti ekspor :

   ekspor: [RouterModule]    

Hal ini memastikan bahwa kita tidak perlu mengimpor secara eksplisit RouterModule lagi di AppModule ketika AppModule mengimpor AppRoutingModule .

Karena kita memiliki AppRoutingModule , kita perlu mengimpornya di AppModule kita untuk mengaktifkannya.

Mengimpor konfigurasi routing

Untuk mengimpor konfigurasi routing kami ke dalam aplikasi kita, kita harus mengimpor AppRoutingModule ke AppModule utama kami .

Mari kita buka src / app / app. modul. ts dan tambahkan AppRoutingModule ke impor dalam metadata AppModule @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 memiliki RoutingModule yang terdaftar dalam properti ekspor , Angular akan mengimpor RoutingModule secara otomatis saat kita mengimpor AppRoutingModule 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 karena AppComponent terdaftar dalam properti bootstrap AppModule :

   @NgModule ({//. . 

Elemen memberitahu router sudut dimana ia dapat memberi instantiate komponen di DOM.

Jika Anda mengenal AngularJS 1. x router dan UI-Router, Anda dapat mempertimbangkan (74) alternatif sudut untuk ng-view dan ui-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 :

   

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:

        

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:

         

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:

  1. Buat PageNotFoundComponent (Anda dapat menamainya dengan cara yang berbeda jika Anda suka) untuk menampilkan pesan ramah yang tidak dapat ditemukan halaman yang diminta
  2. 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 sampai TodosComponent
  • kami menambahkan ke 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:

  1. Router sudut sesuai dengan todos URL
  2. Router sudut mengaktifkan TodosComponent
  3. Router sudut menempatkan TodosComponent di sebelah di DOM
  4. The TodosComponent ditampilkan di browser dengan array todo yang kosong
  5. todo itu diambil dari API di ngOnInit handler dari TodosComponent
  6. 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:

  1. Router sudut sesuai dengan todos URL
  2. Router sudut mengambil todo dari API
  3. Router sudut mengaktifkan TodosComponent
  4. Router sudut menempatkan TodosComponent di sebelah di DOM
  5. 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:

  1. buat TodosResolver yang mengambil todo dari API
  2. kirim Sudut router untuk menggunakan TodosResolver untuk mengambil todo saat mengaktifkan TodosComponent pada rute todos

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 metode resolve .

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 data

Kode untuk TodosResolver sangat ringkas karena kita sudah memiliki TodoDataService yang menangani semua komunikasi dengan API backend kita.

Kami menyuntikkan TodoDataService ke dalam konstruktor dan menggunakan metode getAllTodos untuk mengambil semua todo dalam metode resolve .

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 tambahkan TodosResolver ke rute todos :

   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 sebagai todos pada data rute.

Data rute dapat diakses dari ActivatedRoute atau ActivatedRouteSnapshot , 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 properti data 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:

  1. mengalihkan URL dari / menjadi / todos
  2. melihat bahwa rute todos memiliki TodosResolver yang didefinisikan dalam properti resolve
  3. jalankan metode resolve dari TodosResolver , menunggu hasilnya dan memberikan hasilnya ke todos pada data rute
  4. 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 di TodosComponent .

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 di TodosComponent 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 dengan ini. 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 mengetahui TodoListHeaderComponent 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 tambahkan NO_ERRORS_SCHEMA ke opsi TestBed :

   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 untuk todos .

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 tertinggal

Dalam 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 ApiService yang baru
  • memperbarui AppComponent untuk menangani panggilan API asinkron
  • buat ApiMockService untuk menghindari panggilan HTTP yang sebenarnya saat menjalankan tes unit

Dalam 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 penulis
Jurgen Van de Moere
Arsitek Front-End di Force - yang mengkhususkan diri pada JavaScript dan AngularJS. Pakar Pengembang di Google. Pesenam. Ayah. Pria keluarga Pencipta Angular Express.
Pengantar Komponen Routing dengan Angular RouterPengantar Routing Komponen dengan Router Sudut Topik Terpilih:
Raw JavaScriptnpmTools & Semalt
Kursus Online untuk Angular dan TypeScript
Motto Todd
kursus angularJS, Angular dan TypeScript yang dipimpin oleh ahli, untuk individu dan tim. Gunakan kode kupon 'SITEPOINT' saat checkout untuk mendapatkan diskon 25% Source .

March 1, 2018