Birden çok sayfaya sahip bir Angular uygulaması oluşturuyorsanız, bunlar arasında gezinmek için yönlendirmeyi kullanmanız gerekir. Bunu, yönlendirme modülündeki her sayfa için bir yol içeren bir yol listesi oluşturarak yapabilirsiniz.
Daha sonra bir bağlantı etiketi kullanarak bir HTML dosyasındaki diğer sayfalara yönlendirebilirsiniz. Router.navigate() yöntemini kullanarak bir TypeScript dosyasındaki diğer sayfalara da yönlendirebilirsiniz.
Angular Uygulamada Yeni Sayfa Nasıl Oluşturulur
İlk olarak, yeni bir Angular uygulaması oluşturun. Mevcut olanı da kullanabilirsiniz. Yeni bir Angular uygulamasının nasıl oluşturulacağını bilmiyorsanız, diğer uygulamalarla birlikte bu uygulamayı öğrenebilirsiniz. Angular'da kullanılan giriş kavramları.
-
Angular uygulamanızda yeni bir bileşen oluşturun kullanmak bileşen oluşturmak emretmek:
bileşen ana sayfası oluşturmak - Aç src/app/home/home.component.html dosya ve mevcut içeriği yeni içerikle değiştirin.
<div sınıfı="içerik">
<h2> Ev </h2>
<p>
Düğün fotoğrafçılığı yapan bir fotoğrafçıyım. Projelerime göz atın!
</p>
<div sınıfı="kart">
<h4> John & Amy </h4>
<p> Mavi Dağlar, Avustralya </p>
</div>
<div sınıfı="kart">
<h4> Ross & Rach </h4>
<p> Hunter Valley Bahçeleri, Avustralya </p>
</div>
</div> - doldur src/app/home/home.component.css HTML içeriği için stil içeren dosya.
.içerik {
satır yüksekliği: 2geri;
yazı Boyutu: 1.2em;
}.kart {
kutu-gölge: 0 4piksel 8piksel 0 rgba(0, 0, 0, 0.2);
Genişlik: 400piksel;
dolgu malzemesi: 16piksel;
kenar boşluğu: 24piksel 0piksel;
arka plan rengi: Beyaz duman;
font ailesi: sans Serif;
} - kullanarak başka bir bileşen oluşturun. bileşen oluşturmak terminalde komut. Yeni bileşeni yaklaşık sayfası olarak kullanacaksınız.
hakkında bileşen oluşturmak - Aç src/app/about/about.component.html dosya ve mevcut içeriği yeni içerikle değiştirin.
<div sınıfı="içerik">
<h2> Benim hakkımda </h2>
<p>
ben'm John ve fotoğraf çekmeyi seviyorum. 25 yılı aşkın süredir fotoğraf çekiyorum. Beni sosyal medyamda ziyaret edin:
</p>
<a href=""> Facebook </a><br>
<a href=""> LinkedIn </a><br>
<a href=""> Instagram </a><br>
</div> - doldur src/app/about/about.component.css HTML içeriği için stil içeren dosya.
.içerik {
satır yüksekliği: 2geri;
yazı Boyutu: 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 örnekte, uygulamanın tamamı için bir yönlendirme dosyası bulunur. src/app/app-routing.module.ts.
- Uygulamanızda uygulama yönlendirme modülü dosyası yoksa, aşağıdakileri kullanarak bir tane oluşturabilirsiniz: modül oluşturma emretmek. Bir komut satırında veya terminalde, uygulamanın kök klasörüne gidin ve aşağıdaki komutu çalıştırın:
modül oluşturma uygulaması yönlendirme --module uygulaması --flat - Bu, dosyanızda bir app-routing.module.ts dosyası oluşturacaktır. kaynak/uygulama dosya.
- Dosyanın üst kısmında, Ana Sayfa ve Hakkında bileşenleri için ek içe aktarmalar ekleyin. RouterModule ve CommonModule'u da içe aktardığınızdan emin olun; sonuçta, import ifadeleriniz şöyle görünmelidir:
içe aktarmak { Ortak Modül } itibaren '@açısal/ortak';
içe aktarmak { Rotalar, RouterModule } itibaren '@açısal/yönlendirici';
içe aktarmak { Ev Bileşeni } itibaren './home/home.component';
içe aktarmak { Bileşen Hakkında } itibaren './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 rotalar: Rotalar = [
{ yol: '', bileşen: Ana Bileşen },
{ yol: 'hakkında', bileşen: Bileşen Hakkında }
]; - NgModule bloğunu, RouterModule'u import ve export dizisine ekleyen aşağıdaki ile değiştirin.
@NgModule({
bildirimler: [],
ithalat: [
ortak Modül,
RouterModule.forRoot (yollar)
],
dışa aktar: [RouterModule]
}) - İçinde src/app/app.component.html dosya, mevcut içeriği kaldırın ve yönlendirici çıkış etiketini ekleyin.
<div sınıfı="konteyner">
<yönlendirici çıkışı></router-outlet>
</div>
Bir HTML Dosyasında Yeni Sayfaya Nasıl Gidilir?
Bir HTML dosyasındaki bir sayfaya gitmek için bağlantı etiketini kullanın. href niteliğine, route dizisinde belirttiğiniz yolu ekleyin.
- İçinde 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 sınıfı="gezinme çubuğu">
<bir sınıf="bağlantı" href="">Ev</a>
<bir sınıf="bağlantı" href="/about">Hakkında</a>
</div> - için biraz stil ekleyin src/app/app.component.css dosya.
.konteyner {
kenar boşluğu: 48piksel 35%;
font ailesi: &alıntı;Arial&alıntı;, sans Serif;
Görüntüle: esnek;
esnek yön: kolon;
hizalama öğeleri: merkez;
}.navbar {
arka plan rengi: koyu gri;
dolgu malzemesi: 30piksel 50piksel;
Görüntüle: esnek;
hizalama öğeleri: merkez;
font ailesi: sans Serif;
}.bağlantı:türünün ilk örneği {
kenar-sağ: 32piksel;
}.bağlantı {
renk: beyaz;
metin-dekorasyon: Yok;
yazı Boyutu: 14nokta;
yazı tipi ağırlığı: gözü pek;
} - içindeki genel sayfa kenar boşluğuna biraz stil ekleyin. kaynak/styles.css.
gövde {
kenar boşluğu: 0;
dolgu malzemesi: 0;
} - Bir komut isteminde veya terminalde, Angular uygulamasının kök klasörüne gidin. kullanarak uygulamayı çalıştırın. hizmet etmek komutunu verin ve derlemenin bitmesini bekleyin.
hizmet etmek - Bir tarayıcıda, uygulamanızı görüntülemek için localhostURL'yi URL çubuğuna yazın. Varsayılan olarak, bu genellikle http://localhost: 4200/.
- Web siteniz Ana sayfaya yüklenecektir.
- Gezinme çubuğundaki Hakkında bağlantısına tıklayarak Hakkında sayfasına gidebilirsiniz.
TypeScript Dosyasında Yeni Sayfaya Nasıl Gidilir
Şimdiye kadar bu demo, gezinme sağlamak için standart HTML bağlantılarını kullanır. HTML dosyası yerine TypeScript dosyasını kullanarak gezinmek için şunu kullanabilirsiniz: yönlendirici.navigate().
- İçinde src/app/app.component.html dosya, bağlantı etiketlerini kaldırın ve bunları düğme etiketleriyle değiştirin. Bu düğmeler, clickButton() adlı bir işlevi tetikleyen bir tıklama olayına sahip olacaktır. clickButton() işlevini çağırdığınızda, URL rota yolunu argüman olarak ekleyin.
<düğme sınıfı="bağlantı" (tıklayın)="tıklamaDüğmesi('')">Ev</button>
<düğme sınıfı="bağlantı" (tıklayın)="tıklamaDüğmesi('/about')">Hakkında</button> - içindeki düğmelere biraz stil ekleyin. src/app/app.component.css dosya.
buton {
arka plan rengi: siyah;
dolgu malzemesi: 4piksel 8piksel;
imleç: Işaretçi;
} - üst kısmında src/app/app.component.ts dosyası, yönlendiriciyi içe aktarın.
içe aktarmak { Yönlendirici } itibaren '@açısal/yönlendirici'; - AppComponent sınıfının içine yeni bir kurucu ekleyin ve yönlendiriciyi parametrelerin içine enjekte edin.
yapıcı(özel yönlendirici: Yönlendirici) {
} - 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 (yol: dize) {
Bu.router.navigate([yol]);
} - Komut isteminde veya terminalde ng serve komutunu yeniden çalıştırın.
hizmet etmek - Bir tarayıcıda web sitenize gidin. href şimdi iki düğme ile değiştirildi.
- Tıkla Hakkında buton. Hakkında sayfasına yönlendirilecektir.
Angular Uygulamada Birden Çok Sayfa Oluşturma
Yönlendirmeyi kullanarak bir Angular uygulamasında birden çok sayfa arasında yönlendirme yapabilirsiniz. Her sayfa için ayrı bileşenleriniz varsa, yönlendirme modülünde rotalarınız için yolları yapılandırabilirsiniz.
Bir HTML dosyası aracılığıyla başka bir sayfaya gitmek için, o sayfanın yönlendirme yolu olarak href özniteliğine sahip bir bağlantı etiketi kullanın. TypeScript dosyası aracılığıyla başka bir sayfaya gitmek için router.navigate() yöntemini kullanabilirsiniz.
Bir Angular uygulaması oluşturuyorsanız, Angular yönergelerini kullanabilirsiniz. Bunlar, bir bileşenin HTML dosyası içinde dinamik if ifadeleri, döngüler veya diğer mantıksal işlemleri kullanmanıza izin verir.
