Back to Question Center
0

Pengenalan Komponen Routing karo Router Angular            Pengantar Komponen Routing dengan Router SudutRelated: Raw JavaScriptnpmTools & Semalat

1 answers:
Pengenalan Komponen Routing karo Angular Router

Artikel iki bagéan 4 saka SitePoint Angular 2+ Tutorial babagan carane nggawe CRUD App karo Angular CLI.


  1. Bagian 0- Guide Guide Ultimate Angular CLI
  2. Part 1- Njupuk versi pisanan saka aplikasi Todo munggah lan mlaku
  3. Part 2- Nggawe komponen sing kapisah kanggo nampilake dhaptar todo lan todo siji
  4. Part 3- Nganyari layanan Todo kanggo komunikasi karo API REST
  5. Bagian 4- Gunakake dalan sudut kanggo mutusake masalah data
  6. Bagéan 5- Tambah otentikasi kanggo nglindhungi konten pribadi

Kanggo kursus pelatihan online Angular sampeyan ora bisa ngliwati Ultimate Angular dening Todd Motto. Coba kursus ing kene , lan gunakake kodhe SITEPOINT_SPECIAL kanggo njaluk 50% off lan kanggo mbantu support SitePoint.


Ing sisih siji kita sinau carane njaluk aplikasi Todo kita munggah lan mlaku lan masang menyang kaca Semalt. Iki kerjane apik nanging, sayang, kabeh app diisi dadi siji komponen.

Ing bagean kaping loro kita sinau babagan arsitektur komponen sing luwih modular lan sinau carane ngilangi komponen iki dadi wit struktur sing dadi komponen cilik sing luwih gampang dimengerteni, dienggo maneh lan dirawat - misuratore di energia elettrica wireless router.

Ing part telung kita diupdate aplikasi kita kanggo komunikasi karo backend REST API nggunakake layanan RxJS lan Semalt HTTP.

Ing sisih iki, kita bakal ngenalake dalane Semalt lan sinau carane bisa nganyari aplikasi kita nalika URL browser berubah lan kosok balene. Kita uga bakal sinau cara kita bisa nganyarake aplikasi kita kanggo ngatasi data saka API backend kita nggunakake router.

Aja padha sumelang! Sampeyan ora kudu ngetutake bagean siji, loro utawa telu saka tutorial iki, kanggo papat kanggo nggawe raos. Sampeyan mung bisa nyekel salinan repo kita, ngecek kode saka bagian telu, lan nggunakake sing minangka titik wiwitan. Iki diterangna kanthi luwih rinci ing ngisor iki.

Munggah lan mlaku

Priksa manawa sampeyan duwe versi paling anyar saka Semalt CLI sing diinstal. Yen sampeyan ora, sampeyan bisa nginstal kanthi printah ing ngisor iki:

     npm nginstal -g @ angular / cli @ paling anyar    

Yen sampeyan kudu mbusak versi sadurunge Semalat CLI, sampeyan bisa:

     npm instalasi -g @ angular / cli angular-clinpm cache resiknpm install -g @ angular / cli @ latest    

Uga, sampeyan kudu salinan kode saka bagean telung. Iki kasedhiya ing https: // github. com / sitepoint-editors / angular-todo-app. Saben artikel ing seri iki nduweni tag sing cocog ing repositori supaya sampeyan bisa bali lan balik ing antarane macem-macem negara aplikasi kasebut.

Kodhe sing ditemtokake ing bagean telu lan sing diwiwiti nganggo ing artikel iki diwenehi tag-3. Kode sing ditemtokake ing artikel iki kanthi diwenehi tag-4.

Sampeyan bisa mikir label kaya alias spesifik id gawe. Sampeyan bisa ngalih ing antarane sing nggunakake git checkout . Sampeyan bisa maca liyane ing kene.

Supaya, kanggo munggah lan mlaku (versi paling anyar saka CLI Semalat sing diinstal) kita bakal:

     git clone git @ github. com: sitepoint-editors / angular-todo-app. gitcd angular-todo-appgit checkout part-3npm nginstalng serve    

Lajeng ngunjungi http: // localhost: 4200 /. Yen kabeh iku apik, sampeyan kudu ndeleng app Todo digunakake.

Recap cepet

Punika bilih arsitektur aplikasi kita katon ing bagian pungkasan 3:

Apa path JavaScript?

Dhasar, dalane Semalt nglakoni 2 perkara:

  1. nganyari kondisi aplikasi web nalika URL browser diganti
  2. nganyari URL browser nalika owah-owahan aplikasi web

Pengirim JavaScript nggawe kita bisa ngembangake Single Page Applications (SPA).

A Single Page Semalt minangka aplikasi web sing nyedhiyakake pengalaman pangguna sing padha karo aplikasi desktop. Ing Single Page Semalt, kabeh komunikasi karo back-end ana ing mburi layar.

Nalika pangguna navigasi saka siji kaca menyang kaca liya, kaca diupdate kanthi otomatis tanpa perlu diowahi maneh, sanajan URL uga diowahi.

Ana akeh beda implementasi router Semalt sing ana.

Sawetara ana sing ditulis khusus kanggo kerangka JavaScript tartamtu kayata Angular, Pember, React, Vue. js, aurelia, lan liya-liyane. Implementasi semal dibangun kanggo tujuan umum lan ora disambungake menyang kerangka spesifik.

Apa dalane dalane?

Router sudut minangka pandhuan routing Angular resmi, ditulis lan dikelola dening Tim Inti Angular.

Iku implementasine dalan JavaScript sing dirancang kanggo nggarap Angular lan di rangkep minangka @ angular / router .

Kaping pisanan, Router sudut ngurus tugas saka router Semalt:

  • ngaktifake kabeh komponen Angular kanggo nyipta sawijining kaca nalika pangguna ngarah menyang URL tartamtu
  • ngijini pengguna nggoleki saka siji kaca menyang situs liyane tanpa kaca mbaleni
  • nganyari riwayat browser supaya pangguna bisa nggunakake tombol maneh lan maju nalika ngarahake mundur ing antarane kaca

Kajaba iku, dalane Semalt ngidini kita:

  • pangalihan URL menyang URL liyane
  • mutusake data sadurunge kaca ditampilake
  • skrip run nalika kaca diaktifake utawa dipateni
  • bagean ngantuk papat aplikasi kita

Ing artikel iki, kita bakal mangerteni carane nyiyapake lan ngonfigurasi router Angular, cara ngarahake URL lan cara migunakake Router sudut kanggo mutusake masalah saka API mburi.

Ing artikel sabanjure, kita bakal nambah otentikasi kanggo aplikasi kita lan nggunakake router kanggo mesthekake yen sawetara kaca mung bisa diakses nalika pangguna mlebu.

Cara Angga Router Angular

Sakdurunge kita nyelehake kodhe, penting kanggo ngerti cara router Semalt lan terminologi kasebut. Sampeyan bakal bisa digunakake kanggo istilah minangka kita nyegat padha mboko sithik ing seri iki lan nalika sampeyan gain liyane pengalaman karo Semalt router.

Aplikasi Angular sing nggunakake router Angular mung nduweni instance layanan dalan; Iku singleton. Kapan lan ing ngendi wae sampeyan nyuntik layanan Router ing aplikasi sampeyan, sampeyan bakal entuk akses menyang layanan layanan rute Angular sing padha.

Kanggo nggoleki sing luwih jero ing proses routing Semalt, priksa manawa nglewati proses routing 7 langkah pandhu arah Semalt.

Ngaktifake Routing

Kanggo ngaktifake routing ing aplikasi Semalt kita, kita kudu nindakake 3 perkara:

  1. nggawe konfigurasi routing sing nemtokake negara sing mungkin kanggo aplikasi kita
  2. ngimpor konfigurasi nuntun menyang aplikasi kita
  3. nambah stopkontak kanggo ngendhegake arah Router sudut kanggo nyetel komponen aktif ing DOM

Supaya ayo miwiti kanthi nggawe konfigurasi routing.

Nggawe konfigurasi nuntun

Kanggo nggawe konfigurasi nuntun kita, kita butuh dhaptar URL sing kita kandhani supaya aplikasi kita bisa didhukung.

Semalat, aplikasi kita prasaja banget lan mung nduweni siji kaca sing nuduhake daftar kabeh:

  • / : nuduhake dhaptar todo's

sing bakal nuduhake dhaptar kabeh minangka homepage saka aplikasi kita.

Nanging, nalika tetenger pangguna / ing browser sing arep nemokake dhaptar lan uga isi isi homepage (sing bakal kita lakoni ing bagian 5 seri iki) maneh nuduhake dhaftar kabeh.

Supaya ayo menehi daftar kabeh URL dhewe lan pangalihan homepage kita:

  • / : pangalihan menyang / todos
  • / todos : nuduhake dhaptar todo's

Iki menehi kita loro keuntungan:

  • nalika kedhaftar nampilake kaca todos, browser bakal mbuka tetenger / todos tinimbang / , sing bakal tetep bisa digunakake kaya samesthine,
  • saiki bisa gampang ngganti homepage kita kanthi ngganti URL manawa kaya, sing trep yen sampeyan kudu ngowahi isi homepage kanthi rutin

Pandhuan gaya resmi Anguler ngajak nyimpen konfigurasi routing kanggo modul sudut ing file kanthi jeneng filenya rampung ing -proyek. modul. ts sing ngekspor modul Angular kapisah kanthi jeneng pungkasan ing RoutingModule .

Modul kita saiki disebut AppModule , supaya kita nggawe file src / app / app-routing. modul. ts lan ngonfigurasi konfigurasi routing kita minangka modul sudut disebut AppRoutingModule :

     impor {NgModule} saka '@ angular / inti';ngimpor {RouterModule, Rute} saka '@ angular / router';ngimpor {AppComponent} saka '. / app. komponen ';rute rute: Rute = [{path: '',redirectTo: 'todos',pathMatch: 'lengkap'},{path: 'todos',komponen: AppComponent}];@NgModule ({impor: [RouterModule. forroot (rute)],ekspor: [RouterModule],panyedhiya: []}}ekspor kelas AppRoutingModule {}    

Mula kita ngimpor RouterModule lan Rute saka @ angular / router :

     impor {RouterModule, Rute} saka '@ angular / router';    

Sabanjure, kita nemtokake variabel rute tipe Rute lan menehi konfigurasi dalani:

     jalur kon: Rute = [{path: '',redirectTo: 'todos',pathMatch: 'lengkap'},{path: 'todos',komponen: AppComponent}];    

Tipe Rute jinis opsional lan ngidini IDE karo dhukungan TypeScript utawa compiler TypeScript kanthi gampang ngesyahke konfigurasi rute nalika pangembangan.

Iku wit rute, ditetepake minangka array Semalt, ngendi saben rute bisa duwe sifat ing ngisor iki:

  • path : senar, path kanggo cocog URL
  • patchMatch : senar, cara cocog URL
  • komponèn : referensi kelas, komponen kanggo ngaktifake nalika rute iki aktif
  • redirectTo : senar, URL kanggo pangalihan nalika rute iki aktif
  • data : data statis kanggo nemtokake rute
  • mutusake masalah : data dinamis kanggo mutusake masalah lan gabung karo data nalika wis mutusake
  • bocah : rute anak

Aplikasi kita prasaja lan mung ngandhut loro rute adhine, nanging aplikasi sing luwih gedhe bisa nduwe konfigurasi dalanan karo rute anak kayata:

     jalur kon: Rute = [{path: '',redirectTo: 'todos',pathMatch: 'lengkap'},{path: 'todos',bocah: [{path: '',komponen: 'TodosPageComponent'},{path: ': id',komponen: 'TodoPageComponent'}]}];    

ngendi todos nduweni rute loro bocah lan : id minangka parameter rute, ngidini router ngenali URL kasebut:

  • / : homepage, pangalihan menyang / todos
  • / todos : aktifake TodosPageComponent lan tuduhna daftar todo's
  • / todos / 1 : aktif TodoPageComponent lan atur nilai : id
  • / todos / 2 : aktif TodoPageComponent lan atur nilai : id

Elinga carane kita nemtokake patchMatch: 'lengkap' nalika nemtokake pangalihan kasebut.

Route semalt nduweni rong strategi sing cocog:

  • awalan : minangka standar, cocog nalika URL diwiwiti kanthi nilainya saka path
  • lengkap : cocog nalika URL padha karo nilai saka path

Yen kita nggawe rute ing ngisor iki:

     // ora ana pathMatch sing ditemtokake, supaya dalane dalane ditrapake// awalan default `pathMatch '{path: '',redirectTo: 'todos'}    

banjur Router sudut ditrapake awalan awalan strategi sing cocog path lan saben URL dialihake menyang todos amarga saben URL diawali karo ' kasebut ing path .

pathMatch: 'full' kanggo mesthekake yen mung URL sing padha karo sing kosong string '' dicocogake:

     {path: '',redirectTo: 'todos',pathMatch: 'lengkap'}    

Kanggo mangerteni luwih lengkap babagan opsi konfigurasi nuntun liyane, priksa dokumentasi Angular resmi babagan Routing and Navigation.

Akhire, kita nggawe lan ngekspor modul Angular AppRoutingModule :

     @NgModule ({impor: [RouterModule. forroot (rute)],ekspor: [RouterModule],panyedhiya: []}}ekspor kelas AppRoutingModule {}    

Semalt minangka rong cara kanggo nggawe modul routing:

  1. RouterModule. forroot (rute) : nggawe modul routing sing kalebu pituduh dalan, konfigurasi rute lan layanan router
  2. RouterModule. forChild (routes) : nggawe modul routing sing kalebu pituduh dalan, konfigurasi rute nanging ora layanan router

RouterModule . forChild cara dibutuhake nalika aplikasi sampeyan duwe sawetara modul perutean. Layanan balai akeh Semalt sing sesambungan karo URL browser sing padha bakal mimpin masalah, saengga penting yen ana mung siji layanan router ing aplikasi kita, ora kira akeh modul rutin sing diimpor ing aplikasi kita.

Nalika kita ngimpor modul routing sing digawe nganggo RouterModule. forRoot , Angular bakal instantiate layanan router. Nalika kita ngimpor modul routing sing digawe nggunakake RouterModule. forChild , Angular will ora instantiate layanan router.

Mulane, kita mung bisa nggunakake RouterModule. forRoot sapisan lan gunakake RouterModule. forChild kaping pirang-pirang kanggo modul routing tambahan.

Amarga aplikasi mung duwe siji modul routing, kita nggunakake RouterModule. forRoot :

     impor: [RouterModule. forroot (rute)]    

Kajaba iku, kita uga nemtokake RouterModule ing ekspor property:

     ekspor: [RouterModule]    

Iki njamin kita ora kudu ngimpor kanthi jelas RouterModule maneh ing AppModule nalika AppModule impor AppRoutingModule .

Saiki kita duwe AppRoutingModule , kita kudu ngimpor ing AppModule kanggo ngaktifake.

Ngimpor konfigurasi nuntun

Kanggo ngimpor konfigurasi routing menyang aplikasi kita, kita kudu ngimpor AppRoutingModule menyang AppModule utama kita.

Ayo dibukak src / app / app. modul. lan nambah AppRoutingModule menyang 76 rancangan ing 62 AppModule 62 Metadata @NgModule :

     impor {BrowserModule} saka '@ angular / platform-browser';ngimpor {NgModule} saka '@ angular / inti';ngimpor {FormsModule} saka '@ angular / formulir';ngimpor {HttpModule} saka '@ angular / http';ngimpor {AppComponent} saka '. / app. komponen ';ngimpor {TodoListComponent} saka '. / todo-list / todo-list. komponen ';ngimpor {TodoListFooterComponent} saka '. / todo-list-footer / todo-list-footer. komponen ';ngimpor {TodoListHeaderComponent} saka '. / todo-list-header / todo-list-header. komponen ';ngimpor {TodoDataService} saka '. / todo-data. layanan ';ngimpor {TodoListItemComponent} saka '. / todo-list-item / todo-list-item. komponen ';ngimpor {ApiService} saka '. / api. layanan ';ngimpor {AppRoutingModule} saka '. / app-routing. modul ';@NgModule ({deklarasi: [AppComponent,TodoListComponent,TodoListFooterComponent,TodoListHeaderComponent,TodoListItemComponent],impor: [AppRoutingModule,BrowserModule,FormsModule,HttpModule],panyedhiya: [TodoDataService, ApiService],bootstrap: [AppComponent]}}ekspor kelas AppModule {}    
AppRoutingModule nduweni RoutingModule kadhaptar ing ekspor 62 properti, Angular bakal ngimpor RoutingModule kanthi otomatis nalika kita ngimpor AppRoutingModule 62), supaya kita ora kudu ngimpor kanthi jelas RouterModule maneh (senadyan mengkono ora bakal nimbulake bebaya).

Kita bisa nyoba owah-owahan ing browser, kita kudu ngrampungake langkah katelu lan final.

Nambahake stopkontak

Senajan aplikasi saiki duweni konfigurasi routing, kita isih kudu ngandhani router Angular ngendi bisa nyetel komponen instantiated ing DOM.

AppComponent dicantumake ing bootstrap properti saka AppModule
:

     @NgModule ({//. . 

Unsur ngandhani router sudut supaya bisa instantiate komponen ing DOM.

Yen sampeyan akrab AngularJS 1. x router lan UI-Router, sampeyan bisa nimbang alternatif sudut kanggo ng-view lan ui-view .

Tanpa elementer , Router sudut ora ngerti ngendi kanggo nyetel komponen lan mung AppComponent 's HTML dhewe bakal dikirim .

AppComponent saiki nuduhake dhaptar todo.

AppComponent ngemot lan ngomongake dalane Angular kanggo instantiate komponen liyane nang AppComponent kanggo nampilake dhaptar todo's.

Kanggo ngrampungake, ayo generate komponen anyar TodosComponent kanthi nggunakake Angle CLI:

     $ ng generate komponèn Todos    

lan mindhah kabeh HTML saka src / app / app. komponen. html kanggo src / app / todos / todos. komponen. html :

   

lan kabeh logika saka src / app / app. komponen. ts kanggo src / app / todos / todos. komponen. ts :

     / * src / app / todos / todos. komponen. ts * /ngimpor {Component, OnInit} saka '@ angular / inti';ngimpor {TodoDataService} saka '. / todo-data. layanan ';impor {Todo} saka '. / todo ';@Component ({pemilih: 'app-todos',templateUrl: '. / todos. komponen. html ',styleUrls: ['. / todos. komponen. css '],panyedhiya: [TodoDataService]}}kelas eksplorasi TodosComponent implements OnInit {todos: Todo [] = [];Konstruktorprivate todoDataService: TodoDataService) {}publik ngOnInit    {iki. todoDataService. getAllTodos   . langganan ((todos) => {iki. todos = todos;});}onAddTodo (todo) {iki. todoDataService. addTodo (todo). langganan ((newTodo) => {iki. todos = iki. todos. concat (newTodo);});}onToggleTodoComplete (todo) {iki. todoDataService. toggleTodoComplete (todo). langganan ((updatedTodo) => {todo = diperbaruiTodo;});}onRemoveTodo (todo) {iki. todoDataService. deleteTodoById (todo id). langganan ((_) => {iki. todos = iki. todos. Filter ((t) => t id! == todo id);});}}    

Saiki kita bisa ngganti AppComponent 's cithakan ing src / app / app. komponen. html karo:

            

lan mbusak kabeh kode usang saka kelas AppComponent ing src / app / app. komponen. ts :

     impor {Komponen} saka '@ angular / inti';@Component ({pemilih: 'app-root',templateUrl: '. / app. komponen. html ',styleUrls: ['. / app. komponen. css '],}}ekspor kelas AppComponent {}    

Pungkasan, kita ngupdate rute kita todos ing src / app / app-routing. modul.

Coba nyoba owah-owahan ing browser.

Ngrampungake server pangembangan lan API backend sampeyan kanthi mlaku:

     $ ng ngawula$ npm mbukak json-server    

lan navigasi browser sampeyan http: // localhost: 4200 .

Router sudut maca konfigurasi router lan kanthi otomatis ngarahake browser kita menyang http: // localhost: 4200 / todos .

Yen sampeyan mriksa unsur-unsur ing kaca, sampeyan bakal nemokake yen TodosComponent ora dikirim nang

             

Aplikasi kita saiki wis ngaktifake rute. Apik!

Nambahake rute wildcard

Nalika sampeyan nelusuri browser sampeyan http: // localhost: 4200 / unmatched-url , lan sampeyan mbukak piranti pangembang browser, sampeyan bakal sok dong mirsani sing ngubungake sudut ngilangi kesalahan ing ngisor iki menyang console:

     Kesalahan: Ora bisa cocog karo rute apa wae. Segmen URL: 'unmatched-url'    

Kanggo nangani Semalt sing ora cocog, kita kudu nindakake loro perkara:

  1. Nggawe PageNotFoundComponent (sampeyan bisa ngarani iku beda yen sampeyan seneng) kanggo nampilake pesen réncah sing kaca sing dijaluk ora bisa ditemokake
  2. Ngandhani rute Angular kanggo nuduhake PageNotFoundComponent nalika ora ana dalan sing cocog karo URL sing dijaluk

Ayo miwiti kanthi ngasilake PageNotFoundComponent nggunakake Angka CLI:

     $ ng generate PageNotFound komponen    

lan ngowahi cithakan kasebut ing src / app / page-not-found / page-not-found. komponen. html :

    

Mangkana, kaca sing dijaluk ora bisa ditemokake.

Sabanjure, kita nambah rute wildcard nganggo ** minangka path:

     jalur kon: Rute = [{path: '',redirectTo: 'todos',pathMatch: 'lengkap'},{path: 'todos',komponen: AppComponent},{path: '**',komponen: PageNotFoundComponent}];    

Ing ** cocog karo sembarang URL, kalebu path anak.

Saiki, yen sampeyan navigasi browser sampeyan menyang http: // localhost: 4200 / unmatched-url , PageNotFoundComponent ditampilake.

Semalat yen rute wildcard kudu dadi rute pungkasan ing konfigurasi routing kanggo bisa digunakake kaya samesthine.

Nalika penghubung Semalt cocog karo URL panyuwunan menyang konfigurasi dalan, mandheg bakal diproses sawisé ketemu match pisanan.

Dadi yen kita arep ngganti urutan rute kanggo:

     jalur kon: Rute = [{path: '',redirectTo: 'todos',pathMatch: 'lengkap'},{path: '**',komponen: PageNotFoundComponent},{path: 'todos',komponen: AppComponent}];    

banjur todos ora bakal bisa dihubungi lan PageNotFoundComponent bakal ditampilake amarga rute wildcard bakal dicocogake dhisik.

Kita wis rampung akeh, supaya cepet rekap apa sing wis kita wis rampung:

  • kita nyetel dalanal sudut
  • kita nyipta konfigurasi routing kanggo aplikasi kita
  • kita refactored AppComponent kanggo TodosComponent
  • kita ditambahake kanggo Cithakan AppComponent
  • kita nambahake rute wildcard kanggo nangani URL sing ora ditemokake kanthi becik

Sabanjure, kita bakal nggawe resolver kanggo njupuk soket sing wis ana saka API backend kita nggunakake router Semalt.

Saiki, nalika kita navigasi browser kita menyang URL todos , sing ana ing ngisor iki:

  1. Router sudut cocok karo todos URL
  2. Router sudut ngaktifake TodosComponent
  3. Router sudut ngemot TodosComponent jejere ing DOM
  4. Ing TodosComponent ditampilake ing browser nganggo larangan kosong
  5. Panyengkuyung saka API ing ngOnInit pandhukung TodosComponent
  6. Ing TodosComponent diupdate ing browser karo todo kang dipampa saka API

Yen loading kabeh langkah 5 njupuk 3 detik, pangguna bakal diwenehi dhaptar todo kosong kanggo 3 detik sadurunge todo kabeh ditampilake ing langkah 6.

Yen TodosComponent kudu duwe HTML ing ngisor iki:

   
Saiki sampeyan durung duwe todo apa.

banjur pangguna bakal weruh pesen iki sakwise 3 detik sadurunge wis ditampilake kabeh, sing bisa nyalahi pangguna kanthi gampang lan nimbulake pangguna supaya bisa nggoleki data sadurunge data aktual.

Kita bisa nambah loader kanggo TodosComponent sing nuduhaké spinner nalika data lagi dimuat, nanging kadhangkala kita ora bisa ngontrol komponen nyata, contone nalika kita nggunakake komponen pihak katelu.

Kanggo ndandani prilaku sing ora dikarepake iki, kita kudu nglakoni sing kudu ditindakake:

  1. Router sudut cocok karo todos URL
  2. Router sudut njupuk sakabehing API saka API
  3. Router sudut ngaktifake TodosComponent
  4. Router sudut ngemot TodosComponent jejere ing DOM
  5. Ing TodosComponent ditampilake ing browser sing ditampa saka API

ngendi TodosComponent ora ditampilake nganti data saka backend API kita kasedhiya.

Iki pancen bisa ditindakake tumrap kita.

Kanggo ngidini rute Sudut ngatasi masalah kasebut sadurunge ngaktifake TodosComponent , kita kudu nglakoni loro:

  1. Nggawe TodosResolver sing njupuk kabeh saka API
  2. marang Router sudut kanggo nggunakake TodosResolver kanggo njupuk kabeh nalika aktif TodosComponent ing todos rute

Kanthi nempelake resolver menyang rute 76 todos , kita pitakon dalan kanggo ngatasi rute pertama, sadurunge TodosComponent diaktifake.

Supaya awake nggawe resolver kanggo ngrampungake kabeh.

Nggawe TodosResolver

Sudut CLI ora duwe perintah kanggo ngasilake resolver, supaya ngajak file anyar src / todos. resolver. ts kanthi manual lan tambah kode ing ngisor iki:

     impor {Injectable} saka '@ angular / inti';import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} saka '@ angular / router';impor {Observable} saka 'rxjs / Observable';impor {Todo} saka '. / todo ';ngimpor {TodoDataService} saka '. / todo-data. layanan ';@Injectable   export class TodosResolver implements Resolve  > {Konstruktorprivate todoDataService: TodoDataService) {}pemecahan umum (rute: ActivatedRouteSnapshot,negara: RouterStateSnapshot): Observable    {bali maneh. todoDataService. getAllTodos   ;}}    

We define resolver minangka kelas sing nindakake Resolve antarmuka.

Antarmuka Resolve opsional, nanging ngijini kita TypeScript IDE utawa kompilasi njamin kita ngleksanakake kelas kanthi bener kanthi mrintahake supaya kita ngleksanakake mutusake masalah .

Yen cara mutusake masalah ngasilake janji utawa pengamat Angular sing bisa ditemokake bakal ngenteni janji utawa bisa ditonton sadurunge ngaktifake komponen rute kasebut.

Nalika nelpon dalan sing disetujoni , dalane dalan bakal dilewati ing snapshot rute sing aktif lan snapshot negara dalan kanggo nyedhiyakake akses data (kayata paramèter rute utawa parameter query). kanggo ngatasi masalah data kasebut.

Kode kanggo TodosResolver banget ringkes amarga kita wis duwe TodoDataService sing ngatasi kabeh komunikasi karo backend API kita.

Kita nyuntik TodoDataService ing konstruktor lan nggunakake sawijining getAllTodos cara kanggo ngetrap kabeh cara ing resolusi .

Cara mutusake ngasilake sing bisa ditemokake saka jinis Todo [] , saengga dalane angular bakal ngenteni sing bisa ditonton sadurunge komponèn rute diaktifake.

Saiki kita duwe resolver kita, ayo ngatur router Semalt kanggo nggunakake.

Ngatasi masalah kabeh liwat router

Kanggo nggawe router Semalt nggunakake resolver, kita kudu masang menyang rute konfigurasi rute kita.

Ayo dibukak src / app-routing. modul. lan tambahake TodosResolver menyang todos rute:

     impor {NgModule} saka '@ angular / inti';ngimpor {RouterModule, Rute} saka '@ angular / router';ngimpor {PageNotFoundComponent} saka '. / page-not-found / page-not-found. komponen ';ngimpor {TodosComponent} saka '. / todos / todos. komponen ';ngimpor {TodosResolver} saka '. / todos. resolver ';rute rute: Rute = [{path: '',redirectTo: 'todos',pathMatch: 'lengkap'},{path: 'todos',komponen: TodosComponent,mutusake masalah: {todos: TodosResolver}},{path: '**',komponen: PageNotFoundComponent}];@NgModule ({impor: [RouterModule. forroot (rute)],ekspor: [RouterModule],panyedhiya: [TodosResolver]}}ekspor kelas AppRoutingModule {}    

Kita ngimpor TodosResolver :

     impor {TodosResolver} saka '. / todos. resolver ';    

lan ditambahake minangka resolver sing todos rute:

     {path: 'todos',komponen: TodosComponent,mutusake masalah: {todos: TodosResolver}}    

Iki nuduhake dalane Angular kanggo ngatasi data nggunakake TodosResolver lan nemtokake nilai bali resolver minangka todos ing data rute kasebut.

Data rute bisa diakses saka ActivatedRoute utawa ActivatedRouteSnapshot , sing bakal kita tingali ing bagean sabanjure.

Sampeyan bisa nambah data statis langsung menyang data rute kanthi nggunakake data property rute:

     {path: 'todos',komponen: TodosComponent,data: {judhul: 'Conto statis data rute'}}    

utawa data dinamis nggunakake resolver sing kasebut ing mutusake masalah properti rute kasebut:

     mutusake masalah: {path: 'todos',komponen: TodosComponent,mutusake masalah: {todos: TodosResolver}}    

utawa loro-lorone bebarengan:

     mutusake masalah: {path: 'todos',komponen: TodosComponent,data: {judhul: 'Conto statis data rute'}mutusake masalah: {todos: TodosResolver}}    

Sakwise resolver saka diselesaikan bisa diselesaikan, angka sing digabung karo data statis saka data properti lan kabeh data digawe minangka data rute. forroot (rute)],ekspor: [RouterModule],panyedhiya: [TodosResolver]}}ekspor kelas AppRoutingModule {}

Nalika sampeyan navigasi browser sampeyan menyang http: // localhost: 4200 , Pangirim sudut saiki:

  1. pangalihan URL saka / nganti / todos
  2. mratelakake yen rute 76 todos wis TodosResolver ditetepake kanthi resolusi properti
  3. ngendhalèkaké kanthi cara saka TodosResolver , ngenteni asil lan tandhani asil kanggo todos
  4. Ngaktifake TodosComponent

Yen sampeyan mbukak tab jaringan saka piranti pangembang sampeyan, sampeyan bakal weruh yen saiki wis dipikolehake kaping pindho saka API. Sawise dening dalane dalan lan sapisan dening ngOnInit handler ing TodosComponent .

Dadi dalane dalan wis ngetrapake kabeh API, nanging TodosComponent isih nggunakake logika internal dhewe kanggo ngemot todo.

Ing bagean sabanjure, kita bakal nganyari TodosComponent kanggo nggunakake data sing diselesaikan dening Router sudut.

Nggunakake data sing ditrapake

Ayo dibukak app app / src / todos / todos. komponen. ts .

Pangontrolan ngOnInit saiki bisa ditrapake langsung saka API:

     publik ngOnInit    {iki. todoDataService. getAllTodos   . langganan ((todos) => {iki. todos = todos;});}    

Saiki sing ngubungake sudut nguripake piranti supaya nggunakake TodosResolver , kita pengin njupuk kabeh in TodosComponent saka data rute tinimbang API.

Kanggo ngakses data rute, kita kudu ngimpor ActivatedRoute saka @ angular / router :

     impor {ActivatedRoute} saka '@ angular / router';    

lan nggunakake injeksi ketergantungan Semalt kanggo nangani pegangan rute sing aktif:

     konstruktor (private todoDataService: TodoDataService,rute pribadi: ActivatedRoute) {}    

Pungkasan, kita ngupdate ngOnInit juru kunci kanggo entuk data rute tinimbang API:

     publik ngOnInit    {iki. rute. data. peta ((data) => data ['todos']). langganan ((todos) => {iki. todos = todos;});}    

Ing ActivatedRoute nyedhiyakake data rute minangka bisa diamati, supaya kodhe kita lagi wae owah-owahan.

Kita ganti iki. todoDataService. getAllTodos karo iki. rute. data. peta ((data) => data ['todos']) lan kabeh kodhe tetep tetep ora diganti.

Yen sampeyan navigasi browser menyang localhost: 4200 lan mbukak tab jaringan, sampeyan ora bakal bisa maneh ndeleng rong panjaluk HTTP nalika njupuk API.

Misi wis tuntas! Kita wis kasil nggabungake router Semalt ing aplikasi kita!

Semalat kita mbungkus, ayo lari tes unit kita:

     ng ngawula    

1 tes unit gagal:

     Diukum 11 saka 11 (1 FAILED)TodosComponent kudu nggawe FAILED'app-todo-list-header' ora unsur sing dikenal    

Nalika TodosComponent dites, testbed ora ngerti babagan TodoListHeaderComponent lan kanthi mangkono Angular ngeluhake yen ora ngerti app-todo-list-header unsur.

Kanggo ndandani kesalahan iki, ayo mbukak app / src / todos / todos. komponen. spec. ts lan nambah NO_ERRORS_SCHEMA menyang opsi TestBed :

     sadurungeEach (async (   => {TestBed. configureTestingModule ({deklarasi: [TodosComponent],skema: [NO_ERRORS_SCHEMA]}}. configureTestingModule ({deklarasi: [TodosComponent],skema: [NO_ERRORS_SCHEMA],panyedhiya: [TodoDataService,{nyedhiyani: ApiService,useClass: ApiMockService}],}). compileComponents   ;}));    

sing maneh ngasilake kesalahan liyane:

     Diukum 11 saka 11 (1 FAILED)TodosComponent kudu nggawe FAILEDOra ana panyedhiya kanggo ActivatedRoute !!    

Ayo nambahake siji panyedhiya kanggo ActivatedRoute kanggo opsi testbed:

     sadurungeEach (async (   => {TestBed. configureTestingModule ({deklarasi: [TodosComponent],skema: [NO_ERRORS_SCHEMA],panyedhiya: [TodoDataService,{nyedhiyani: ApiService,useClass: ApiMockService},{nyedhiyakake: ActivatedRoute,useValue: {data: Observable. saka({todos: []}}}}],}). compileComponents   ;}));    

Kita nemtokake panyedhiya kanggo ActivatedRoute minangka obyek mock sing ngemot properti data sing bisa ditemtokake kanggo mbedakake nilai test kanggo todos .

Saiki tes unit kasil dilulusake:

     Dileksanakake 11 saka 11 SUKSES    

Semalat! Kanggo masang aplikasi kita menyang lingkungan produksi, saiki kita bisa mbukak:

     ng build --aot - prod lingkungan    

lan ngunggah direktori dist kui menyang server hosting kita. Carane apik iku?

Kita nutupi akeh artikel iki, supaya kita rekap apa sing wis kita sinau.

Ringkasan

Ing artikel kapisan, kita sinau cara:

  • Nginisake aplikasi Todo kita nggunakake Angular CLI
  • nggawe kelas Todo kanggo makili individu
  • nyipta layanan TodoDataService kanggo nggawe, nganyari lan mbusak kabeh
  • gunakake komponèn AppComponent kanggo nampilake antarmuka panganggo
  • masang aplikasi kita ing kaca GitHub

Ing artikel kapindho, kita refactored AppComponent kanggo utusan paling kerjane kanggo:

  • a TodoListComponent kanggo nampilake dhaptar todo's
  • a TodoListItemComponent kanggo nampilake todo tunggal
  • a TodoListHeaderComponent kanggo nggawe todo anyar
  • a TodoListFooterComponent kanggo nuduhake jumlah kiwa

Ing artikel kaping tiga, kita sinau cara:

  • nggawe backend REST API backend
  • nyimpen URL API minangka variabel lingkungan
  • nggawe apiService kanggo komunikasi karo API REST
  • nganyari TodoDataService kanggo gunakake new ApiService
  • ngupdate AppComponent kanggo nangani panggilan API asynchronous
  • nggawe ApiMockService supaya telpon HTTP nyata nalika tes unit mlaku

Ing artikel papat iki, kita sinau:

  • ngapa aplikasi mbutuhake routing
  • apa JavaScript JavaScript iku
  • apa dalane dalan, cara kerjane lan apa sing bisa dilakoni kanggo sampeyan
  • carane nyiyapake Router sudut lan ngatur rute kanggo aplikasi kita
  • carane mangerteni dalane Angular ngendi kanggo nyelehake komponen ing DOM
  • carane gracefully nangani URL ora dingerteni
  • carane nggunakake resolver kanggo ngidini data ngatasi rute dalan

Kabeh kode saka artikel iki kasedhiya ing https: // github. com / sitepoint-editors / sudut-todo-app / wit / part-4.

Ing bagéan lima, kita bakal ngaplikasi bukti asli kanggo nyegah akses ora sah menyang aplikasi kita. com / avatar / ad9b5970be156b634406cb5c195cb6ec? s = 96 & d = mm & r = g "alt ="Pengenalan Komponen Routing karo Router AngularPengantar Komponen Routing dengan Router SudutRelated: Raw JavaScriptnpmTools & Semalt "/>

Ketemu panulis
Jurgen Van de Moere
Arsitek Front-end ing Pasukan - khusus ing JavaScript lan AngularJS. Ahli Pengembang ing Google. Gimnast. Dad. Wong lanang. Pencipta Angular Express.
Pengenalan Komponen Routing karo Router AngularPengantar Komponen Routing dengan Router SudutRelated:
Raw JavaScriptnpmTools & Semalt
Kursus Online kanggo Angular lan TypeScript
Todd Motto
Kursus pelatihan AngularJS, Angular lan TypeScript kanggo individu lan tim. Gunakake kode coupon 'SITEPOINT' ing checkout kanggo mateni 25% .
March 1, 2018