İkinci dersten herkese merhaba, birinci derste Angular ile Merhaba Dünya Sitesi Yapmak başlığı ile kurulumları yaparak yeni bir proje yaratmıştık. Şimdi bu proje içerisinde yavaş yavaş kodlar yazmaya başlayarak aşağıdaki uygulamayı yapacağız.
1. Kullanmayı tercih ettiğiniz IDE ile Angular proje klasörünü açın. Ben Visual Studio Code kullanıyorum, WebStorm da tercih edilebilir.
2. Sol taraftaki klasör menüsü altından src/app klasörü içerisine gelelim, bugün kodlarımızı yazacağımız dosyalar bu klasörün altında.
3. app.component.ts dosyasının içerisindeki title değerini aşağıdaki gibi değiştirelim:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Merhaba Reitix';
}
4. app.component.html dosyasının içindeki tüm kodları silerek aşağıdaki kodları yapıştıralım:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></head><body>
<div style="text-align:center">
<h1>
{{ title }} Projesine Hoşgeldiniz
</h1>
</div>
</body></html>
5. Sıra geldi projemizi çalıştırmaya ve tarayıcıdan görüntülemeye. IDE'lerin içerisinde gömülü terminaller olduğu için artık Angular projesini çalıştırmak için cmd kullanmaya ihtiyacımız yok. Üstteki menüden terminal > new terminal seçeneğini seçerek yeni bir terminal penceresinin açılmasını sağlıyoruz ve aşağıdaki kodlar ile projemizi çalıştırıyoruz.
ng serve
6. Artık tarayıcıdan http://localhost:4200/ url'sine girerek hazırladığımız tasarımı görebiliriz.