Penghala Angular: Pengenalan kepada Routing Komponen

Ini adalah bahagian 4 dari Tutorial SitePoint Angular 2 mengenai cara membuat aplikasi CRUD dengan CLI sudut. Dalam artikel ini, kami akan memperkenalkan penghala sudut dan belajar bagaimana ia dapat mengemas kini aplikasi kami apabila URL penyemak imbas berubah dan sebaliknya. Kami juga akan belajar bagaimana kami boleh mengemas kini aplikasi kami untuk menyelesaikan data dari API back-end kami menggunakan penghala.

Di bahagian satu kita belajar bagaimana untuk mendapatkan aplikasi Todo kami dan menjalankan dan menyebarkannya ke halaman GitHub. Ini berfungsi dengan baik tetapi, malangnya, keseluruhan aplikasi telah dipenuhi dengan satu komponen.

Di bahagian dua kita mengkaji seni bina komponen yang lebih modular dan belajar bagaimana untuk memecahkan komponen tunggal ini ke dalam pokok berstruktur komponen yang lebih kecil yang lebih mudah difahami, digunakan semula dan diselenggara.

Dalam bahagian tiga kami mengemas kini permohonan kami untuk berkomunikasi dengan API REST back end menggunakan perkhidmatan HTTP RXJS dan Angular.

Bahagian 0 - Panduan Rujukan CLI Angular Ultimate
Bahagian 1 - Mendapatkan versi pertama kami aplikasi Todo Up and Running
Bahagian 2 - Mewujudkan komponen berasingan untuk memaparkan senarai todo dan satu todo
Bahagian 3 - Kemas kini perkhidmatan Todo untuk berkomunikasi dengan API REST
Bahagian 4 - Gunakan penghala sudut untuk menyelesaikan data
Bahagian 5 - Tambahkan pengesahan untuk melindungi kandungan peribadi
Bahagian 6 - Cara mengemas kini projek sudut ke versi terkini.

Jangan bimbang! Anda tidak perlu mengikuti bahagian satu, dua atau tiga tutorial ini, untuk empat masuk akal. Anda hanya boleh merebut salinan repo kami, memeriksa kod dari bahagian tiga, dan menggunakannya sebagai titik permulaan. Ini dijelaskan dengan lebih terperinci di bawah.

Takeaways Key

• Router sudut membolehkan penciptaan aplikasi halaman tunggal (SPA) dengan menguruskan peralihan negeri dan laluan navigasi di antara negara -negara aplikasi yang berlainan.
• Penghala mengendalikan perubahan URL pelayar dan mengemas kini keadaan aplikasi, yang membolehkan aplikasi bertindak secara dinamik kepada perubahan URL tanpa memuatkan halaman.
• Router sudut menyokong pemuatan malas, yang meningkatkan prestasi beban awal dengan memuatkan modul atas permintaan dan bukannya pada permulaan.
• Pengawal laluan dalam penghala sudut membantu melindungi laluan tertentu dengan mengawal akses berdasarkan pengesahan pengguna atau kriteria lain, memastikan bahawa hanya pengguna yang diberi kuasa dapat mengakses bahagian tertentu aplikasi.
Penghala boleh mengendalikan 404 ralat atau URL yang salah dengan menggunakan penghalaan Wildcard, yang mengalihkan pengguna ke halaman '404 tidak dijumpai' yang ditetapkan atau halaman sandaran lain apabila tiada laluan sepadan dengan URL.
Router sudut membolehkan lulus data antara laluan menggunakan parameter laluan, yang secara dinamik mempengaruhi kandungan atau tingkah laku komponen.
Isu penghalaan debugging difasilitasi oleh peristiwa penghala, yang memberikan maklumat terperinci mengenai proses penghalaan dan boleh dilog masuk untuk memahami dan menyelesaikan tingkah laku penghalaan.

dan berjalan

Pastikan anda mempunyai versi terkini CLI sudut yang dipasang. Jika anda tidak, anda boleh memasangnya dengan arahan berikut:

<span>npm install -g @angular/cli@latest
</span>

Jika anda perlu mengeluarkan versi sebelumnya CLI sudut, anda boleh melakukan ini:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Selepas itu, anda memerlukan salinan kod dari bahagian tiga. Ini boleh didapati di GitHub. Setiap artikel dalam siri ini mempunyai tag yang sepadan dalam repositori supaya anda dapat beralih ke antara negeri -negeri yang berlainan aplikasi.

Kod yang kita berakhir dengan bahagian tiga dan yang kita mulakan dengan artikel ini ditandakan sebagai bahagian-3. Kod yang kita tamatkan artikel ini dengan ditandakan sebagai bahagian 4.

Anda boleh memikirkan tag seperti alias kepada ID komit tertentu. Anda boleh bertukar di antara mereka menggunakan Git Checkout. Anda boleh membaca lebih lanjut mengenai perkara itu di sini.

jadi, untuk bangun dan berjalan (versi terkini CLI sudut dipasang) kami akan melakukan ini:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

kemudian lawati http: // localhost: 4200/. Sekiranya semuanya baik, anda harus melihat aplikasi Todo yang berfungsi.

rekap cepat

inilah yang kelihatan seperti seni bina aplikasi kami pada akhir Bahagian 3:

Dalam artikel ini kita akan:

• Ketahui mengapa aplikasi mungkin memerlukan penghalaan
• Ketahui Apa Router JavaScript
• Ketahui apa penghala sudut, bagaimana ia berfungsi dan apa yang boleh dilakukan untuk anda
• Sediakan penghala sudut dan konfigurasikan laluan untuk aplikasi kami
• Buat resolver untuk mengambil todos dari API REST kami
• Kemas kini permohonan kami untuk mengambil todo menggunakan resolver baru kami.

Pada akhir artikel ini, anda akan faham:

• bila dan mengapa permohonan anda mungkin memerlukan penghalaan
• perbezaan antara penghalaan pada pelayan dan penghalaan dalam penyemak imbas
• penghala sudut apa dan apa yang boleh dilakukan untuk aplikasi anda
• bagaimana untuk menyediakan penghala sudut
• bagaimana untuk mengkonfigurasi laluan untuk aplikasi anda
• bagaimana untuk memberitahu penghala sudut di mana untuk meletakkan komponen di dom
• bagaimana untuk mengendalikan url yang tidak diketahui dengan anggun
• apa resolver dan apa yang boleh digunakan untuk
• cara menggunakan resolver untuk menyelesaikan data menggunakan penghala sudut.

Jadi, mari kita mulakan!

mengapa routing?

Dalam keadaan semasa, aplikasi web kami tidak mengambil url penyemak imbas.

Kami mengakses permohonan kami melalui satu URL seperti http: // localhost: 4200 dan permohonan kami tidak mengetahui apa -apa URL lain seperti http: // localhost: 4200/todos.

Kebanyakan aplikasi web perlu menyokong URL yang berbeza untuk menavigasi pengguna ke halaman yang berbeza dalam aplikasi. Di sinilah penghala masuk.

Di laman web tradisional, penghalaan dikendalikan oleh penghala di pelayan:

1. Pengguna mengklik pautan dalam penyemak imbas, menyebabkan URL berubah
2. Penyemak imbas menghantar permintaan HTTP ke pelayan
3. Pelayan membaca URL dari permintaan HTTP dan menghasilkan respons HTTP yang sesuai
4. Pelayan menghantar respons HTTP kepada penyemak imbas.

Dalam aplikasi web JavaScript moden, penghalaan sering dikendalikan oleh penghala JavaScript dalam penyemak imbas.

Apakah penghala JavaScript?

Pada dasarnya, penghala JavaScript melakukan dua perkara:

1. Kemas kini keadaan aplikasi web apabila URL penyemak imbas berubah
2. Kemas kini URL penyemak imbas apabila keadaan aplikasi web berubah.

router JavaScript membolehkan kita membangunkan aplikasi satu halaman (SPA).

Spa adalah aplikasi web yang menyediakan pengalaman pengguna yang serupa dengan aplikasi desktop. Di spa, semua komunikasi dengan hujung belakang berlaku di belakang tabir.

Apabila pengguna menavigasi dari satu halaman ke halaman yang lain, halaman tersebut dikemas kini secara dinamik tanpa tambah nilai, walaupun URL berubah.

Terdapat banyak pelaksanaan router JavaScript yang berbeza.

Sesetengah daripada mereka ditulis secara khusus untuk rangka kerja JavaScript tertentu seperti sudut, ember, react, vue.js dan aurelia, dan lain -lain. Pelaksanaan lain dibina untuk tujuan generik dan tidak terikat dengan rangka kerja tertentu.

Apa itu penghala sudut?

Angular Router adalah perpustakaan penghalaan sudut rasmi, ditulis dan diselenggarakan oleh pasukan teras sudut.

Ia adalah pelaksanaan router JavaScript yang direka untuk bekerja dengan Angular dan dibungkus sebagai @angular/router.

Pertama sekali, penghala sudut menjaga tugas penghala JavaScript:

• Ia mengaktifkan semua komponen sudut yang diperlukan untuk menyusun halaman apabila pengguna menavigasi ke URL tertentu
• ia membolehkan pengguna menavigasi dari satu halaman ke halaman yang lain tanpa halaman tambah nilai
• Ia mengemas kini sejarah penyemak imbas supaya pengguna boleh menggunakan butang belakang dan ke hadapan apabila menavigasi ke belakang antara halaman.

Di samping itu, penghala sudut membolehkan kita:

• mengalihkan url ke url lain
menyelesaikan data sebelum halaman dipaparkan
Jalankan skrip apabila halaman diaktifkan atau dinyahaktifkan
bahagian beban malas permohonan kami.

Dalam artikel ini, kita akan belajar bagaimana untuk menubuhkan dan mengkonfigurasi penghala sudut, bagaimana untuk mengalihkan URL dan cara menggunakan penghala sudut untuk menyelesaikan todos dari API back-end kami.

Dalam artikel seterusnya, kami akan menambah pengesahan ke aplikasi kami dan menggunakan penghala untuk memastikan beberapa halaman hanya boleh diakses apabila pengguna ditandatangani.

bagaimana penghala sudut berfungsi

Sebelum kita menyelam ke dalam kod, penting untuk memahami bagaimana router sudut beroperasi dan istilah yang diperkenalkan.

Apabila pengguna menavigasi ke halaman, Router Angular melakukan langkah -langkah berikut mengikut urutan:

ia membaca URL penyemak imbas pengguna ingin menavigasi ke
ia menggunakan redirect url (jika seseorang ditakrifkan)
ia memaparkan keadaan penghala yang sepadan dengan url
ia menjalankan pengawal yang ditakrifkan dalam keadaan penghala
Ia menyelesaikan data yang diperlukan untuk keadaan penghala
ia mengaktifkan komponen sudut untuk memaparkan halaman
ia menguruskan navigasi dan mengulangi langkah -langkah di atas apabila halaman baru diminta.

untuk menyelesaikan tugasnya, penghala sudut memperkenalkan terma dan konsep berikut:

• Perkhidmatan Router: Perkhidmatan Router Global Sudut dalam Aplikasi kami
• Konfigurasi Router: Definisi semua kemungkinan penghala menyatakan permohonan kami boleh di
• Router State: Keadaan penghala pada satu ketika, dinyatakan sebagai pokok snapshot laluan aktif
• snapshot laluan yang diaktifkan: Menyediakan akses kepada URL, parameter, dan data untuk nod keadaan penghala
• pengawal: skrip yang berjalan apabila laluan dimuatkan, diaktifkan atau dinyahaktifkan
• resolver: skrip yang mengambil data sebelum halaman yang diminta diaktifkan
• outlet router: Lokasi di dom di mana penghala sudut boleh meletakkan komponen diaktifkan.

Jangan risau jika istilah itu sangat menggembirakan. Anda akan terbiasa dengan istilah seperti yang kita menangani secara beransur -ansur dalam siri ini dan apabila anda mendapat lebih banyak pengalaman dengan penghala sudut.

Aplikasi sudut yang menggunakan penghala sudut hanya mempunyai satu contoh perkhidmatan router: ia adalah singleton. Setiap kali dan di mana sahaja anda menyuntik perkhidmatan penghala dalam aplikasi anda, anda akan mendapat akses kepada contoh perkhidmatan penghala sudut yang sama.

Untuk melihat proses penghalaan sudut yang lebih mendalam, pastikan untuk menyemak proses penghalaan 7-langkah navigasi penghala sudut.

Mengaktifkan Routing

Untuk membolehkan penghalaan dalam aplikasi sudut kita, kita perlu melakukan tiga perkara:

1. Buat konfigurasi penghalaan yang mentakrifkan keadaan yang mungkin untuk aplikasi kami
2. mengimport konfigurasi penghalaan ke dalam aplikasi kami
3. tambahkan saluran keluar penghala untuk memberitahu penghala sudut di mana untuk meletakkan komponen yang diaktifkan di dom.

Jadi mari kita mulakan dengan membuat konfigurasi penghalaan.

Membuat Konfigurasi Routing

Untuk membuat konfigurasi penghalaan kami, kami memerlukan senarai URL yang kami ingin permohonan kami untuk menyokong.

Pada masa ini, aplikasi kami sangat mudah dan hanya mempunyai satu halaman yang menunjukkan senarai todos:

• /: Tunjukkan senarai todos

yang akan menunjukkan senarai todos sebagai halaman utama aplikasi kami.

Walau bagaimanapun, apabila penanda buku pengguna / dalam penyemak imbas mereka untuk berunding Todos.

jadi mari kita berikan senarai todo kami sendiri dan mengalihkan halaman rumah kami kepadanya:

/: redirect ke /todos
/todos: Tunjukkan senarai todos.

Ini memberikan kita dua faedah:

• Apabila pengguna menanda halaman Todos, penyemak imbas mereka akan bookmark /todos bukannya /, yang akan terus berfungsi seperti yang diharapkan, walaupun kita menukar kandungan halaman rumah
• kini dapat dengan mudah mengubah halaman rumah kami dengan mengalihkannya ke mana -mana URL yang kami suka, yang mudah jika anda perlu menukar kandungan laman utama anda.

Panduan gaya sudut rasmi mengesyorkan menyimpan konfigurasi penghalaan untuk modul sudut dalam fail dengan nama fail yang berakhir di -routing.module.ts yang mengeksport modul sudut berasingan dengan nama yang berakhir di routingmodule.

Modul semasa kami dipanggil AppModule, jadi kami membuat fail src/app/app-routing.module.ts dan mengeksport konfigurasi penghalaan kami sebagai modul sudut yang dipanggil approutingmodule:

<span>npm install -g @angular/cli@latest
</span>

pertama kita mengimport routermodule dan laluan dari @angular/router:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Seterusnya, kami menentukan laluan pembolehubah laluan jenis dan memberikannya konfigurasi penghala kami:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

Jenis laluan adalah pilihan dan membolehkan IDE dengan sokongan TypeScript atau pengkompil TypeScript dengan mudah mengesahkan konfigurasi laluan anda semasa pembangunan.

Konfigurasi penghala mewakili semua kemungkinan penghala menyatakan permohonan kami boleh masuk.

Ia adalah pokok laluan, yang ditakrifkan sebagai array JavaScript, di mana setiap laluan boleh mempunyai sifat berikut:

jalur: rentetan, jalan untuk dipadankan dengan url
pathmatch: rentetan, bagaimana untuk memadankan url
Komponen: Rujukan Kelas, Komponen untuk diaktifkan apabila laluan ini diaktifkan
redirectto: rentetan, url untuk mengarahkan ke arah ketika laluan ini diaktifkan
data: data statik untuk diberikan ke laluan
menyelesaikan: data dinamik untuk menyelesaikan dan bergabung dengan data apabila diselesaikan
Kanak -kanak: Laluan Kanak -kanak.
Aplikasi kami adalah mudah dan hanya mengandungi dua laluan saudara, tetapi aplikasi yang lebih besar boleh mempunyai konfigurasi penghala dengan laluan kanak -kanak seperti:

di sini, Todos mempunyai dua laluan kanak -kanak dan: ID adalah parameter laluan, membolehkan penghala mengenali URL berikut:

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

/: Laman Utama, Redirect ke /Todos

• /todos: Aktifkan todospagecomponent dan tunjukkan senarai todos
• /todos/1: Aktifkan todopagecomponent dan tetapkan nilai: parameter ID hingga 1
• /todos/2: Aktifkan todopagecomponent dan tetapkan nilai: parameter ID ke 2.
Perhatikan bagaimana kita menentukan Pathmatch: 'penuh' apabila menentukan redirect.

penghala sudut mempunyai dua strategi yang sepadan:

awalan: lalai, sepadan apabila URL bermula dengan nilai jalan

• penuh: Padankan apabila URL sama dengan nilai jalan.
kita boleh membuat laluan berikut:

Dalam kes ini, penghala sudut menggunakan strategi pencocokan jalur awalan lalai dan setiap URL diarahkan ke Todos kerana setiap URL bermula dengan rentetan kosong '' yang dinyatakan dalam Laluan.

Kami hanya mahu halaman rumah kami diarahkan ke Todos, jadi kami menambah Pathmatch: 'Penuh' untuk memastikan bahawa hanya URL yang sama dengan rentetan kosong '' dipadankan:

<span>npm install -g @angular/cli@latest
</span>

Untuk mengetahui lebih lanjut mengenai pilihan konfigurasi penghalaan yang berbeza, lihat dokumentasi sudut rasmi mengenai penghalaan dan navigasi.

Akhirnya, kami membuat dan mengeksport modul sudut ApploutingModule:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Terdapat dua cara untuk membuat modul penghalaan:

1. routerModule.forroot (Laluan): Mewujudkan modul penghalaan yang merangkumi arahan penghala, konfigurasi laluan dan perkhidmatan penghala
2. routerModule.forchild (Laluan): Mewujudkan modul penghalaan yang merangkumi arahan penghala, konfigurasi laluan tetapi bukan perkhidmatan penghala.

kaedah routerModule.forchild () diperlukan apabila aplikasi anda mempunyai banyak modul penghalaan.

ingat bahawa perkhidmatan penghala menjaga penyegerakan antara keadaan permohonan kami dan URL penyemak imbas. Institsiating pelbagai perkhidmatan penghala yang berinteraksi dengan URL penyemak imbas yang sama akan membawa kepada isu -isu, jadi penting bahawa hanya ada satu contoh perkhidmatan penghala dalam aplikasi kami, tidak kira berapa banyak modul penghalaan yang kami import dalam permohonan kami.

Apabila kita mengimport modul penghalaan yang dibuat menggunakan routerModule.forroot (), sudut akan memberi instantiate perkhidmatan penghala. Apabila kita mengimport modul penghalaan yang dibuat menggunakan routerModule.forchild (), Angular tidak akan meniru perkhidmatan penghala.

Oleh itu, kita hanya boleh menggunakan routerModule.forroot () sekali dan gunakan routerModule.forchild () beberapa kali untuk modul penghalaan tambahan.

Kerana aplikasi kami hanya mempunyai satu modul penghalaan, kami menggunakan routerModule.forroot ():

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

Di samping itu, kami juga menentukan routerModule dalam harta eksport:

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

Ini memastikan bahawa kita tidak perlu mengimport routerModule secara eksplisit sekali lagi dalam AppModule apabila AppModule mengimport ApploutingModule.

Sekarang kita mempunyai approutingmodule kita, kita perlu mengimportnya dalam appmodule kita untuk membolehkannya.

mengimport konfigurasi penghalaan

Untuk mengimport konfigurasi penghalaan kami ke dalam permohonan kami, kami mesti mengimport ApploutingModule ke dalam appModule utama kami.

mari kita buka src/app/app.module.ts dan tambah approutingmodule ke array import dalam metadata @ngmodule AppModule:

<span>import { RouterModule, Routes } from '@angular/router';
</span>

Oleh kerana ApploutingModule mempunyai routingmodule yang disenaraikan dalam harta eksportnya, Angular akan mengimport routingmodule secara automatik apabila kami mengimport ApploutingModule, jadi kami tidak perlu mengimport routermodule secara eksplisit sekali lagi (walaupun berbuat demikian tidak akan menyebabkan sebarang bahaya).

Sebelum kita dapat mencuba perubahan dalam penyemak imbas, kita perlu melengkapkan langkah ketiga dan terakhir.

Menambah Outlet Router

Walaupun aplikasi kami kini mempunyai konfigurasi penghalaan, kita masih perlu memberitahu penghala sudut di mana ia boleh meletakkan komponen instantiated di dom.

Apabila aplikasi kami bootstrapped, angular instantiates AppComponent kerana AppComponent disenaraikan dalam harta bootstrap AppModule:

<span>npm install -g @angular/cli@latest
</span>

Untuk memberitahu Router Angular di mana ia boleh meletakkan komponen, kita mesti menambah elemen untuk templat HTML AppComponent.

elemen memberitahu penghala sudut di mana ia dapat memberi instantiasi komponen di dom.

Jika anda biasa angularjs 1.x penghala dan ui-router, anda boleh mempertimbangkan alternatif sudut untuk NG-View dan U-View.

tanpa elemen elemen, penghala sudut tidak akan tahu di mana untuk meletakkan komponen dan hanya HTML AppComponent sendiri akan diberikan.

AppComponent kini memaparkan senarai todos.

Tetapi bukannya membiarkan AppComponent memaparkan senarai todos, kami kini mahu aplikasi komponen untuk mengandungi dan memberitahu penghala sudut untuk memberi instantiasi komponen lain di dalam aplikasi aplikasi untuk memaparkan senarai todos.

untuk mencapai itu, mari kita menghasilkan komponen komponen baru menggunakan CLI sudut:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

mari kita juga memindahkan semua HTML dari src/app/app.component.html ke src/app/todos/todos.component.html:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

mari kita juga memindahkan semua logik dari src/app/app.component.ts ke src/app/todos/todos.component.ts:

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

Sekarang kita boleh menggantikan templat AppComponent di SRC/APP/app.component.html dengan:

<span>import { RouterModule, Routes } from '@angular/router';
</span>

Kami juga boleh mengeluarkan semua kod usang dari kelas AppComponent dalam SRC/APP/APP.Component.ts:

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>

Akhirnya, kami mengemas kini laluan TODOS kami di SRC/APP/APP-ROUTING.MODULE.TS untuk memberi instantiate todoscomponent dan bukannya AppComponent:

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    children<span>: [
</span>      <span>{
</span>        path<span>: '',
</span>        component<span>: 'TodosPageComponent'
</span>      <span>},
</span>      <span>{
</span>        path<span>: ':id',
</span>        component<span>: 'TodoPageComponent'
</span>      <span>}
</span>    <span>]
</span>  <span>}
</span><span>];
</span>

Sekarang, apabila aplikasi kami bootstrapped, angular instantiates AppComponent dan mendapati di mana penghala sudut dapat memberi instantiate dan mengaktifkan komponen.

mari kita cuba perubahan kami dalam penyemak imbas.

Mulakan pelayan pembangunan anda dan API back-end anda dengan menjalankan:

<span>// no pathMatch specified, so Angular Router applies
</span><span>// the default `prefix` pathMatch
</span><span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos'
</span><span>}
</span>

kemudian menavigasi penyemak imbas anda ke http: // localhost: 4200.

Router sudut membaca konfigurasi penghala dan secara automatik mengalihkan pelayar kami ke http: // localhost: 4200/todos.

Jika anda memeriksa unsur-unsur di halaman, anda akan melihat bahawa todoscomponent tidak diberikan di dalam , tetapi betul-betul di sebelahnya:

<span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos',
</span>  pathMatch<span>: 'full'
</span><span>}
</span>

Permohonan kami kini telah diaktifkan. Awesome!

Menambah Laluan Wildcard

Apabila anda menavigasi penyemak imbas anda ke http: // localhost: 4200/unmatched-url, dan anda membuka alat pemaju penyemak imbas anda, anda akan melihat bahawa router sudut log ralat berikut ke konsol:

<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

untuk mengendalikan URL yang tidak dapat ditandingi dengan anggun kita perlu melakukan dua perkara:

1. Buat PagenotFoundComponent (anda boleh menamakannya secara berbeza jika anda suka) untuk memaparkan mesej mesra bahawa halaman yang diminta tidak dapat dijumpai
2. Beritahu Router Angular untuk menunjukkan PagenotFoundComponent apabila tiada laluan sepadan dengan url yang diminta.

mari kita mulakan dengan menghasilkan PagenotFoundComponent menggunakan CLI sudut:

<span>npm install -g @angular/cli@latest
</span>

kemudian mengedit templatnya dalam src/app/page-not-found/page-not-found.component.html:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Seterusnya, kami menambah laluan wildcard menggunakan ** sebagai jalan:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

** sepadan dengan mana -mana URL, termasuk laluan kanak -kanak.

Sekarang, jika anda menavigasi penyemak imbas anda ke http: // localhost: 4200/unmatched-url, pagenotfoundcomponent dipaparkan.

Perhatikan bahawa laluan wildcard mestilah laluan terakhir dalam konfigurasi penghalaan kami untuk berfungsi seperti yang diharapkan.

Apabila penghala sudut sepadan dengan url permintaan ke konfigurasi penghala, ia berhenti pemprosesan sebaik sahaja ia mendapati perlawanan pertama.

jadi jika kita menukar urutan laluan ke ini:

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

maka Todos tidak akan pernah dicapai dan PagenotFoundComponent akan dipaparkan kerana laluan Wildcard akan dipadankan terlebih dahulu.

kami telah melakukan banyak perkara, jadi mari cepat rekap apa yang telah kami capai setakat ini:

• kami menyediakan penghala sudut
• kami membuat konfigurasi penghalaan untuk aplikasi kami
• kami refactored AppComponent ke TodosComponent
• kami menambah ke Templat AppComponent
• kami menambah laluan wildcard untuk mengendalikan URL yang tidak dapat ditandingi dengan anggun.

Seterusnya, kami akan membuat resolver untuk mengambil todos sedia ada dari API back-end kami menggunakan penghala sudut.

menyelesaikan data menggunakan penghala sudut

Di bahagian 3 siri ini kita sudah belajar bagaimana untuk mengambil data dari API back-end kami menggunakan perkhidmatan HTTP sudut.

Pada masa ini, ketika kami menavigasi penyemak imbas kami ke URL Todos, yang berikut berlaku:

1. penghala sudut sepadan dengan url todos
2. penghala sudut mengaktifkan todoscomponent
3. Router sudut meletakkan todoskomen di sebelah di dom
4. Todoscomponent dipaparkan dalam penyemak imbas dengan todos kosong
5. Todos diambil dari API dalam pengendali ngoninit thetodoscomponent
6. Todoscomponent dikemas kini dalam penyemak imbas dengan todos yang diambil dari API.

Jika memuatkan todos dalam langkah 5 mengambil masa tiga saat, pengguna akan dibentangkan dengan senarai todo kosong selama tiga saat sebelum todo sebenar dipaparkan pada langkah 6.

Jika todoscomponent mempunyai HTML berikut dalam templatnya:

<span>import { RouterModule, Routes } from '@angular/router';
</span>

maka pengguna akan melihat mesej ini selama tiga saat sebelum todo sebenar dipaparkan, yang dapat menyesatkan pengguna dan menyebabkan pengguna menavigasi sebelum data sebenar masuk.

kita boleh menambah loader ke todoscomponent yang menunjukkan pemutar sementara data sedang dimuatkan, tetapi kadang-kadang kita mungkin tidak mempunyai kawalan ke atas komponen sebenar, contohnya apabila kita menggunakan komponen pihak ketiga.

Untuk memperbaiki tingkah laku yang tidak diingini ini, kita memerlukan perkara berikut yang akan berlaku:

1. penghala sudut sepadan dengan url todos
2. penghala sudut mengambil todos dari API
3. penghala sudut mengaktifkan todoscomponent
4. Router sudut meletakkan todoskomen di sebelah di dom
5. Todoscomponent dipaparkan dalam penyemak imbas dengan todos yang diambil dari API.

di sini, todoscomponent tidak dipaparkan sehingga data dari hujung belakang API kami tersedia.

itu betul -betul apa yang boleh dilakukan oleh resolver untuk kita.

Untuk membiarkan penghala sudut menyelesaikan todos sebelum mengaktifkan todoskompon, kita mesti melakukan dua perkara:

1. Buat Todosresolver yang mengambil Todos dari API
2. Beritahu Router Angular untuk menggunakan Todosresolver untuk mengambil Todos apabila mengaktifkan Todoscomponent dalam Laluan Todos.

dengan melampirkan resolver ke laluan Todos, kami meminta penghala sudut untuk menyelesaikan data terlebih dahulu, sebelum todoscomponent diaktifkan.

jadi mari kita buat resolver untuk mengambil todos kita.

Membuat Todosresolver

sudut CLI tidak mempunyai arahan untuk menghasilkan resolver, jadi mari buat fail baru src/todos.resolver.ts secara manual dan tambahkan kod berikut:

<span>npm install -g @angular/cli@latest
</span>

Kami mentakrifkan resolver sebagai kelas yang melaksanakan antara muka penyelesaian.

Antara muka Resolve adalah pilihan, tetapi membolehkan IDE atau pengkompil TypeScript kami memastikan bahawa kami melaksanakan kelas dengan betul dengan menghendaki kami melaksanakan kaedah penyelesaian (). Apabila penghala sudut perlu menyelesaikan data menggunakan resolver, ia memanggil kaedah resolver () resolver dan mengharapkan kaedah penyelesaian () untuk mengembalikan nilai, janji, atau yang dapat dilihat. Jika kaedah penyelesaian () mengembalikan janji atau penghala sudut yang dapat dilihat akan menunggu janji atau dapat dilihat sebelum ia mengaktifkan komponen laluan.

Apabila memanggil kaedah penyelesaian (), penghala sudut dengan mudah dilalui dalam snapshot laluan yang diaktifkan dan snapshot negeri penghala untuk memberi kami akses kepada data (seperti parameter laluan atau parameter pertanyaan), kami mungkin perlu menyelesaikan data.

Kod untuk Todosresolver sangat ringkas kerana kita sudah mempunyai tododataService yang mengendalikan semua komunikasi dengan akhir API kami.

kami menyuntik tododataService dalam pembina dan menggunakan kaedah getAllTodos () untuk mengambil semua todo dalam kaedah penyelesaian ().

Kaedah penyelesaian mengembalikan jenis todo [], jadi penghala sudut akan menunggu yang dapat dilihat untuk diselesaikan sebelum komponen laluan diaktifkan.

Sekarang kita mempunyai resolver kita, mari kita konfigurasi penghala sudut untuk menggunakannya.

menyelesaikan todos melalui penghala

Untuk membuat penghala sudut menggunakan resolver, kita mesti melampirkannya ke laluan dalam konfigurasi laluan kami.

mari kita buka src/app-routing.module.ts dan tambahkan todosresolver kami ke laluan Todos:

<span>npm install -g @angular/cli@latest
</span>

Kami mengimport TODOSRESOLVER:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

juga menambahnya sebagai resolver laluan Todos:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

Ini memberitahu Router Angular untuk menyelesaikan data menggunakan Todosresolver dan menetapkan nilai pulangan Resolver sebagai todo dalam data laluan.

Data laluan boleh diakses dari ActivatedRoute atau ActiveedRoutesNapshot, yang akan kita lihat di bahagian seterusnya.

anda boleh menambah data statik terus ke data laluan menggunakan harta data laluan:

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

anda juga boleh menambah data dinamik menggunakan resolver yang dinyatakan dalam harta menyelesaikan laluan:

<span>import { RouterModule, Routes } from '@angular/router';
</span>

anda juga boleh melakukan kedua -duanya pada masa yang sama:

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>

Sebaik sahaja penentu dari harta penyelesaian diselesaikan, nilai mereka digabungkan dengan data statik dari harta data dan semua data disediakan sebagai data laluan.

Router Angular menggunakan suntikan ketergantungan sudut untuk mengakses resolver, jadi kami perlu memastikan kami mendaftarkan Todosresolver dengan sistem suntikan pergantungan Angular dengan menambahkannya kepada harta penyedia dalam metadata @ngmodule:

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    children<span>: [
</span>      <span>{
</span>        path<span>: '',
</span>        component<span>: 'TodosPageComponent'
</span>      <span>},
</span>      <span>{
</span>        path<span>: ':id',
</span>        component<span>: 'TodoPageComponent'
</span>      <span>}
</span>    <span>]
</span>  <span>}
</span><span>];
</span>

Apabila anda menavigasi penyemak imbas anda ke http: // localhost: 4200, penghala sudut sekarang:

mengalihkan URL dari / ke / todos
melihat bahawa laluan Todos mempunyai todosresolver yang ditakrifkan dalam harta penyelesaiannya
menjalankan kaedah penyelesaian () dari Todosresolver, menunggu hasilnya dan memberikan hasil kepada Todos dalam data laluan
mengaktifkan todoscomponent.

Jika anda membuka tab rangkaian alat pemaju anda, anda akan melihat bahawa todos kini diambil dua kali dari API. Sekali dengan penghala sudut dan sekali oleh pengendali ngoninit di todoscomponent.

jadi penghala sudut sudah mengambil todos dari API, tetapi todoscomponent masih menggunakan logik dalamannya sendiri untuk memuatkan todos.

Di bahagian seterusnya, kami akan mengemas kini komponen untuk menggunakan data yang diselesaikan oleh penghala sudut.

menggunakan data yang diselesaikan

mari kita buka app/src/todos/todos.component.ts.

pengendali ngoninit () kini mengambil todos secara langsung dari API:

<span>// no pathMatch specified, so Angular Router applies
</span><span>// the default `prefix` pathMatch
</span><span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos'
</span><span>}
</span>

Sekarang router sudut mengambil todos menggunakan todosresolver, kami mahu mengambil todos dalam todoskompon dari data laluan dan bukannya API.

Untuk mengakses data laluan, kita mesti mengimport ActiveedRoute dari @angular/router:

dan gunakan suntikan ketergantungan sudut untuk mendapatkan pengendalian laluan yang diaktifkan:

<span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos',
</span>  pathMatch<span>: 'full'
</span><span>}
</span>

Akhirnya, kami mengemas kini pengendali Ngoninit () untuk mendapatkan todos dari data laluan dan bukan API:

<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

The ActivatedRoute mendedahkan data laluan sebagai yang dapat dilihat, jadi kod kami hampir tidak berubah.

imports<span>: [RouterModule.forRoot(routes)]
</span>

kami menggantikan this.tododataService.getAllTodos () dengan this.route.data.map ((data) => data ['todos']) dan semua kod lain tetap tidak berubah.

Jika anda menavigasi penyemak imbas anda ke localhost: 4200 dan buka tab Rangkaian, anda tidak akan lagi melihat dua permintaan HTTP mengambil Todos dari API.

Misi dicapai! Kami telah berjaya mengintegrasikan penghala sudut dalam aplikasi kami!

Sebelum kita membungkus, mari kita jalankan ujian unit kita:

<span>npm install -g @angular/cli@latest
</span>

satu ujian unit gagal:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Apabila todoscomponent diuji, testbed tidak menyedari TodolistheaderComponent dan dengan itu Angular mengadu bahawa ia tidak tahu elemen pemimpin-pemimpin-penyenaraian.

Untuk memperbaiki kesilapan ini, mari kita buka app/src/todos/todos.component.spec.ts dan tambah no_errors_schema ke pilihan testbed:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

sekarang karma menunjukkan ralat lain:

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

Mari tambahkan penyedia yang diperlukan untuk pilihan katil ujian:

<span>import { RouterModule, Routes } from '@angular/router';
</span>

ini sekali lagi menimbulkan ralat lain:

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>

Mari tambahkan satu lagi penyedia untuk ActiveedRoute ke pilihan testbed:

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    children<span>: [
</span>      <span>{
</span>        path<span>: '',
</span>        component<span>: 'TodosPageComponent'
</span>      <span>},
</span>      <span>{
</span>        path<span>: ':id',
</span>        component<span>: 'TodoPageComponent'
</span>      <span>}
</span>    <span>]
</span>  <span>}
</span><span>];
</span>

kami menetapkan penyedia untuk mengaktifkan objek mock yang mengandungi harta data yang dapat dilihat untuk mendedahkan nilai ujian untuk todos.

sekarang ujian unit berjaya lulus:

<span>// no pathMatch specified, so Angular Router applies
</span><span>// the default `prefix` pathMatch
</span><span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos'
</span><span>}
</span>

hebat! Untuk menggunakan aplikasi kami ke persekitaran pengeluaran, kami kini boleh menjalankan:

<span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos',
</span>  pathMatch<span>: 'full'
</span><span>}
</span>

Kami memuat naik direktori Dist yang dihasilkan ke pelayan hosting kami. Betapa manisnya itu?

kami telah banyak menutupi artikel ini, jadi mari rekap apa yang telah kami pelajari.

Ringkasan

Dalam artikel pertama, kami belajar bagaimana:

Inisialisasi aplikasi Todo kami menggunakan sudut CLI
Buat kelas todo untuk mewakili todos individu
Buat perkhidmatan tododataService untuk membuat, mengemas kini dan mengeluarkan todos
Gunakan komponen AppComponent untuk memaparkan antara muka pengguna
menggunakan aplikasi kami ke halaman github

Dalam artikel kedua, kami refactored AppComponent untuk mewakilkan sebahagian besar karyanya untuk:

TodolistComponent untuk memaparkan senarai todos
todolistitemcomponent untuk memaparkan todo tunggal
todolistheadercomponent untuk membuat todo baru
todolistfootercomponent untuk menunjukkan berapa banyak todos yang tersisa.

Dalam artikel ketiga, kami belajar bagaimana:

Buat API Rest API Back End
Simpan URL API sebagai pemboleh ubah persekitaran
Buat apiservice untuk berkomunikasi dengan API REST
Kemas kini TododataService untuk menggunakan apiservice baru
Kemas kini AppComponent untuk mengendalikan panggilan API Asynchronous
Buat ApimockService untuk mengelakkan panggilan HTTP sebenar semasa menjalankan ujian unit.

Dalam artikel keempat ini, kami belajar:

• Mengapa permohonan mungkin memerlukan penghalaan
• Apa penghala javascript adalah
• penghala sudut apa, bagaimana ia berfungsi dan apa yang boleh dilakukan untuk anda
• bagaimana untuk menyediakan penghala sudut dan konfigurasikan laluan untuk aplikasi kami
• bagaimana untuk memberitahu penghala sudut di mana untuk meletakkan komponen di dom
• bagaimana untuk mengendalikan url yang tidak diketahui dengan anggun
• cara menggunakan resolver untuk membiarkan data router sudut menyelesaikan data.

Semua kod dari artikel ini boleh didapati di GitHub.

Dalam bahagian lima, kami akan melaksanakan pengesahan untuk mengelakkan akses yang tidak dibenarkan ke aplikasi kami.

jadi tunggu lebih banyak dan, seperti biasa, berasa bebas untuk meninggalkan pemikiran dan soalan anda dalam komen!

kursus yang disyorkan

Kursus dalam talian untuk sudut dan jenis Moto Todd Kursus latihan angularjs dalam talian, sudut dan typescript untuk individu dan pasukan. Gunakan kod kupon 'SitePoint' di checkout untuk mendapatkan 25% off.

Soalan Lazim (Soalan Lazim) Mengenai Komponen Routing Dengan Router Angular

Apakah kepentingan penghala sudut dalam pembangunan web? SPA adalah aplikasi web atau laman web yang berinteraksi dengan pengguna dengan menulis semula laman web semasa dengan data baru dari pelayan web, bukannya kaedah lalai pelayar yang memuatkan keseluruhan halaman baru. Ini membawa kepada pengalaman pengguna yang lebih cepat dan lebih lancar kerana hanya kandungan yang diperlukan. Penghala Angular membantu dalam menentukan laluan navigasi di antara keadaan aplikasi yang berbeza dan menguruskan peralihan negeri. untuk mengendalikan URL yang tidak diketahui atau tidak betul. Apabila penghala menemui URL yang tidak sepadan dengan mana -mana laluan yang telah ditetapkan, ia boleh mengarahkan ke halaman '404 tidak dijumpai' atau mana -mana halaman sandaran lain. Ini dicapai dengan menentukan laluan dengan laluan '**' dan mengaitkannya dengan komponen yang dikehendaki. Data antara laluan menggunakan ciri yang dipanggil Parameter Laluan. Parameter laluan adalah bahagian URL yang boleh berubah dan nilai mereka boleh digunakan oleh komponen untuk memaparkan kandungan secara dinamik atau menentukan tingkah laku. Ini amat berguna apabila anda ingin menavigasi ke pandangan terperinci mengenai item dalam senarai.

Bagaimana saya boleh melindungi laluan tertentu dalam aplikasi saya menggunakan penghala sudut? Pengawal laluan adalah antara muka yang boleh memberitahu penghala sama ada ia harus membenarkan navigasi ke laluan yang diminta. Mereka boleh digunakan untuk mengawal akses berdasarkan pengesahan pengguna, kawalan akses berasaskan peranan, atau kriteria tersuai yang lain. Berinteraksi dengan sejarah penyemak imbas melalui perkhidmatan lokasi. Ia menggunakan API Sejarah HTML5 untuk menukar URL tanpa menyebabkan tambah nilai halaman penuh. Ini bermakna bahawa butang belakang dan ke hadapan penyemak imbas akan berfungsi seperti yang diharapkan, menavigasi antara keadaan aplikasi. modul. Ini bermakna bahawa modul tertentu aplikasi anda boleh dimuatkan atas permintaan, dan bukannya pada beban awal permohonan. Ini dapat meningkatkan prestasi beban awal aplikasi anda. tingkah laku penghalaan. Acara ini termasuk permulaan navigasi, akhir navigasi, pengiktirafan laluan, dan banyak lagi. Dengan melanggan peristiwa -peristiwa ini, anda boleh mendapatkan maklumat terperinci mengenai proses penghalaan. . Ini membolehkan anda membuat struktur navigasi yang lebih kompleks, di mana laluan tertentu mempunyai sub-laluan yang berkaitan dengannya. Ini amat berguna untuk mewujudkan struktur navigasi hierarki.

Bagaimana saya boleh menghidupkan peralihan laluan dalam penghala sudut? Ini boleh digunakan untuk mewujudkan peralihan visual yang menarik di antara keadaan yang berbeza dari aplikasi anda, meningkatkan pengalaman pengguna. ciri yang dipanggil strategi preloading untuk modul pramuat. Ini bermakna modul tertentu boleh dimuatkan di latar belakang, selepas beban awal aplikasi. Ini dapat meningkatkan kelajuan navigasi aplikasi anda, kerana modul telah dimuatkan apabila diperlukan.

Atas ialah kandungan terperinci Penghala Angular: Pengenalan kepada Routing Komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!