Angular Nedir? Kurulum ve İlk Proje
Merhaba arkadaşlar.
Bugün Angular yazı serisine başlıyoruz. İlk olarak Angular
nedir, ne için kullanılır gibi sorulara cevap verelim. Gerekli kurumlarımızı yapalım ve diğer yazımızda ise çalışma ortamını tanıyalım.
Angular;
javascript tabanlı açık kaynak kodlu yazılım geliştiricilerin web, mobil ve
masaüstü ortamda kolay uygulama geliştirmelerini sağlayan, Google tarafından
desteklenen bir MVC platformudur diyebiliriz.
Angular Single
Page Application uygulamalar geliştirmemize olanak sağlayan bir frameworktür.
Peki nedir bu Single Page Application(SPA)?
İnternet sitelerinin hemen hemen hepsi HTML, CSS, JavaScript, backend' de ise PHP ya da ASP kullanarak geliştiriliyor. Bu geliştirme türlerinde ise sayfalar arası geçiş yaptığınız da bütün kodlar yeniden yükleniyor. Yazdığınız Javascript kodları, CSS kodları tekrar tekrar yüklenmektedir ki bu da ciddi bir kaynak israfı anlamına geliyor.
İşte burada devreye SPA giriyor. Sayfayı yeniden yüklemek yerine sadece ilgili bölümü değiştirir. Şimdi diyebilirsiniz ki " e bunu JQuery ile de yapabiliriz". Doğru JQuery ile de yapılabilir ancak JQuery bir kütüphanedir. Angular ise MVC yapısında oluşturulmuş bir frameworktür.
KURUMLAR
Visual Studio
Code ‘da angular geliştireceğiz. İsterseniz farklı bir editörde kullanılabilir(Sublime
Text vb.) Bir diğer indireceğimiz paket ise Node.js
Visual Studio
Code indirmek için buraya tıklayın.
Node.js indirmek
için buraya tıklayın.
İndirmeler
tamamlandıktan sonra kurulum için cmd ekranını açalım ve aşağıdaki komutu yazalım.
npm install –g @angular/cli
Bu komut ile paketler
otomatik olarak kurulur.
Kurumları
tamamladıktan sonra herhangi bir yere dizin oluşturalım. Bu dizinin içine
projemizi oluşturacağız. Cmd ekranından projemizi oluşturacağımız dizinimize gidelim ve dizin içerisindeyken aşağıdaki komutu yazalım.
ng new
proje_ismi
Kurulum
tamamlandıktan sonra cmd ekranında proje dizinimizin içerisine girelim ve " code . "
yazarak projemizi VS Code üzerinde açalım.
Projemizi çalıştırmak için ise " ng serve --open " yazarız ve tarayıcıda default olarak 4200 portundan projemiz ekrana gelir.
Yorumlar
Yorum Gönder