Angular’a Giriş ve İlk Proje
Merhaba,
Bu yazımda Angular’a yeni başlamak isteyenlere bilgi aktarımı yapmaya çalışacağım. Kurulumlar kısmını anlattıktan sonra örnek proje üzerinden proje mimarisi hakkında bilgi aktaracağım.
Angular Nedir?
Angular, Google tarafından geliştirilen, dinamik güçlü, one page uygulamalar yapılabilen bir javascript framework’üdür. İlerleyen kısımlarda yapacağımız geliştirmelerde gerek nesne yönelimli tabanlı olması sebebiyle gerekse de kodların daha okunaklı (yapısı sebebiyle) hatasız olmasını sağladığı için Typescript kullanacağız.
Kurulumlar
Node.js kurulumu için https://nodejs.org/ sayfasından uzun süreli destek sürümlü versiyonunu kurmak gerekiyor.
Node kurulumu sonrasında cmd üzerinden npm install -g @angular/cli komutunu çalıştırarak AngularCli kurulumunu da tamamlıyoruz.
Örnek Proje
İlk projemizi oluşturmak için cmd veya vs code — new terminal üzerinden projeyi oluşturmak istediğimiz dizine gidip aşağıdaki komutu çalıştırıyoruz.
ng new {project-name}
İlgili komutu girdikten sonra çıkan routing sorusuna y ve styling kısmı için css (isteğe göre diğer styling seçenekleri seçilebilir) seçiyoruz.
Angular projesi ng serve komutuyla çalışır. Komutu girdiğimizde proje http://localhost:4200 adresinde çalışacaktır.
Proje Yapısı Hakkında
Oluşturduğum proje filmlerin listelenebileceği, güncelleme, ekleme ve silme işlemlerinin yapılabileceği bir film projesi. Projede verileri aşağıdaki API vasıtasıyla alacağız.
Angular Dosya Yapısı
Projede filmlerin listeleneceği liste ve film detaylarını görebileceğimiz veya yeni ekleme yapabileceğimiz detay ekranları olacağı için aşağıdaki komutlarla birlikte movie-list ve movie-detail component’ları oluşturacağız.
ng g c movie/movie-list
ng g c movie/movie-detail
İlgili component’ları ekledikten ve proje içerisinde ortak kullanacağımız yapılar için shared klasörünü oluşturduktan sonra projemize ait dosya yapısı aşağıdaki gibi olacaktır.
app.module -> Projemizin ana modül dosyasıdır. Projeye ait kütüphaneleri, projede kullandığımız component’leri içerir.
app.component.ts -> Projemiz içerisindeki main class gibi düşünebiliriz.
app.component.html -> Proje içerisindeki ana html dosyasıdır.
app-routing.module.ts -> Proje içerisinde routing ayarlarını yapabileceğimiz dosyadır.
angular.json -> Projeye ait script ve style gibi bazı ayarların yapılabildiği dosyadır.
package.json -> Projeye eklenmiş kütüphaneleri içeren dosyadır.
Sonuç
Angular nedir, Angular kurulumları nasıl yapılır gibi soruların cevabını bulduk.
Örnek projemizi ve projemize ait ilgili component’ları oluşturduk.
Angular dosya yapısı hakkında ve Angular component’ları hakkında bilgi sahibi olduk.
İlerleyen süreçte projeye çeşitli kütüphaneler ekleyip movie-list ve movie-detail component’ların içini dolduracağız, kullanacağımız api vasıtasıyla verileri göstereceğiz ve routing işlemlerini yapacağız.
Bir sonraki yazımda görüşmek üzere…
Ford Otosan — Dijital Ürünler ve Servisler
Software Development Team Member
Mert Keçer
