AngularJS Nedir?

Google tarafından geliştirmiş MVC yapısını kullanarak aynı knockout’da olduğu gibi güçlü, dinamik, etkileşimli arayüzler yapmayı sağlayan bir javascript framwork’ü dür.AngulrJS’de knockout’da olduğu gibi Data Binding,Routing,Templates gibi farklı birçok yapı vardır.Amaç arayüzde kod bloklarını minimum’a indirmek ve daha kararlı bir yapı izleyerek geliştirme süreçlerini kolaylaştırmaktır.

AngularJS ng-app olarak işaretlenmiş elementin içinde çalışmaktadır.Şimdi angularJs ile neler yapabileceğimize bir bakalım:

Giriş amaçlı alttaki 5 tanımlamayı irdeleyelim.

• ng-app: AngularJs’in çalışacağı block.
• ng-model: Adından da anlaşılacağı gibi modelimiz.
• ng-bind: Tanımlanan modele bağlanan alan.
• ng-init: AngularJS’de kullanılacak değişkenlerin tanımlandığı yer.
• {{ }}:AngularJS expressions ifadelerin tanımlanma şeklidir.

Amacımız istediğimiz bir ad ve soyadı textboxlar içine yazmak.Sonra da tam ismi bunların altında göstermektir.İsim veya soyadı değiştirdiğimiz zaman tam isim de bunlara bağlı olarak değişecektir.

Ekran Çıktısı:Aşağıda görüldüğü üzere AngularJS’in çalışacağı alan div içindeki ng-app ile tanımlanmıştır.ng-init:ile firstName ve lastName diye iki değişken tanımlanmıştır.Daha ilerde bu iki değişken  {{ firstName +” “+ lastName }} şeklinde yazılmıştır.Sonuç Bora Kasmer’dir.Yani tam ismi yazdık.

Ayrıca textboxlara’a ng-model‘ile name  bağlanmıştır.Gene bu name modeline ng-bind ile bağlı olan <p> elementi göstermektedir.Textbox değeri değişince bağlı olduğu model değişeceğinden bu modele balı tüm nesneler bundan etkilenmektedir.Kısaca Texbox’a ne yazar isek <p> içinde yazdığımız değerler gözükmektedir.Bir başka örnek de ng-init ile tanımlanan değişkenler <span> içinde doğrudan ng-bind ile bağlanabilir.

Şimdi de AngularJS’de Objects mantığna bakalım.Object olarak bahsettiğimiz aslında bir class dır.Ve biz bu class’a propertyler tanımlayıp sonrada aynı get{},set{}‘de olduğu gibi degerler atıp çekebiliriz.

Aynı değişkenlerde olduğu gibi ng-init ile değişkenlerimizi tanımlıyoruz.Fakat burda  tanımladığımız superbike adında bir class dan başka birşey değildir.Property lerine değerleri set ettik.Daha sonra altında belirlediğimiz span larda bu class’ın property lerini ng-bind ile bir çeşit get{} ettik.Bir de dizinini ilk elemanını ng-bind=”place[0]” şeklinde veya dizinin üçüncü elemanını expression olarak yandaki gibi  {{ place[3] }} yazdırdık.

Ekran çıktısı:

Şimdi Data Bind üzerinde biraz konuşalım:Altta görüldüğü gibi depo’ya ait property ler tanımlanmıştır.Buna bağlı number inputlar vardır.

Textlerdeki değerler değiştiği zaman bunları temsil eden depoya ait property ler de değişir ve bu modellerin kullanldığı diğer yerler bu değişimden etkilenir.Yani ödenecek miktar otomatik olarak artar veya azalır.

Ekran çıktısı:

AngularJS’de ng-repeat dataları tek tek dolaşır.Ayni foreach’de olduğı gibi dizi içinde dolaşıp tüm elemanlara ulaşabiliriz.Altta garaj sınıfına [] array olarak kullanılmış ve farklı itemlar eklenmiştir.Daha sonra ng-repeat ile eklenen tüm elemanlar ekrana yazdırılmıştır.

Ekran çıktısı:

AngularJS’de Controller’ları inceleyelim:

Controller lar bir çeşit namespace dirler.İçlerinde  farklı sınıfları tanımlayabiliriz.

Alttaki örnekte görüldüğü gibi ilk önce boş controller’ımızı yazalım.ng-controller tanımlanacak olan controller’ı tutar.Örnek aşağıda div içinde bikeController tanımlanmıştır.

Aşağıda belirtildiği gibi şimdi bikeController’ı yazalım.Burda $scope ile tanımlanan controllerın main object’i dir.

‘bike’ bir class ve ‘brand,burnoilliter,km’ onun property leridir.’Calculate’ bike’ın bir function’ı dır.Yapılan km’ye göre kaç litre yaktığını hesaplar.

models controller’ın başka bir class’ı dır.Ve ‘name,country’ şeklinde property leri vardır.Ve bu örnekte model bir [] array olarak tanımlanmıştır.

Şimdi controllerımızı kullanacağımız view’ımızı, aşağıda görüldüğü gibi yazalım.<div ng-app=”” ile AngularJs’in kullanılacağı alan belirlendikten sonra controllerımızı da ng-controller=”bikeController” şeklinde tanımladık. Tanımlanan <table> içinde kullandığımız textboxlarımıza da örnek 100km yaktığı textbox’ımıza ng-model=”bike.BurnOilLiter” şeklinde bikeController’ın daki property’e bağladık.

Ayrıca controller’ın function’ına {{ bike.Claculate() }} şeklinde eriştik.Bir de model’s diye controller’ın ayrı bir class’ı var.ng-repeat=”b in models” ile tüm değerleri çekip sayf aya yazdık.

Görüldüğü üzere tüm alanlar model ile controller’a bağlı olduğu için biri değişince diğerlerini de etkilemektedir.Mesela Toplam km değişince Toplam Harcanan buna bağlı olarak değişir.

<input type=”text” ng-model=”bike.Km“> text değerindeki Km’yi elle değiştirince, Calculate:function()’daki: (x.BurnOilLiter*x.Km)/100 Km’de değişir.Çünkü ikiside bikeController‘daki Km property’sine bağlıdır.

Ekran Çıktısı:

Şimdi alttaki maddeleri inceleyelim

•  Currency :Geçerli parabirimini yanına koyar
• Filter: Belirtlilen kolona göre filitre yapılır.
• OrderBy:Sıralama yapılır.
• Lowercase:String büyür.
• Uppercase:String küçülür.

Kullanım şekilleri çok kolaydır.Aşağıda görüldüğü gibi bikeController’daki motorlar price’a göre orderBy ile sıralanmıştır.Name ‘e göre filter yapılmaktadır.Price’da currency ile geçerli para birimi yazılmaktadır.Name uppercase ve Country property’si lowercase olarak yazılmıştır.

Ekran Görüntüsü:

Şimdi de alttaki yapıları irdeleyelim.

• Disabled  :Nesnelerin aktiflik ve pasifliğini belirler.
• Show :Nesneleri gösterir yada gizler.
• Event :Bir olaya göre belirlenen function’ın çağrılmasıdır.
• Module :Bir çeşit namespacedir.Controller’ları parçalı olarak kullanmamıza yarar.Dağıtık uygulamalarda ve büyük projelerde modul çok öenmlidir.

Aşadaki örnekler üstünde bu konuları irdeleyelim:

İlk Ekran Çıktısı:

 

Aşağıdaki kod örmeğinde olduğu gibi öncelikle countApp adında bir modul yarattık.Ve buna countCtrl adında bir controller tanımladık.Bu controllerda amacımız yukarıda görüldüğü gibi buttona tıklandığı zaman bir değişkeni saydırmak ve bu sayede o ana kadar toplam kaç kere butona tıklandığını göstermek.Bu yüzden count diye bir değişken tanımladık ve click eventinde bu değişkeni bir arttırdık.İlgili script ve html bloğu aşadadır.En önemli nokta button’un ng-click property’sine controller’da tanımlanan click eventinin atanmasıdır.

 

Gene bir başka örnekde allta ekran çıktısını görülmektedir:

Yukardaki ekranda görüldüğü gibi amacımız isim,soyisim ve tüm ismi yazdırmak ve iki adet checkbox ile bu yazdırılan alanları gösterip,gizleme ve aktif,pasif yapmaktır.

Bunu için aşağıda görüldüğü gibi showCtrl adında bir controller tanımlanmıştır.Bu controller içinde iki değişken atanmıştır.Birincisi isShow diğeri ise isEnable’dır.Bir de isim ve soy ismin yazılması için person class’ı tanımlanmıştır.

Şimdi de html kısmına bakalım.

Aşağıda görüldüğü gibi html’e iki tane checkbox koyulmuştur.ng-model’lerine sıra ile isShow controller’da tanımladığımız isShow ve isEnable değerleri atanmıştır.Tıklandıkları zaman bu değişkenler true veya false değerlerini alırlar.Ayrıca person classını gösterildiği html alnı bir table ile sarmalanmıştır.Table’ın  ng-show attribute’una isShow atanmıştır.İsim ve soy isim için atanan texlerin ng-disabled property’sine !(isEnable) atanmıştır.ng-enabled yoktur boşuna aramayın:)Böylece amacımıza ulaşmış olduk.Bir de bu iki controller <html ng-app=”multiApp”> ile sarmalanmıştır.Amaç iki controller’u birden kullanabilmekteri.Bunu için showApp ve countApp adında iki module tanımlanmıştır sonra da üçüncü bir module olan multiApp’e inject edilmişlerdir.Böylece bu moduller’e bağlı tüm controller lere multiApp altından erişilebilmektedir.

Altta tüm kodu görmektesiniz:

Görüldüğü üzere angularJS önyüz tarafında kodumuzu mümkün olduğunca kısaltıp kod kalabalığına bir son veriyor.Ayrıca herşeyin yerli yerinde olması daha kararlı bir yapıyı doğruyor ki bu da hata riskini minimuma indiriyor.İlerde daha detaylı ve kapsalım örnekler yapıcaz.

Geldik bir makalemizin daha sonuna.

Yeni bir makalede görüşmek üzere hoşçakalın.

Source Code: http://www.borakasmer.com/projects/AngularJSBlog.rar