Angular Yapısı ve Geliştirme Ortamı
Angular Yapısı
Bu yazı serisinde Angular ile proje oluşturmanın temellerini inceleyeceğiz.
Konumuz ağır ve uzun, bu yüzden yavaş ilerleyeceğiz. Kod yazmadan önce bir Angular projesinin yapısını görelim.
Angular uygulaması 5 ayrı bölümden oluşur:
- Module
- Component
- Directive
- Routing
- Service
Module
Bir uygulamanın ana yapısını oluşturan bölümdür ve proje içerisinde 1'den fazla module olabilir.
Module içerisinde component, service, route, directive bulunabilir.
Yukarıda bulunan görselde 4 ayrı bölüm bulunmaktadır.
- Page Header
- Menu
- Product List
- Page Footer
Bu bölümlerin her biri module olabilir ve bu module lerin içerisinde ihtiyaca göre bir çok component olabilir.
Component
Component içerisinde data, template (HTML), form alanları bulunabilir. Component içerisinde başka component ler bulunabilir ve bu şekilde bir DOM tree oluşturabiliriz.
Directive
DOM içerisinde bulunan HTML elementler üzerinde işlem yapmamızı sağlar. Örneğin, Component içerisinde bulunan HMLT elementlere event bağlayabiliriz.
Service
En basit haliyle projemizin data layer bölümünü oluşturur. Özellikle component içerisinden data almamızı sağlar.
Örneğin, service üzerinde bir metot ile HTTP Request yaparız ve bir sonuç döndürürüz. Component bölümünden, service metodunu kullanarak döndürülen sonuca ulaşırız.
Component ise gelen bu data yı render eder ve son kullanıcı için anlamlı hale getirir.
Routing
Projemizin tüm URL yönetimini bu bölümde yaparız. Tarayıcı üzerinde belirtilen URL e gidildiğinde hangi component in görüntüleneceğini belirleriz.
Geliştirme Ortamı
İhtiyaçlar
Kurulum
npm install -g @angular/cliYukarıda bulunan kod bizim için yeterli olacaktır.
Daha sonra aşağıda ki kod ile yeni bir proje oluşturabiliriz.
ng new myAppOluşturduğumuz proje klasörüne gidip aşağıda bulunan kod ile projemizi çalıştırabiliriz.
ng serveVisual Studio Code ile proje klasörümüzü açabilir ve artık kod geliştirebiliriz.
Sonraki konumuz Component oluşturmadır.
