Merhaba,
Bugünlerde bir projede lazım olacağı düşüncesi ile AngularJS ile haşır neşir olmaya başladım. Bugün de giriş niyetinde bir yazı planladım. Bu yazı sonucunda Angular hakkında bir fikrinizin oluşabilmesini amaçlıyorum.
Şunları anlatmaya çalışacağım:
- İlk kurulum ve Örnek proje.
- Proje yapısı, dosyalar hakkında temel bilgilendirme.
Öncelikle şöyle bir bilgi geçmek isterim: Daha önce yani 2017 yılında Udemy‘de Engin Demiroğ tarafından ‘Angular 2 ile Javascript programcılığına giriş‘ kursunu alıp bitirmiştim, bitirme sertifikası. Şimdi tekrar Angular gündemime gelince tekrardan bitirip bilgimi tazeledim. Eğitimin linkini paylaşmak istedim ancak kurs artık yayından olmadığından paylaşamadım. Engin beyin Udemy sayfasına gidip orada ki Angular kurslarına göz atabilirsiniz.
Ek olarak ise Engin Polat beyin burada ki anlatımı çok güzel, temel ve giriş olarak direkt bunu izleseniz yeterli olur ama ben yine yazacağım yazımı 😀
İlk kurulum ve Örnek Proje
1- Editor için Visual Studio Code yüklüyoruz: https://code.visualstudio.com/
Bu isteğe bağlı olup, istediğiniz editörü kullanabilirsiniz. Sonuçta Javascript yazacağımız için, Notepad, Notepad++ vs kullanabilirsiniz. Fakat Visual Studio Code tam bir canavar, herkes gibi bende onu tavsiye ederim :))
2- Javascript kütüphaneleri için NodeJs yüklüyoruz : https://nodejs.org/en/
NodeJs bize Angular projesini derlemek için yardımcı olacak diyebilirim.
3- Scafolding işlemleri için Angular CLI yüklüyoruz : https://cli.angular.io/
CLI ise bize yardımcı olmak için gerekiyor. En basit anlamda anlatmak gerekirse, Angularda, bir sayfa(component) ekleyeceğimiz zaman bunu bir kaç yere tanıtmamız gerekiyor. Fakat CLI yardımıyla tek bir komut ile tanıtılması gereken her yere kendisi otomatik tanıtıyor. Bizleri büyük bir yükten kurtarıyor.
ANGULAR CLI Kurulumu:
- Cmd’yi açıyoruz: Windows + R ile çalıştırı açıp, çalıştıra cmd -administrator yazıp CMD yi açıyoruz.
- npm install -g @angular/cli yazıp enterlıyoruz. Kurulumu kendi yapıp bitiriyor.
Kurulum işlemleri burada sona eriyor. Artık bir proje açıp çalıştırabiliriz.
Örnek Yeni Proje Açma
İlk olarak Angular projelerinizi barındıracağınız bir klasör oluşturun. Örneğin ben Belgelerim altında Angular diye bir klasör açtım. Yeni projelerimi hep bu klasör altında toplayacağım.
cmd -administrator yazıp CMD yi açıyoruz.
ilgili klasörüme cd komut yardımıyla geçiyorum:
İlgili dizindeyken ng new HelloWorld yazıp projemizi oluşturuyorum. Burada biraz bekleyebilirsiniz, gerekli kütüphaneleri bizim için indiriyor.
Proje oluştuktan sonra, cd helloworld komutu ile proje dizinimize geçiyoruz.
ng serve yazıp derliyoruz, artık projemiz hazır ve çalışır halde.
Tarayıcıyı açıp, localhost:4200 yazdığımızda app works! çıktısını görüyorsanız tebrikler proje hazır.
İlk kurulum ve proje oluşturma işlemleri bu kadardır.
Proje yapısı, dosyalar hakkında temel bilgilendirme
Projemizi visual studio code ile açıyorum.
Çok karışık gibi dursa da aslında biz hemen hemen sadece src>app altında ki dosyalar ile uğraşacağız.
Bu dosyalar bizim temel dosyalarımızdır. Tüm işlemler bunlar üzerinden dönüyor gibi düşünebilirsiniz. Tek tek incelemeden önce bazı terimleri açıklamakta fayda görüyorum.
Component: Bir web sitesinde ki sayfa olarak düşünebiliriz, anasayfa, hakkımızda, iletişim vs gibi her bir sayfa Angular’da component olarak adlandırılıyor gibi. Buna göre şuan app. ile başlayan her bir dosya aslında bizim anasayfamıza denk geliyor.
Şimdi nasıl olduğunu açıklayabilirim:
app.component.css
Anasayfamızda yani app componentinde kullanacağımız CSS’ler burada yazılıyor.
app.component.html
html çıktılarımız yani MVC’de ki viewımız diyebiliriz. Tarayıcıda görünen html verilerimizi burda yazıyoruz. Bu örnekte {{title}} yazılmış. title isimli değişkeni okuyup onu gösteriyor. title değişkeni ise app.component.ts içinden geliyor.
app.component.ts
Burasıda bizim MVC’de ki controllerimiz gibi düşünebilirsiniz. Burada değişken tanımlayıp bunu {{title}} gibi yazıp gösterebiliyoruz.
app.module.ts
Bu dosya’da bizim en can alıcı dosyamız 🙂 Burada projede kullanılacak olan componentlerimizi, modüllerimizi, servislerimizi tanıtıyoruz.
Şimdi yeni bir component(sayfa) oluşturalım ve neler oluyor görelim.
proje dizinimizdeyken;
ng generate component about yazıp yeni component oluşturalım.
Burada CLI bizim için devreye giriyor ve gerekli yerlere gerekli tanımları otomatik olarak yapıyor. Komut çalıştıktan sonra app.module.ts dosyasını açalım.
Gördüğünüz gibi AboutComponent buraya otomatik olarak import edilmiş ve modullerede dahil edilmiş.
Aynı zamanda helloworld>src>app altında about klasörü açılmış, bu klasör altında ise about.component dosyaları oluşmuş.
İşte bu işi yapanda Angular CLI. Eğer CLI kullanmasaydık, gidip tek tek bu dosyaları oluşturup, sonrasında app.module e import edecektik.
Peki bu yeni eklediğimiz componenti yani sayfayı, anasayfada ya da başka bir yerde nasıl göstereceğiz, buyrun:
Bir componenti başka componentte kullanmak için ilgili component.ts içinde selector: kısmında yazan değeri alıp kullanıyoruz. Haliyle bu örnekte about.component.ts dosyası içinde ki selector:’app-about’
kısmında yazan değeri kullanacağız. Şimdi bunu kullanamadan önce bir kaç değişiklik yapalım, kafamız karışmasın 🙂
about > about.component.ts dosyasını açıp about değişkeni ekledim.
import { Component, OnInit } from ‘@angular/core’;
about > about.component.html dosyasını açıp aşağıda ki gibi düzenledim.
Consolu açıp proje dizinimdeyken ng serve yazıp derliyorum ve bingo. Tarayıcıda localhost:4200 yazıp baktığınızda sonucu görebilirsiniz.
