Angular — 2
Bir Angular Hikayesi — Proje Yaratılması & İlk Giriş
Angular hikayemize kurulumlar sonrasında mimari ve proje yapısı ile devam ediyoruz.
Angular projemizi yaratmak için VS Code Terminal üzerinden;
npm init @angular Projeİsmi
komutumuzu çalıştırmamız yeterli olacaktır.
İlgili kısımlar da oluşturulduktan sonra incelemelere ve düzenlemelere başlayabiliriz.
Projemizi çalıştırmak için npm start ya da özel olarak package.json dosyasında belirttiğimiz komutu çalıştırmamız yeterli olacaktır.
Bu adımda kullanıcı yetkisi ya da paketler ile ilgili bir hata alınıyorsa eğer
npm install @angular/core komutunu çalıştırdıktan sonra npm start dememiz fayda sağlayacaktır.
Default olarak http://localhost:4200 portundan çalışmaktadır.
Uygulamamız src klasörümüz altında bulunan App Module tarafından çalışmaktadır ve bu tanımımız main.ts dosyamız içerisinde yapılmaktadır. ;
Default olarak App Module tanımlı olarak gelmektedir.
AppModule harici farklı component, style ve templateler de ekleyebilmekteyiz.
Component nedir diye aklımıza gelebilir, html çıktısına hizmet eden class’tır. Componentleri bloklar olarak düşünebiliriz. Bir class’ın component olabilmesi için @Component tanımlaması gerekmektedir. Oluşturulan component içerisindeki component tanımlamalarında selector, templateUrl gibi özellikler bulunmaktadır.
Selector, componentimizi hangi isim ile çağırılacağını belirtmektedir.
TemplateUrl: Bu componentin html’i nasıl olacak, hangi isimde bir dosya olacağını belirlemektedir.
bu tanımlamalarda “./” ile belirtilmesinin sebebi mevcut bulunulan klasör anlamına gelmektedir.
MVC yapısına benzer olarak düşünecek olursak eğer buradaki component.ts dosyası controller, view dosyası ise bu componentin html dosyası olarak söylenilebilir.
component konsole üzerinden projemize eklemek için;
ng generate component <component-name>
komutumuz ile component oluşturabilmekteyiz.
style ve templatelerimizi de aynı şekilde özellleştirebilmekteyiz.
Bir sonraki yazımda görüşmek üzere , sevgiyle kalın.🌸
