Açısal Yönlendirme İçin Eksiksiz Bir Kılavuz

Angular 7'ye hala tam olarak aşina değilseniz, sizi bu etkileyici ön uç çerçevesinin sunduğu her şeye daha da yakınlaştırmak istiyorum. Yönlendirici ile ilgili aşağıdakiler gibi farklı kavramları gösteren bir Angular demo uygulamasında size yol göstereceğim:

• yönlendirici çıkışı,
• Yollar ve yollar,
• Navigasyon.

Yönlendirme ve navigasyon uygulamak için Angular yönlendiriciyi kullanacağımız bir demo projesi oluşturmak için Angular CLI v7'yi nasıl kullanacağınızı da göstereceğim. Ama önce, size Angular'ı tanıtmama ve en son sürümündeki bazı önemli yeni özellikleri gözden geçirmeme izin verin.

Angular 7 ile tanışın

Angular, mobil ve masaüstü web için istemci tarafı web uygulamaları oluşturmaya yönelik en popüler ön uç çerçevelerden biridir. Her bileşenin, uygulamanın kullanıcı arayüzünün bir bölümünü kontrol eden, izole edilmiş ve yeniden kullanılabilir bir kod parçası olduğu bileşen tabanlı bir mimariyi takip eder.

Angular'daki bir bileşen, @Component dekoratörüyle süslenmiş bir TypeScript sınıfıdır. Ekli bir şablona ve bileşenin görünümünü oluşturan CSS stil sayfalarına sahiptir.

Angular'ın en son sürümü olan Angular 7, yakın zamanda özellikle CLI araçları ve performansında yeni özelliklerle piyasaya sürüldü, örneğin:

• CLI Komutları: ng add ve ng new oluşturma gibi yaygın bir komut, artık kullanıcıdan yönlendirme ve stil sayfası formatı vb. gibi bir projeye eklenecek işlevleri seçmesini isteyebilir.
  
• Angular Material CDK'ye (Bileşen DevKit) kaydırma ekleme.
• Angular Material CDK'sine sürükle ve bırak desteği ekleme.
• Projeler ayrıca varsayılan olarak, uygulamaları boyut sınırlarını aştığında geliştiricileri uyaracak Bütçe Paketlerini kullanacak şekilde ayarlanmıştır. Varsayılan olarak, boyut 2MB'den fazla olduğunda ve hatalar 5MB'de olduğunda uyarılar verilir. Bu limitleri angular.json dosyanızda da değiştirebilirsiniz. vb.
  

Açısal Yönlendirici Tanıtımı

Angular Router, @angular/router paketinden kurulabilen Angular çekirdek ekibi tarafından oluşturulmuş ve bakımı yapılmış güçlü bir JavaScript yönlendiricisidir. Bileşenleri yetkisiz erişime karşı korumak için birden fazla yönlendirici çıkışı, farklı yol eşleştirme stratejileri, rota parametrelerine kolay erişim ve rota korumaları ile eksiksiz bir yönlendirme kitaplığı sağlar.

Angular yönlendirici, Angular platformunun temel bir parçasıdır. Geliştiricilerin birden çok görünüme sahip Tek Sayfa Uygulamaları oluşturmasına ve bu görünümler arasında gezinmeye izin vermesine olanak tanır.

Şimdi temel Yönlendirici kavramlarını daha ayrıntılı olarak görelim.

Yönlendirici-Çıkış

Router-Outlet , Router'ın mevcut tarayıcının URL'sine göre eşleşen bileşeni eklediği, router kitaplığında bulunan bir direktiftir. Gelişmiş yönlendirme senaryolarını uygulamanıza olanak tanıyan Angular uygulamanıza birden fazla çıkış ekleyebilirsiniz.

 <router-outlet></router-outlet>

Yönlendirici tarafından eşleştirilen herhangi bir bileşen, onu Yönlendirici çıkışının bir kardeşi haline getirecektir.

Rotalar ve Yollar

Rotalar, en az bir yol ve bir bileşen (veya bir yönlendirme yolu) özniteliklerinden oluşan tanımlardır (nesneler). Yol, gösterilmesi gereken benzersiz bir görünümü belirleyen URL bölümünü belirtir ve bileşen, bir yolla ilişkilendirilmesi gereken Angular bileşenini belirtir. Sağladığımız bir rota tanımına dayanarak (statik bir RouterModule.forRoot(routes) yöntemi aracılığıyla), Yönlendirici, kullanıcıyı belirli bir görünüme yönlendirebilir.

Her Route , bir bileşene bir URL path eşler.

Yol, bir uygulamanın varsayılan yolunu belirten boş olabilir ve genellikle uygulamanın başlangıcıdır.

Yol bir joker karakter dizisi ( ** ) alabilir. Yönlendirici, istenen URL tanımlanan rotalar için herhangi bir yolla eşleşmiyorsa bu rotayı seçecektir. Bu, "Bulunamadı" görünümünü görüntülemek veya eşleşme bulunamazsa belirli bir görünüme yeniden yönlendirmek için kullanılabilir.

Bu bir rota örneğidir:

 { path: 'contacts', component: ContactListComponent}

Yönlendirici yapılandırmasına bu rota tanımı sağlanırsa, web uygulaması için tarayıcı URL'si /contacts olduğunda yönlendirici ContactListComponent oluşturur.

Rota Eşleştirme Stratejileri

Angular Router, farklı rota eşleştirme stratejileri sunar. Varsayılan strateji, yalnızca geçerli tarayıcının URL'sinin önüne path eklenmiş olup olmadığını kontrol etmektir.

Örneğin önceki rotamız:

 { path: 'contacts', component: ContactListComponent}

Şu şekilde de yazılabilir:

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

patchMath özelliği, eşleştirme stratejisini belirtir. Bu durumda, varsayılan olan önektir .

İkinci eşleştirme stratejisi dolu . Bir rota için belirtildiğinde, yönlendirici, yolun mevcut tarayıcının URL'sinin yoluna tam olarak eşit olup olmadığını kontrol eder:

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

Rota Parametreleri

Parametrelerle rota oluşturmak, web uygulamalarında yaygın bir özelliktir. Angular Router, parametrelere farklı şekillerde erişmenizi sağlar:

• ActivatedRoute hizmetini kullanarak,
• v4 ile başlayan mevcut ParamMap gözlemlenebilir kullanarak.

İki nokta üst üste sözdizimini kullanarak bir rota parametresi oluşturabilirsiniz. Bu, id parametresine sahip örnek bir yoldur:

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

Rota Muhafızları

Rota koruması, geliştiricilerin bir rota istendiğinde bir miktar mantık çalıştırmasına izin veren ve bu mantığa dayalı olarak kullanıcının rotaya erişimine izin verir veya vermez. Genellikle bir kullanıcının oturum açıp açmadığını ve bir sayfaya erişmeden önce yetkiye sahip olup olmadığını kontrol etmek için kullanılır.

@angular/router paketinde bulunan CanActivate arabirimini uygulayarak bir rota koruması ekleyebilir ve rotaya erişime izin verme veya erişimi reddetme mantığını tutan canActivate() yöntemini genişletebilirsiniz. Örneğin, aşağıdaki koruma her zaman bir rotaya erişime izin verir:

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

Daha sonra canActivate özniteliğini kullanarak bir rotayı guard ile koruyabilirsiniz:

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

Navigasyon Direktifi

Angular Router, navigasyon bağlantıları oluşturmak için routerLink yönergesini sağlar. Bu yönerge, gidilecek bileşenle ilişkili yolu alır. Örneğin:

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

Çoklu Çıkışlar ve Yardımcı Yollar

Angular Router, aynı uygulamada birden fazla çıkışı destekler.

Bir bileşenin ilişkili bir birincil yolu vardır ve yardımcı yolları olabilir. Yardımcı rotalar, geliştiricilerin aynı anda birden fazla rotada gezinmesini sağlar.

Bir yardımcı rota oluşturmak için, yardımcı rota ile ilişkili bileşenin görüntüleneceği adlandırılmış bir yönlendirici çıkışına ihtiyacınız olacak.

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

• İsimsiz çıkış birincil çıkıştır.
• Birincil çıkış dışında tüm çıkışların bir adı olmalıdır.

Daha sonra, outlet özniteliğini kullanarak bileşeninizi oluşturmak istediğiniz çıkışı belirtebilirsiniz:

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

Angular 7 Demo Projesi Oluşturma

Bu bölümde, Angular Router'ın nasıl kurulacağına ve onunla nasıl çalışılacağına dair pratik bir örnek göreceğiz. Oluşturacağımız canlı demoyu ve proje için GitHub deposunu görebilirsiniz.

Angular CLI v7'yi yükleme

Angular CLI, NPM 5.5.1+ ile Düğüm 8.9+ gerektirir. Sisteminizde bu gereksinimlerin kurulu olduğundan emin olmanız ve ardından Angular CLI'nin en son sürümünü yüklemek için aşağıdaki komutu çalıştırmanız gerekir:

 $ npm install -g @angular/cli

Bu, Angular CLI'yi global olarak kuracaktır.

Not : npm yapılandırmanıza bağlı olarak, paketleri global olarak kurmak için sudo kullanmak isteyebilirsiniz.

Angular 7 Projesi Oluşturma

Yeni bir proje oluşturmak bir komut uzağınızda, sadece aşağıdaki komutu çalıştırmanız yeterli:

 $ ng new angular7-router-demo

CLI size yönlendirme eklemek isteyip istemediğinizi soracaktır (Hayır için N yazın çünkü yönlendirmeyi manuel olarak nasıl ekleyebileceğimizi göreceğiz) ve hangi stil sayfası biçimini kullanmak istersiniz, CSS'yi seçin, ilk seçenek olarak Enter basın. CLI, gerekli dosyalarla bir klasör yapısı oluşturacak ve projenin gerekli bağımlılıklarını kuracaktır.

Sahte Bir Arka Uç Hizmeti Oluşturma

Etkileşimde bulunacak gerçek bir arka ucumuz olmadığı için, Angular demoları ve testleri için bir bellek içi web API'si olan açısal angular-in-memory-web-api kitaplığını kullanarak sahte bir arka uç oluşturacağız. bir REST API üzerinden CRUD işlemlerini taklit eder.

Uzak sunucuya gönderilen HttpClient isteklerini yakalayarak çalışır ve bunları oluşturmamız gereken yerel bir bellek içi veri deposuna yönlendirir.

Sahte bir arka uç oluşturmak için sonraki adımları izlememiz gerekiyor:

1. İlk olarak, angular-in-memory-web-api modülünü kuruyoruz,
2. Ardından, sahte verileri döndüren bir hizmet oluşturuyoruz,
3. Son olarak, uygulamayı sahte arka ucu kullanacak şekilde yapılandırın.

Terminalinizde, angular-in-memory-web-api modülünü npm'den kurmak için aşağıdaki komutu çalıştırın:

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

Ardından, aşağıdakileri kullanarak bir arka uç hizmeti oluşturun:

 $ ng gs backend

src/app/backend.service.ts backend.service.ts dosyasını açın ve InMemoryDbService angular-in-memory-web-api modülünden içe aktarın:

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

Hizmet sınıfının InMemoryDbService uygulaması ve ardından createDb() yöntemini geçersiz kılması gerekir:

 @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}; } }

Biz sadece bir dizi kişi oluşturup onları geri gönderiyoruz. Her kişinin bir kimliği olmalıdır.

Son olarak, InMemoryWebApiModule app.module.ts dosyasına aktarmamız ve sahte arka uç hizmetimizi sağlamamız yeterlidir.

 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 { }

Ardından, kişilerle çalışma kodunu içeren bir ContactService oluşturun:

 $ ng gs contact

src/app/contact.service.ts dosyasını açın ve aşağıdaki koda benzeyecek şekilde güncelleyin:

 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}`) } }

İki yöntem ekledik:

• getContacts()
  Tüm kişileri almak için.
• getContact()
  id ile bir kişi almak için.

Gerçek bir arka uç kullanmayacağımız için API_URL herhangi bir URL'ye ayarlayabilirsiniz. Tüm istekler durdurulacak ve bellek içi arka uca gönderilecektir.

Açısal Bileşenlerimizi Oluşturma

Farklı Router özelliklerini nasıl kullanacağımızı görmeden önce, projemizde bir grup bileşen oluşturalım.

Terminalinize gidin ve aşağıdaki komutları çalıştırın:

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

Bu, iki ContactListComponent ve ContactDetailComponent bileşeni oluşturacak ve bunları ana uygulama modülüne ekleyecektir.

Yönlendirmeyi Ayarlama

Çoğu durumda, yönlendirme kurulumuna sahip projeler oluşturmak için Angular CLI'yi kullanırsınız, ancak bu durumda, yönlendirmenin Angular'da nasıl çalıştığı hakkında daha iyi bir fikir edinebilmemiz için onu manuel olarak ekleyeceğiz.

Yönlendirme Modülünü Ekleme

Uygulama rotalarımızı içerecek AppRoutingModule ve Angular'ın tarayıcının mevcut URL'sine bağlı olarak şu anda eşleşen bileşeni ekleyeceği bir yönlendirici çıkışı eklememiz gerekiyor.

Göreceğiz:

• Yönlendirme ve içe aktarma için bir Açısal Modül nasıl oluşturulur;
• Farklı bileşenlere rotalar nasıl eklenir;
• Yönlendirici çıkışı nasıl eklenir.

İlk olarak, bir app-routing.module.ts dosyasında bir yönlendirme modülü oluşturarak başlayalım. src/app içinde aşağıdakileri kullanarak dosyayı oluşturun:

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

Dosyayı açın ve aşağıdaki kodu ekleyin:

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

Angular modülü oluşturmak için kullanılan bir TypeScript dekoratörü olan @angular/core paketinden NgModule içe aktararak başlıyoruz.

Ayrıca @angular/router paketinden RouterModule ve Routes sınıflarını içe aktarıyoruz. RouterModule , bir konfigürasyon nesnesini Router'a geçirmek için RouterModule.forRoot() gibi statik yöntemler sağlar.

Daha sonra, her bir rota için bilgi tutmak için kullanılacak olan Routes türünde bir sabit routes dizisi tanımlarız.

Son olarak, AppRoutingModule (Ne istersen diyebilirsin) adında bir modül oluşturup dışa aktarıyoruz; bu modül, meta bilgi nesnesi alan @NgModule dekoratörüyle süslenmiş bir TypeScript sınıfıdır. Bu nesnenin imports özniteliğinde, route dizisi ile statik RouterModule.forRoot(routes) yöntemini parametre olarak çağırırız. Export dizisine exports RouterModule .

Yönlendirme Modülünü İçe Aktarma

Ardından, bu modül yönlendirmesini src/app/app.module.ts dosyasında bulunan ana uygulama modülüne aktarmamız gerekiyor:

 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 { }

AppRoutingModule ./app-routing.module ve ana modülün imports dizisine ekliyoruz.

Yönlendirici Çıkışını Ekleme

Son olarak, yönlendirici çıkışını eklememiz gerekiyor. Ana uygulama şablonunu içeren src/app/app.component.html dosyasını açın ve <router-outlet> bileşenini ekleyin:

 <router-outlet></router-outlet>

Burası, Angular Router'ın mevcut tarayıcının yoluna karşılık gelen bileşeni oluşturacağı yerdir.

Bir Angular projesi içinde yönlendirmeyi manuel olarak ayarlamak için izlememiz gereken tüm adımlar bu.

Rota Oluşturma

Şimdi iki bileşenimize route ekleyelim. src/app/app-routing.module.ts dosyasını açın ve routes dizisine aşağıdaki yolları ekleyin:

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

Yönlendirme modülündeki iki bileşeni içe aktardığınızdan emin olun:

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

Artık /contacts ve contact/:id yollarından iki bileşene erişebiliriz.

Gezinme Bağlantıları Ekleme

Ardından, routerLink yönergesini kullanarak uygulama şablonumuza navigasyon bağlantıları ekleyelim. src/app/app.component.html açın ve yönlendirici çıkışının üstüne aşağıdaki kodu ekleyin:

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

Daha sonra ContactListComponent içindeki kişi listesini görüntülememiz gerekiyor. src/app/contact-list.component.ts açın ve ardından aşağıdaki kodu ekleyin:

 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; }) } }

Kişileri tutmak için bir contacts dizisi oluşturuyoruz. Ardından, ContactService enjekte ederiz ve contacts almak ve bunları contact dizisine atamak için örneğin ( ngOnInit yaşam döngüsü olayında) getContacts() yöntemini çağırırız.

Ardından src/app/contact-list/contact-list.component.html dosyasını açın ve şunu ekleyin:

 <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>

Kişiler arasında dolaşıyoruz ve her kişinin adını ve e-postasını görüntülüyoruz. Ayrıca routerLink yönergesini kullanarak her kişinin ayrıntılar bileşenine bir bağlantı oluştururuz.

Bu, bileşenin ekran görüntüsüdür:

Ayrıntılara git bağlantısına tıkladığımızda bizi ContactDetailsComponent . Rotanın bir id parametresi var, ona bileşenimizden nasıl erişebileceğimize bakalım.

src/app/contact-detail/contact-detail.component.ts dosyasını açın ve kodu aşağıdaki koda benzeyecek şekilde değiştirin:

 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; }) }); } }

ContactService ve ActivatedRoute enjekte ediyoruz. ngOnInit() yaşam döngüsü olayında, rotadan iletilecek olan id parametresini alırız ve bunu bir contact nesnesine atadığımız kişinin ayrıntılarını almak için kullanırız.

src/app/contact-detail/contact-detail.component.html dosyasını açın ve şunu ekleyin:

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

127.0.0.1:4200/ uygulamamızı ilk ziyaret ettiğimizde, çıkış herhangi bir bileşen oluşturmuyor, bu nedenle, route dizisine aşağıdaki yolu ekleyerek boş yolu contacts yoluna yönlendirelim:

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

Tam boş yolu eşleştirmek istiyoruz, bu yüzden tam eşleştirme stratejisini belirliyoruz.

Çözüm

Bu eğitimde, uygulamamıza yönlendirme ve navigasyon eklemek için Angular Router'ın nasıl kullanılacağını gördük. Yönlendirici çıkışı, rotalar ve yollar gibi farklı konseptler gördük ve farklı konseptleri pratik olarak göstermek için bir demo oluşturduk. Bu depodan koda erişebilirsiniz.