AngularJS 4'e Giriş

Bu yazıda AngularJS'in yeni versiyonu olan 4'e bir giriş yapacağız. Geliştirme ortamının hazırlanması, yeni bir proje oluşturma, uygulamayı çalıştırma ve ilk Angular componentimizi düzenleme işlemlerine bakacağız.

1. Geliştirme Ortamının Hazırlanması

Bu kısımda Angular'ın command line interface'i olan Angular CLI'dan biraz bahsetmek istiyorum. Angular CLI bizim proje oluşturabilmemize, dosyalar eklememize, test, bundling ve deployment yapabilmemizi sağlayan bir araçtır. Biz de ilk projemizi oluştururken Angular CLI'dan yararlanacağız.

Eğer sistemimizde kurulu değilse ilk olarak sistemize Node.js kurulumu yapmak ile başlayacağız. Node.js'i buradan indirerek bilgisayarınıza kurabilirsiniz. Kurulum yapıldıktan sonra cmd ile komut satırında girerek aşağıdaki komut ile Angular CLI yükleme işlemini yapacağız.

npm install -g @angular/cli

2. Yeni Proje Oluşturma

Bir terminal penceresi açıp aşağıdaki komutu çalıştırarak yeni bir proje iskeleti oluşturacağız.

ng new my-app

Npm paketlerinin yüklenmesi için bu işlem biraz zaman alacaktır.

3. Uygulamanın Çalıştırılması

Oluşturulan projenin dizinine gidip server'ı çalıştıracağız.

cd my-app ng serve --open

Ng serve komutu server'ı çalıştırır, dosyalarınızı izler ve siz o dosyalarda herhangi bir değişiklik yaptığınızda uygulamayı rebuild eder.

--open komutu da otomatik olarak http://localhost:4200/ portundan browserı çalıştırır.

Buraya kadar işlemleri başarı ile gerçekleştirdiyseniz, uygulama aşağıdaki gibi bir mesajla karşınıza gelecektir:

4. İlk Angular Componentimizi Düzenleme

Projeyi oluşturduğumuzda Angular CLI bize bir component zaten oluşturdu. Bu bizim root-componentimiz ve app-root olarak adlandırılıyor. Bu componenti ./src/app/app.component.ts dizini altında görebilirsiniz. 

Kodları biraz inceleyecek olursak; app.component.html dosyasının içinde aşağıdaki kısım bulunmakta:

  <h1>  
   Welcome to {{title}}!  
  </h1>  

Burada {{title}} şeklinde yazılan yere bizim componentimizin title özelliği geliyor. Bu title yazılan yere istediğimi değişken ismini verebiliriz. Ama bunun hem html, hemde ts dosyamızda aynı isimde olması gerekiyor.

Component dosyamızı açalım ve bu componentin title özelliğini aşağıdaki gibi değiştirelim:

export class AppComponent { title = 'my new Angular app!'; }

Dosyayı kaydettiğimizde browser otomatik olarak yaptığımız değişikliği algılayacaktır.

Eğer bu componente bir style vermek istiyorsak, src/app/app.component.css dizini altındaki component.css dosyamızı aşağıdaki gibi güncelleyebiliriz:

h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; }

Dosyayı kaydettiğimizde son ekran görüntümüz aşağıdaki şekilde olacaktır:

Gördüğümüz gibi componentimizin title özelliğini değiştirip, ona yeni bir stil vererek yeni bir görünüme kavuşmasını sağladık. Siz de istediğiniz şekilde burdan componentinizin stil dosyasını güncelleyebilirsiniz.

Componentimizin hangi style dosyasını ve hangi html templateini nerden bildiği sorusu aklımıza gelebilir. Bu kısım da yine component dosyası içindeki aşağıdaki kısımda tanımlanmış durumda:

 @Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
 })  

Böylece yeni AngularJS ile bir proje oluşturma, projeyi çalıştırma, bir componentin görünümünü değiştirme gibi konuları incelemiş olduk.

Yazıyı Oku