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

Bu blogdaki popüler yayınlar

DLL Dosyalarını Exe'ye Gömme

Jenkins Nedir? Continuous Integration(CI) ve Continuous Deployment(CD) Nedir?

DEVEXPRESS BEAK FORM ( FLYOUTPANEL )