AngularJS Nedir?

Googlenin desteklediği bir framework olan AngularJS içinde en çok söz edilen MVC yapısıdır.
AngularJS http://angularjs.org sitesine girip Javascript kütüphanesini indirebilirsiniz. AngularJs’in kendi resmi sitesi olduğu için en önemli ve doğru kaynakları bu siteden elde etmek mümkün. Menüde bulunan Learn, Tutorial bölümlerinden öğrenmeye başlamak en doğrusu. Youtube de videoların yayınlandığı bir kanalda mevcut. AngularJs’i öğrenmek için çok yararlı bir kanal olduğu kesin. Sayfaya buradan ulaşabilirsiniz AngularJS youtube kanalı: http://www.youtube.com/user/angularjs

İlk Örnek;

<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="isminiz" placeholder="Adınızı Giriniz"> <br/>
Merhaba {{isminiz}}
</body>
</html>

Bu örneği bir browser ile açtığınız zaman karşınıza bir textbox çıkacak ver textbox’a girilen metin “Merhaba”dan sonra yer alıyor olacak. Peki bu nasıl gerçekleşiyor? ng-app ve ng-model gibi bazı attribute’ler dikkatinizi çekmiş olmalı, evet bu attribute’ler angular.js’in yorumladığı attribute’ler.
– ng-app: bu directive (daha sonra directive’lerin ne olduklarına değineceğiz) en basit anlamda Angular.js’in kapsama alanını belirler. Yani burada demek istediğimiz tag’leri arasına yazılmış tüm kodlar angular.js tarafından elden geçirilsin. Eğer ng-app’i herhangi bir div’e verirsek sadece ilgili div Angular.js tarafından yorumlanır.
– ng-model: bu directive scope’unuzda bir değişken tanımlanızı sağlar ve bu değişkenin binding’ini ilgili elementin value’usu veya text’i olarak ayarlar. Burada two way binding (Türkçeleştirmek gerekirse çift taraflı bağlama belki uygun olabilir) kurulur.
– {{isminiz}}: çift süslü parantezler arasına scope içerisinde tanımlanan değişkenleri kullanarak bunları ekranda gösterebilir veya çeşitli işlemlere sokabiliriz.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s