Birden çok sayfa içeren bir Açısal uygulama oluşturuyorsanız, aralarında gezinmek için yönlendirmeyi kullanmanız gerekir. Bunu, yönlendirme modülündeki her sayfa için yol içeren bir yol listesi oluşturarak yapabilirsiniz.
Daha sonra bir bağlantı etiketi kullanarak bir HTML dosyası içindeki diğer sayfalara yönlendirebilirsiniz. Router.navigate() yöntemini kullanarak bir TypeScript dosyası içindeki diğer sayfalara da yönlendirebilirsiniz.
Angular Uygulamasında Yeni Sayfa Nasıl Oluşturulur
İlk olarak, yeni bir Açısal uygulama oluşturun. Mevcut olanı da kullanabilirsiniz. Yeni bir Angular uygulamasının nasıl oluşturulacağına aşina değilseniz, bu konuda Angular’da kullanılan diğer giriş niteliğindeki kavramlarla birlikte bilgi edinebilirsiniz .
Angular uygulamanızda ng oluştur bileşen komutunu kullanarak yeni bir bileşen oluşturun:
ng generate component home
src/app/home/home.component.html dosyasını açın ve mevcut içeriği yeni içerikle değiştirin.
<div class=”content”>
<h2> Home </h2>
<p>
I am a photographer that does wedding photography. Check out my projects!
</p>
<div class=”card”>
<h4> John & Amy </h4>
<p> Blue Mountains, Australia </p>
</div>
<div class=”card”>
<h4> Ross & Rach </h4>
<p> Hunter Valley Gardens, Australia </p>
</div>
</div>
src/app/home/home.component.css dosyasını HTML içeriği için stil ile doldurun .
.content {
line-height: 2rem;
font-size: 1.2em;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 400px;
padding: 16px;
margin: 24px 0px;
background-color: whitesmoke;
font-family: sans-serif;
}
Terminalde ng oluştur bileşen komutunu kullanarak başka bir bileşen oluşturun. Yeni bileşeni bir hakkında sayfası olarak kullanacaksınız.
ng generate component about
src/app/about/about.component.html dosyasını açın ve mevcut içeriği yeni içerikle değiştirin.
<div class=”content”>
<h2> About Me </h2>
<p>
I’m John, and I love taking photos. I have been taking photos for over 25 years. Visit me on my social media:
</p>
<a href=””> Facebook </a>
<a href=””> LinkedIn </a>
<a href=””> Instagram </a>
</div>
src/app/about/about.component.css dosyasını HTML içeriği için stil ile doldurun .
.content {
line-height: 2rem;
font-size: 1.2em;
}
İki Sayfa Arasında Nasıl Gezinilir?
Bir sayfadan diğerine gitmek için yönlendirmeyi kullanabilirsiniz. Bunu bir yönlendirme dosyasında yapılandırabilirsiniz. Bu örnek, uygulamanın tamamı için src/app/app-routing.module.ts konumunda bulunan bir yönlendirme dosyasına sahip olacaktır .
Uygulamanız zaten app-routing modül dosyasına sahip değilse, ng create module komutunu kullanarak bir tane oluşturabilirsiniz. Bir komut satırında veya terminalde, uygulamanın kök klasörüne gidin ve aşağıdaki komutu çalıştırın:
ng generate module app-routing –module app –flat
Bu, src/app klasörünüzde bir app-routing.module.ts dosyası oluşturacaktır .
Yönlendirme dosyası ile açısal uygulama dosyası yapısı
Dosyanın en üstüne, Ev ve Hakkında bileşenleri için ek içe aktarmalar ekleyin. RouterModule ve CommonModule öğelerini de içe aktardığınızdan emin olun; sonuçta, içe aktarma ifadeleriniz şöyle görünmelidir:
import { CommonModule } from ‘@angular/common’;
import { Routes, RouterModule } from ‘@angular/router’;
import { HomeComponent } from ‘./home/home.component’;
import { AboutComponent } from ‘./about/about.component’;
İçe aktarmaların altına, her sayfaya yönlendirme yaparken kullanacağınız yolları depolamak için yeni bir rota dizisi ekleyin.
const routes: Routes = [
{ path: ”, component: HomeComponent },
{ path: ‘about’, component: AboutComponent }
];
NgModule bloğunu, RouterModule’ü import ve export dizisine ekleyen aşağıdakiyle değiştirin.
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
src/app/app.component.html dosyasında mevcut içeriği kaldırın ve router-outlet etiketini ekleyin.
<div class=”container”>
<router-outlet></router-outlet>
</div>
Bir HTML Dosyasında Yeni Sayfaya Nasıl Gidilir?
Bir HTML dosyası içindeki bir sayfaya gitmek için bağlantı etiketini kullanın. href özelliğinde, route dizisinde belirttiğiniz yolu ekleyin.
src/app/app.component.html dosyasında, kapsayıcı div’den önce iki bağlantı etiketi ekleyin . Bu, Ana Sayfa ve Hakkında sayfaları arasında gezinmenizi sağlar.
<div class=”navbar”>
<a class=”link” href=””>Home</a>
<a class=”link” href=”/about”>About</a>
</div>
src/app/app.component.css dosyasına biraz stil ekleyin .
.container {
margin: 48px 35%;
font-family: “Arial”, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
.navbar {
background-color: darkslategray;
padding: 30px 50px;
display: flex;
align-items: center;
font-family: sans-serif;
}
.link:first-of-type {
margin-right: 32px;
}
.link {
color: white;
text-decoration: none;
font-size: 14pt;
font-weight: bold;
}
src/styles.css dosyasındaki genel sayfa kenar boşluğuna biraz stil ekleyin .
body {
margin: 0;
padding: 0;
}
Bir komut isteminde veya terminalde, Angular uygulamasının kök klasörüne gidin. Uygulamayı ng serve komutunu kullanarak çalıştırın ve derlemeyi bitirmesini bekleyin.
ng serve
Bir tarayıcıda, uygulamanızı görüntülemek için localhost URL’sini URL çubuğuna yazın. Varsayılan olarak, bu genellikle http://localhost:4200/ şeklindedir .
Web siteniz Ana sayfaya yüklenecektir.
İçeriği olan Açısal Ana Sayfa
Gezinme çubuğundaki Hakkında bağlantısını tıklayarak Hakkında sayfasına gidebilirsiniz.
Hakkında sayfasını gösteren açısal uygulama
Bir TypeScript Dosyasında Yeni Sayfaya Nasıl Gidilir?
Şimdiye kadar bu demo, gezinme sağlamak için standart HTML bağlantılarını kullanıyor. HTML dosyası yerine TypeScript dosyasını kullanarak gezinmek için router.navigate() kullanabilirsiniz .
src/app/app.component.html dosyasında bağlantı etiketlerini kaldırın ve bunları düğme etiketleriyle değiştirin. Bu düğmeler, clickButton() adlı bir işlevi tetikleyen bir click olayına sahip olacaktır. clickButton() işlevini çağırdığınızda, URL yönlendirme yolunu bağımsız değişken olarak ekleyin.
<button class=”link” (click)=”clickButton(”)”>Home</button>
<button class=”link” (click)=”clickButton(‘/about’)”>About</button>
src/app/app.component.css dosyasındaki düğmelere biraz stil ekleyin .
button {
background-color: black;
padding: 4px 8px;
cursor: pointer;
}
src/app/app.component.ts dosyasının en üstünde yönlendiriciyi içe aktarın.
import { Router } from ‘@angular/router’;
AppComponent sınıfının içine yeni bir oluşturucu ekleyin ve yönlendiriciyi parametrelere enjekte edin.
constructor(private router: Router) {
}
Yapıcının altında, ilettiğiniz URL’ye göre yeni sayfaya gidecek olan clickButton() adlı yeni bir işlev oluşturun.
clickButton(path: string) {
this.router.navigate([path]);
}
Komut isteminde veya terminalde ng serve komutunu yeniden çalıştırın.
ng serve
Bir tarayıcıda web sitenize gidin. Href artık iki düğmeyle değiştirilmiştir.
Ana sayfayı gösteren açısal uygulama
Hakkında düğmesine tıklayın . Hakkında sayfasına yönlendirecektir.
Hakkında sayfasını gösteren açısal uygulama
Açısal Uygulamada Birden Çok Sayfa Oluşturma
Yönlendirmeyi kullanarak bir Angular uygulamasında birden çok sayfa arasında geçiş yapabilirsiniz. Her sayfa için ayrı bileşenleriniz varsa, rotalarınız için yolları yönlendirme modülü içinde yapılandırabilirsiniz.
Bir HTML dosyası aracılığıyla başka bir sayfaya gitmek için, o sayfaya yönlendirme yolu olarak href özelliğine sahip bir bağlantı etiketi kullanın. Bir TypeScript dosyası aracılığıyla başka bir sayfaya gitmek için router.navigate() yöntemini kullanabilirsiniz.
Bir Angular uygulaması oluşturuyorsanız, Angular direktiflerini kullanabilirsiniz. Bunlar, bir bileşenin HTML dosyası içinde dinamik if-ifadeleri, for-döngüleri veya diğer mantıksal işlemleri kullanmanıza izin verir.