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.

angular2

Ş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ı:

angular3

Ş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ı:

angular4

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ı:

angular4

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ı:

angular5

Ş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ü:

angular6

Ş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ı:

click

 

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:

angularVisible

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

Herkes Görsün:

Sevebilirsin...

8 Yanıt

  1. Romario diyor ki:

    Oldukça güzel bir giriş yazısı. Angular.js’i dışardan biliyordum ancak iç yapısına hiç inme fırsatım olmamıştı.

    ng-repeat en kullanışlı ifadelerden biri.

  2. borsoft diyor ki:

    Teşekkürler.AngularJs daha çok farklı özelliklere sahip.İlerde detaylı bir şekilde o konulara da değinecem.

  3. Ramazan diyor ki:

    Ne güzel bir yazı teşekkürler :)

  4. Numan diyor ki:

    Merhaba Bora Bey,

    Güzel faydalı bir yazı teşekkürler.

    Module örneklerinde ng-app vermediğiniz için örnekler çalışmamakta.

    • borsoft diyor ki:

      Selam Numan,

      Öncelikle teşekkürler. Örnekler çalışmaktadır. Makalede verilen source code’u açıp baktığımda şeklinde en tepede ilgili tanımlama bulunmaktadır. Tüm örnekler yazılıp mutlaka denenmiştir. Zaten makalenin her yerinde ng-app anlatılmış ve konması önemle belirtilmiştir.

      İyi çalışmalar.

  5. Hakan diyor ki:

    Bora Hocam Selamlar,

    Çok güzel bir paylaşım olmuş. Hiç bir fikrim olmamasına rağmen çok yararlı oldunuz.
    Çok teşekkürler. Emeğinize,yüreğinize sağlık.
    Sağlıcakla kalın.

    • borsoft diyor ki:

      Ben teşekkür ederim Hakan.

      Artık bir fikrin var ise ne mutlu bana :)

      İyi çalışmalar.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir