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.
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.
<span>npm install -g @angular/cli@latest </span>
npm uninstall -g @angular/cli angular-cli npm cache clean <span>npm install -g @angular/cli@latest </span>
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
rekap cepat
Dalam artikel ini kita akan:
Pada akhir artikel ini, anda akan faham:
Jadi, mari kita mulakan!
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:
Dalam aplikasi web JavaScript moden, penghalaan sering dikendalikan oleh penghala JavaScript dalam penyemak imbas.
Pada dasarnya, penghala JavaScript melakukan dua perkara:
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.
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:
Di samping itu, penghala sudut membolehkan kita:
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
Apabila pengguna menavigasi ke halaman, Router Angular melakukan langkah -langkah berikut mengikut urutan:
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.
Untuk membolehkan penghalaan dalam aplikasi sudut kita, kita perlu melakukan tiga perkara:
Jadi mari kita mulakan dengan membuat konfigurasi penghalaan.
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:
yang akan menunjukkan senarai todos sebagai halaman utama aplikasi kami.
Walau bagaimanapun, apabila penanda buku pengguna / dalam penyemak imbas mereka untuk berunding Todos.
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>
npm uninstall -g @angular/cli angular-cli npm cache clean <span>npm install -g @angular/cli@latest </span>
<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:
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
penghala sudut mempunyai dua strategi yang sepadan:
awalan: lalai, sepadan apabila URL bermula dengan nilai jalan
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:
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
<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 mempunyai approutingmodule kita, kita perlu mengimportnya dalam appmodule kita untuk membolehkannya.
mengimport konfigurasi penghalaan
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>Sebelum kita dapat mencuba perubahan dalam penyemak imbas, kita perlu melengkapkan langkah ketiga dan terakhir.
Menambah Outlet Router
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
elemen
Jika anda biasa angularjs 1.x penghala dan ui-router, anda boleh mempertimbangkan
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
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
<span>{
</span> path<span>: '',
</span> redirectTo<span>: 'todos',
</span> pathMatch<span>: 'full'
</span><span>}
</span>Permohonan kami kini telah diaktifkan. Awesome!
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:
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:
Seterusnya, kami akan membuat resolver untuk mengambil todos sedia ada dari API back-end kami 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:
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:
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:
jadi mari kita buat resolver untuk mengambil todos kita.
Membuat Todosresolver
<span>npm install -g @angular/cli@latest </span>
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.
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>
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
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>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>
npm uninstall -g @angular/cli angular-cli npm cache clean <span>npm install -g @angular/cli@latest </span>
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
<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>
<span>import { RouterModule, Routes } from '@angular/router';
</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>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 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>
<span>{
</span> path<span>: '',
</span> redirectTo<span>: 'todos',
</span> pathMatch<span>: 'full'
</span><span>}
</span>kami telah banyak menutupi artikel ini, jadi mari rekap apa yang telah kami pelajari.
Ringkasan
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 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.
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
