Panduan Lengkap Untuk Perutean Di Angular

Jika Anda masih belum terbiasa dengan Angular 7, saya ingin membawa Anda lebih dekat ke semua yang ditawarkan kerangka kerja front-end yang mengesankan ini. Saya akan memandu Anda melalui aplikasi demo Angular yang menunjukkan berbagai konsep yang terkait dengan Router, seperti:

• Outlet router,
• Rute dan jalur,
• Navigasi.

Saya juga akan menunjukkan cara menggunakan Angular CLI v7 untuk menghasilkan proyek demo di mana kita akan menggunakan router Angular untuk mengimplementasikan perutean dan navigasi. Tapi pertama-tama, izinkan saya untuk memperkenalkan Anda pada Angular dan membahas beberapa fitur baru yang penting dalam versi terbarunya.

Memperkenalkan Sudut 7

Angular adalah salah satu kerangka kerja front-end paling populer untuk membangun aplikasi web sisi klien untuk web seluler dan desktop. Ini mengikuti arsitektur berbasis komponen di mana setiap komponen adalah bagian kode yang terisolasi dan dapat digunakan kembali yang mengontrol bagian dari UI aplikasi.

Sebuah komponen di Angular adalah kelas TypeScript yang didekorasi dengan dekorator @Component . Ini memiliki template terlampir dan stylesheet CSS yang membentuk tampilan komponen.

Angular 7, versi terbaru dari Angular baru-baru ini dirilis dengan fitur-fitur baru khususnya dalam perkakas dan kinerja CLI, seperti:

• CLI Prompts: Perintah umum seperti ng add dan ng new sekarang dapat meminta pengguna untuk memilih fungsionalitas yang akan ditambahkan ke dalam proyek seperti format routing dan stylesheet, dll.
  
• Menambahkan pengguliran ke CDK Bahan Sudut (Komponen DevKit).
• Menambahkan dukungan drag and drop ke Angular Material CDK.
• Proyek juga secara default menggunakan Paket Anggaran yang akan memperingatkan pengembang saat aplikasi mereka melewati batas ukuran. Secara default, peringatan dilontarkan ketika ukurannya lebih dari 2 MB dan kesalahan pada 5 MB. Anda juga dapat mengubah batasan ini di file angular.json Anda. dll.
  

Memperkenalkan Router Sudut

Angular Router adalah router JavaScript yang kuat yang dibuat dan dikelola oleh tim inti Angular yang dapat diinstal dari paket @angular/router . Ini menyediakan perpustakaan perutean lengkap dengan kemungkinan untuk memiliki beberapa outlet router, strategi pencocokan jalur yang berbeda, akses mudah ke parameter rute dan penjaga rute untuk melindungi komponen dari akses yang tidak sah.

Router Angular adalah bagian inti dari platform Angular. Ini memungkinkan pengembang untuk membangun Aplikasi Halaman Tunggal dengan banyak tampilan dan memungkinkan navigasi di antara tampilan ini.

Sekarang mari kita lihat konsep Router yang penting secara lebih rinci.

Router-Outlet

Router-Outlet adalah arahan yang tersedia dari perpustakaan router tempat Router memasukkan komponen yang dicocokkan berdasarkan URL browser saat ini. Anda dapat menambahkan beberapa outlet di aplikasi Angular Anda yang memungkinkan Anda untuk menerapkan skenario perutean lanjutan.

 <router-outlet></router-outlet>

Setiap komponen yang dicocokkan oleh Router akan menjadikannya sebagai saudara dari outlet Router.

Rute dan Jalur

Rute adalah definisi (objek) yang terdiri dari setidaknya jalur dan atribut komponen (atau jalur redirectTo). Jalur merujuk ke bagian URL yang menentukan tampilan unik yang harus ditampilkan, dan komponen merujuk ke komponen Angular yang perlu dikaitkan dengan jalur. Berdasarkan definisi rute yang kami berikan (melalui metode RouterModule.forRoot(routes) statis), Router dapat menavigasi pengguna ke tampilan tertentu.

Setiap Route memetakan path URL ke komponen.

Jalur dapat kosong yang menunjukkan jalur default aplikasi dan biasanya merupakan awal dari aplikasi.

Jalur dapat mengambil string karakter pengganti ( ** ). Router akan memilih rute ini jika URL yang diminta tidak cocok dengan jalur apa pun untuk rute yang ditentukan. Ini dapat digunakan untuk menampilkan tampilan "Tidak Ditemukan" atau mengalihkan ke tampilan tertentu jika tidak ditemukan kecocokan.

Ini adalah contoh rute:

 { path: 'contacts', component: ContactListComponent}

Jika definisi rute ini disediakan untuk konfigurasi Router, router akan merender ContactListComponent ketika URL browser untuk aplikasi web menjadi /contacts .

Strategi Pencocokan Rute

Router Sudut menyediakan strategi pencocokan rute yang berbeda. Strategi default hanya memeriksa apakah URL browser saat ini diawali dengan path .

Misalnya rute kami sebelumnya:

 { path: 'contacts', component: ContactListComponent}

Bisa juga ditulis sebagai:

 { path: 'contacts',pathMatch: 'prefix', component: ContactListComponent}

Atribut patchMath menentukan strategi pencocokan. Dalam hal ini, awalan yang merupakan default.

Strategi pencocokan kedua penuh . Saat ditentukan untuk rute, router akan memeriksa apakah jalurnya sama persis dengan jalur URL browser saat ini:

 { path: 'contacts',pathMatch: 'full', component: ContactListComponent}

Rute Params

Membuat rute dengan parameter adalah fitur umum di aplikasi web. Router Sudut memungkinkan Anda mengakses parameter dengan cara yang berbeda:

• Menggunakan layanan ActivatedRoute,
• Menggunakan ParamMap yang dapat diamati tersedia mulai dari v4.

Anda dapat membuat parameter rute menggunakan sintaks titik dua . Ini adalah contoh rute dengan parameter id :

 { path: 'contacts/:id', component: ContactDetailComponent}

Penjaga Rute

Penjaga rute adalah fitur dari Router Sudut yang memungkinkan pengembang untuk menjalankan beberapa logika ketika sebuah rute diminta, dan berdasarkan logika itu, mengizinkan atau menolak akses pengguna ke rute tersebut. Ini biasanya digunakan untuk memeriksa apakah pengguna masuk dan memiliki otorisasi sebelum dia dapat mengakses halaman.

Anda dapat menambahkan penjaga rute dengan mengimplementasikan antarmuka CanActivate yang tersedia dari paket @angular/router dan memperluas metode canActivate() yang menyimpan logika untuk mengizinkan atau menolak akses ke rute. Misalnya, penjaga berikut akan selalu mengizinkan akses ke rute:

 class MyGuard implements CanActivate { canActivate() { return true; } }

Anda kemudian dapat melindungi rute dengan penjaga menggunakan atribut canActivate :

 { path: 'contacts/:id, canActivate:[MyGuard], component: ContactDetailComponent}

Arahan Navigasi

Router Sudut menyediakan arahan routerLink untuk membuat tautan navigasi. Arahan ini mengambil jalur yang terkait dengan komponen yang akan dinavigasi. Sebagai contoh:

 <a [routerLink]="'/contacts'">Contacts</a>

Beberapa Outlet Dan Rute Tambahan

Router Sudut mendukung beberapa outlet dalam aplikasi yang sama.

Sebuah komponen memiliki satu rute utama yang terkait dan dapat memiliki rute tambahan. Rute tambahan memungkinkan pengembang untuk menavigasi beberapa rute secara bersamaan.

Untuk membuat rute tambahan, Anda memerlukan outlet router bernama tempat komponen yang terkait dengan rute tambahan akan ditampilkan.

 <router-outlet></router-outlet> <router-outlet name="outlet1"></router-outlet>

• Outlet tanpa nama adalah outlet utama.
• Semua outlet harus memiliki nama kecuali outlet utama.

Anda kemudian dapat menentukan outlet tempat Anda ingin merender komponen menggunakan atribut outlet:

 { path: "contacts", component: ContactListComponent, outlet: "outlet1" }

Membuat Proyek Demo Angular 7

Di bagian ini, kita akan melihat contoh praktis tentang cara mengatur dan bekerja dengan Router Sudut. Anda dapat melihat demo langsung yang akan kami buat dan repositori GitHub untuk proyek tersebut.

Menginstal Angular CLI v7

CLI sudut membutuhkan Node 8.9+ , dengan NPM 5.5.1+ . Anda perlu memastikan bahwa Anda telah menginstal persyaratan ini di sistem Anda, lalu jalankan perintah berikut untuk menginstal versi terbaru Angular CLI:

 $ npm install -g @angular/cli

Ini akan menginstal Angular CLI secara global.

Catatan : Anda mungkin ingin menggunakan sudo untuk menginstal paket secara global, tergantung pada konfigurasi npm Anda.

Membuat Proyek Angular 7

Membuat proyek baru hanya dengan satu perintah, Anda hanya perlu menjalankan perintah berikut:

 $ ng new angular7-router-demo

CLI akan menanyakan apakah Anda ingin menambahkan perutean (ketik N untuk Tidak karena kita akan melihat bagaimana kita dapat menambahkan perutean secara manual) dan format stylesheet mana yang ingin Anda gunakan, pilih CSS, opsi pertama lalu tekan Enter . CLI akan membuat struktur folder dengan file yang diperlukan dan menginstal dependensi yang diperlukan proyek.

Membuat Layanan Back-End Palsu

Karena kita tidak memiliki back-end asli untuk berinteraksi, kita akan membuat back-end palsu menggunakan perpustakaan angular-in-memory-web-api yang merupakan API web dalam-memori untuk demo dan pengujian Angular yang mengemulasi operasi CRUD melalui REST API.

Ia bekerja dengan mencegat permintaan HttpClient yang dikirim ke server jauh dan mengarahkannya ke penyimpanan data dalam memori lokal yang perlu kita buat.

Untuk membuat back-end palsu, kita perlu mengikuti langkah-langkah berikut:

1. Pertama, kita menginstal modul angular-in-memory-web-api ,
2. Selanjutnya, kami membuat layanan yang mengembalikan data palsu,
3. Terakhir, konfigurasikan aplikasi untuk menggunakan back-end palsu.

Di terminal Anda, jalankan perintah berikut untuk menginstal modul angular-in-memory-web-api dari npm:

 $ npm install --save angular-in-memory-web-api

Selanjutnya, buat layanan back-end menggunakan:

 $ ng gs backend

Buka file src/app/backend.service.ts dan impor InMemoryDbService dari modul angular-in-memory-web-api :

 import {InMemoryDbService} from 'angular-in-memory-web-api'

Kelas layanan perlu mengimplementasikan InMemoryDbService dan kemudian mengganti metode createDb() :

 @Injectable({ providedIn: 'root' }) export class BackendService implements InMemoryDbService{ constructor() { } createDb(){ let contacts = [ { id: 1, name: 'Contact 1', email: '[email protected]' }, { id: 2, name: 'Contact 2', email: '[email protected]' }, { id: 3, name: 'Contact 3', email: '[email protected]' }, { id: 4, name: 'Contact 4', email: '[email protected]' } ]; return {contacts}; } }

Kami hanya membuat array kontak dan mengembalikannya. Setiap kontak harus memiliki id.

Terakhir, kita hanya perlu mengimpor InMemoryWebApiModule ke dalam file app.module.ts , dan menyediakan layanan back-end palsu kita.

 import { InMemoryWebApiModule } from “angular-in-memory-web-api”; import { BackendService } from “./backend.service”; /* ... */ @NgModule({ declarations: [ /*...*/ ], imports: [ /*...*/ InMemoryWebApiModule.forRoot(BackendService) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Selanjutnya buat ContactService yang merangkum kode untuk bekerja dengan kontak:

 $ ng gs contact

Buka file src/app/contact.service.ts dan perbarui agar terlihat mirip dengan kode berikut:

 import { Injectable } from '@angular/core'; import { HttpClient } from “@angular/common/http”; @Injectable({ providedIn: 'root' }) export class ContactService { API_URL: string = "/api/"; constructor(private http: HttpClient) { } getContacts(){ return this.http.get(this.API_URL + 'contacts') } getContact(contactId){ return this.http.get(`${this.API_URL + 'contacts'}/${contactId}`) } }

Kami menambahkan dua metode:

• getContacts()
  Untuk mendapatkan semua kontak.
• getContact()
  Untuk mendapatkan kontak dengan id.

Anda dapat mengatur API_URL ke URL apa pun karena kami tidak akan menggunakan back-end yang sebenarnya. Semua permintaan akan dicegat dan dikirim ke back-end dalam memori.

Membuat Komponen Sudut Kami

Sebelum kita dapat melihat cara menggunakan fitur Router yang berbeda, pertama-tama mari kita buat sekumpulan komponen dalam proyek kita.

Buka terminal Anda dan jalankan perintah berikut:

 $ ng gc contact-list $ ng gc contact-detail

Ini akan menghasilkan dua komponen ContactListComponent dan ContactDetailComponent dan menambahkannya ke modul aplikasi utama.

Menyiapkan Perutean

Dalam kebanyakan kasus, Anda akan menggunakan CLI Angular untuk membuat proyek dengan pengaturan perutean tetapi dalam kasus ini, kami akan menambahkannya secara manual sehingga kami bisa mendapatkan ide yang lebih baik tentang cara kerja perutean di Angular.

Menambahkan Modul Perutean

Kita perlu menambahkan AppRoutingModule yang akan berisi rute aplikasi kita dan outlet router tempat Angular akan memasukkan komponen yang saat ini cocok tergantung pada URL browser saat ini.

Kita lihat saja nanti:

• Cara membuat Modul Sudut untuk perutean dan mengimpornya;
• Bagaimana menambahkan rute ke komponen yang berbeda;
• Bagaimana cara menambahkan outlet router.

Pertama, mari kita mulai dengan membuat modul perutean dalam file app-routing.module.ts . Di dalam src/app buat file menggunakan:

 $ cd angular7-router-demo/src/app $ touch app-routing.module.ts

Buka file dan tambahkan kode berikut:

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

Kita mulai dengan mengimpor NgModule dari paket @angular/core yang merupakan dekorator TypeScript yang digunakan untuk membuat modul Angular.

Kami juga mengimpor kelas RouterModule dan Routes dari paket @angular/router . RouterModule menyediakan metode statis seperti RouterModule.forRoot() untuk meneruskan objek konfigurasi ke Router.

Selanjutnya, kita mendefinisikan sebuah array routes konstan dari tipe Routes yang akan digunakan untuk menyimpan informasi untuk setiap rute.

Terakhir, kami membuat dan mengekspor modul bernama AppRoutingModule (Anda dapat menyebutnya apa pun yang Anda inginkan) yang merupakan kelas TypeScript yang didekorasi dengan dekorator @NgModule yang mengambil beberapa objek informasi meta. Dalam atribut imports objek ini, kita memanggil metode static RouterModule.forRoot(routes) dengan array rute sebagai parameter. Dalam array exports kami menambahkan RouterModule .

Mengimpor Modul Perutean

Selanjutnya, kita perlu mengimpor perutean modul ini ke modul aplikasi utama yang ada di file src/app/app.module.ts :

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Kami mengimpor AppRoutingModule dari ./app-routing.module dan kami menambahkannya ke dalam larik imports modul utama.

Menambahkan Outlet Router

Terakhir, kita perlu menambahkan outlet router. Buka file src/app/app.component.html yang berisi template aplikasi utama dan tambahkan komponen <router-outlet> :

 <router-outlet></router-outlet>

Di sinilah Angular Router akan merender komponen yang sesuai dengan jalur browser saat ini.

Itu semua langkah yang perlu kita ikuti untuk mengatur perutean secara manual di dalam proyek Angular.

Membuat Rute

Sekarang, mari tambahkan rute ke dua komponen kita. Buka file src/app/app-routing.module.ts dan tambahkan rute berikut ke larik routes :

 const routes: Routes = [ {path: 'contacts' , component: ContactListComponent}, {path: 'contact/:id' , component: ContactDetailComponent} ];

Pastikan untuk mengimpor dua komponen dalam modul perutean:

 import { ContactListComponent } from './contact-list/contact-list.component'; import { ContactDetailComponent } from './contact-detail/contact-detail.component';

Sekarang kita dapat mengakses dua komponen dari jalur /contacts dan contact/:id .

Menambahkan Tautan Navigasi

Selanjutnya mari tambahkan tautan navigasi ke template aplikasi kita menggunakan direktif routerLink . Buka src/app/app.component.html dan tambahkan kode berikut di atas outlet router:

 <h2><a [routerLink] = "'/contacts'">Contacts</a></h2>

Selanjutnya kita perlu menampilkan daftar kontak di ContactListComponent . Buka src/app/contact-list.component.ts lalu tambahkan kode berikut:

 import { Component, OnInit } from '@angular/core'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-list', templateUrl: './contact-list.component.html', styleUrls: ['./contact-list.component.css'] }) export class ContactListComponent implements OnInit { contacts: any[] = []; constructor(private contactService: ContactService) { } ngOnInit() { this.contactService.getContacts().subscribe((data : any[])=>{ console.log(data); this.contacts = data; }) } }

Kami membuat larik contacts untuk menyimpan kontak. Selanjutnya, kami menyuntikkan ContactService dan kami memanggil metode getContacts() dari instance (pada peristiwa siklus hidup ngOnInit ) untuk mendapatkan kontak dan menetapkannya ke larik contacts .

Selanjutnya buka file src/app/contact-list/contact-list.component.html dan tambahkan:

 <table> <tr> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> <tr *ngFor="let contact of contacts" > <td>{{ contact.name }}</td> <td>{{ contact.email }}</td> <td> <a [routerLink]="['/contact', contact.id]">Go to details</a> </td> </tr> </table>

Kami mengulang kontak dan menampilkan nama dan email setiap kontak. Kami juga membuat tautan ke setiap komponen detail kontak menggunakan direktif routerLink .

Ini adalah tangkapan layar komponen:

Saat kita mengklik tautan Go to details , kita akan dibawa ke ContactDetailsComponent . Route memiliki parameter id , mari kita lihat bagaimana kita dapat mengaksesnya dari komponen kita.

Buka file src/app/contact-detail/contact-detail.component.ts dan ubah kodenya agar mirip dengan kode berikut:

 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-detail', templateUrl: './contact-detail.component.html', styleUrls: ['./contact-detail.component.css'] }) export class ContactDetailComponent implements OnInit { contact: any; constructor(private contactService: ContactService, private route: ActivatedRoute) { } ngOnInit() { this.route.paramMap.subscribe(params => { console.log(params.get('id')) this.contactService.getContact(params.get('id')).subscribe(c =>{ console.log(c); this.contact = c; }) }); } }

Kami menyuntikkan ContactService dan ActivatedRoute ke dalam komponen. Dalam peristiwa siklus hidup ngOnInit() kami mengambil parameter id yang akan diteruskan dari rute dan menggunakannya untuk mendapatkan detail kontak yang kami tetapkan ke objek contact .

Buka file src/app/contact-detail/contact-detail.component.html dan tambahkan:

 <h1> Contact # {{contact.id}}</h1> <p> Name: {{contact.name}} </p> <p> Email: {{contact.email}} </p> 

Saat pertama kali mengunjungi aplikasi kita dari 127.0.0.1:4200/ , outlet tidak merender komponen apa pun, jadi mari arahkan jalur kosong ke jalur contacts dengan menambahkan rute berikut ke larik rute:

 {path: '', pathMatch: 'full', redirectTo: 'contacts'}

Kami ingin mencocokkan jalur kosong yang tepat, itulah sebabnya kami menentukan strategi pencocokan lengkap .

Kesimpulan

Dalam tutorial ini, kita telah melihat cara menggunakan Angular Router untuk menambahkan perutean dan navigasi ke dalam aplikasi kita. Kami telah melihat konsep yang berbeda seperti outlet Router, rute, dan jalur dan kami membuat demo untuk secara praktis menunjukkan konsep yang berbeda. Anda dapat mengakses kode dari repositori ini.