AngularJs nedir? nasıl çalışır?

AngularJs nedir? nasıl çalışır?

AngulaJS ile DOM objelerini yani özetle HTML yapısını kolaylıkla maniple 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.

Aşağıdaki kodu <head> tagları 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.

[syntax type=”html”]

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

[/syntax]

kaynak : http://bit.ly/1BD7Vqh

Hakan AK