AngularJS – Giriş ve Kurulum

AngularJS, Google tarafından geliştirilen ve frontend geliştirmelirimizi iyi bir alt yapı ile oluşturmamıza yardımcı olan bir MVW frameworktür. AngularJS, HTML etiketlerini directiveleri kullanarak genişletir. Bu sayede daha dinamik bir yapı kullanarak templatelerinizi oluşturabilirsiniz. İsterseniz sizde kendi directivlerinizi oluşturarak DOM elementlerine daha fazla hükmedebilirsiniz.

AngularJS’nin en güzel taraflarından birisi two-ways data-binding yapısıdır. Bu sayede HTML templateniz javascript objelerine (model) sorunsuz bir şekilde bağlanır ve anlık değişimler bu sayede hemen HTML görünüme uygulanır. Hatta bunun için bir event bile çağırmanıza gerek yoktur. Ne demek istediğimi sayfanın sonunda gösterdiğim küçük uygulamada daha iyi anlayabilirsiniz.

AngulaJS ile DOM objelerini yani özetle HTML yapısını kolaylıkla manipüle edebilirsiniz, bu sayede tek sayfa web sitelerini veya kompleks web projeleri yoğun javascript kullanımında bile düzgün bir şekilde geliştirirsiniz. AngulaJS’i kullanabilmek için öncelikle websitesinden kütüphane dosyasını indirip sayfanıza ekleyin veya CDN seçeneğini kullanarakda aynı şeyi yapabilirsiniz.

İlk olarak aşağıdaki kodu <head> içine ekleyelim.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>

Ardından <html> etiketini <html ng-app=”uygulama-adi”> şeklinde değiştirelim. Bu şekilde sayfada artık AngularJS kullanıldığını belirtmiş olursunuz. Son hali ise şu şekilde olacaktır:

<!DOCTYPE html>
<html ng-app="website">
<head></pre>
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
</head>

AngularJS kullanırken html etiketlerine “ng-” ile başlayan öznitelikleri atayarak, o elementin hangi işlemi yapacağını belirtiriz. MVC için temel olarak kullanacaklarımız, ng-model, ng-controller ve ng-view‘dir. Bunlara ek olarak döngü işlemleri için ng-repeat, form gönderme işlemleri için ise ng-submit özniteliklerinden yararlanacağız. Son olarak bize lazım olabilecek çıktıları ise {{ değişken-ismi }} şeklinde ekrana basabiliriz.

Şimdi biraz daha açıklayıcı olması açısından küçük bir uygulama yapalım. Bu uygulama ile inputa girilen bir yazıyı sayfa içinde bir alan içine aynı anda yazdıralım.

<div>
	<label>İsminiz:</label>
	<input type="text" ng-model="yourName" placeholder="İsminizi giriniz:">
	<hr>
	<h1>Merhaba {{ yourName }}!</h1>
</div>

Çalışan demosu için tıklayınız.

Sonuç

Tekrar hatırlatmalıyım ki AngularJS güçlü bir yapıya sahip bir MVC frameworktür. İlk yazımda çok temel şeylere değindim. Bende bu konuda yeniyim. Öğrendiğim teknikleri ve ipuçlarını sonraki yazılarımda sizlerle paylaşmaya çalışacağım. Eğer eksik veya hatalı bir bilgi görürseniz, lütefen çekinmeden belirtin 🙂

  
  • Yorumunuz için teşekkür ederim.