AngularJs Nedir
Web uygulamalarında hız ve kolaylık sağlamak amacıyla ortaya çıkmış google tarafından desteklenen bir javascript frameworktür.
Angularjs daha iyi anlayabilmek icin bazı temel kavramlara değinelim
DOM(Document Object Model):Html DOM yapısı sayesinde bir sayfa yüklendiğinde html elemanlarını birer object olarak modelleyip,bunların propertyleri eventleri ve methodlarına erişip değiştirebileceğimiz bir programmatik interface sunar bize.
Örnek olarak bu şekilde demo adlı paragraf elementimizin özelliğini değiştirmiş olduk.
<p id="demo "></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
MVC(Model View Controller):Yazılım mühendisliğinde kullanılan mimari bir desendir.Amaç katmanları birbirini etkilemeyecek şekilde bir yapı kurmaktır
• Model:İş mantığının oluştugu veriye erişim ve validasyon işlemlerinin oldugu katmandır.Genelde databaseden veri atma ve veri alma işlemleri yapan katmandır
• Controller:Viewle model arasındaki köprüdür.kullanıcılardan gelen requestleri değerlendirerek hangi işlemlerin yapılıp kullanıcıya hangi viewin döneceğini belirler.
• View:Uygulamanın arabirimine ait her şey htlm,css view içine girer.Kısaca kullanıcının gördüğü kısımdır.Burada herhangi bir business logic bulunmaz.
Angular JS Temel Özellikleri
1-)Rest Uyumlu:Rest servicelerinden aldıgınız dataları kolayca işleyebilirsiniz
2-)MVW: (Sitesindeki tabirle J Model View Whatever)Yani mvc veya mvvm patternlerine uyumlu mimari tasarımdadır.
3-)Dependency Injection:Yazılımı oluşturan bağların birbirleri ile olan bağlılıgını minimuma indirerek,uygulamalarda değişiklikleri kolayca yapabilecek bir yapı kurmayı sağlayan yazılım patternidir.Angularjs componentler create edip bu komponent arası dependcyleri çözerek başka componentlerinde kullanılmasına olanak sağlar
4-)İki yönlü data binding:Model ve view componentleri arasındaki senkronizasyonu otomatik sağlama.Ng-Model kullanımı.
5-)Template
Yukarıdaki gibi özelliklerde olan bir frameworktür.Bu özellikleri nasıl sağladıgı örneklerle ilerleyen aşamalarda anlatacağız
ANGULARJS Visual STUDIO Ayarları
Öncelikle boş bir web projesi açalım ve Tools à manage nuget packages dan angularjs kütüphanemizi projemize install edelim
Görüldüğü gibi angularjs le alakalı tüm dosyalarımız geldi.Projemize bir tane html sayfa ekleyelim ve ilk angular kodumuzu yazalım.Öncelikle yapmamız gereken şey angular.min.js scriptini sayfamıza atamak.
Angularjs DIRECTIVE:ng önekiyle başlayan html attributeları angular js html compiler ile yorumlanarak çalıştırılır.
Yukarıdaki örnekte
ng-app hangi angularjs applicationına ait oldugunu belirttik
ng-init le angularjs application seveyisinde bir tane değişken tanımladık
ng-bind ile oluşturdugumuz parametreyi set ederek değerini labelin inner htmline atamıs olduk
Angular js DATA BINDING(Datanın model ve view arası senkrozisyonu)
Alttaki örnekte ise ilk olarak directive olarak ng-model görmekteyiz
ng-model: Bu model sayesinde html bir kontrolün (input vs…) değerini bir parametreye atıyoruz.bizim örneğimizde surname parametresine
ve {{ surname }} diyerekte bu değeri ekranı yazdırıyoruz.
{{parametre adı}} bu şekilde yazıma angular js databinding expression denir .
Bu şekilde
Angular JS ng-repeat
Bir foreach yapısı gibi diziler arası gezinmemizi sağlar.Örneğimizde initde bir tane json array de nesneler tanımladık ve ng-repeat ile foreach mantıgında bu nesneler arasında dönerek ekrana yazdırdık
