AngularJS - 2 - Temeller Expressions, Modules, Directives

İfadeler (Expressions):

AngularJS ifadeleri HTML taglari içinde '{{...}}' çiftli süslü parantezler içine yada ' ng-bing="" ' ifadesi ile kullanılabilirler. ifadeler JavaScript ifadelere benzer ve tanım, değişken yada işlemler içerebilirler.

Yukarıdaki örnekte bir çarpım ifadesini AngularJS expression olarak gördük bu diğer işlemler, string ifadeler için mümkün olduğu gibi JavaScript teki şekilde JSON objesi ve/veya Array kullanmakta mümkün.

Modüller (Modules):

Modüller uygulamanın farklı parçaları olarak değerlendirilebilir. ileride inceleyeceğimiz Kontrolleri çalıştırabilmek adına Modül ihtiyacımız olacak.

Yukarıdaki örnekte, görüleceği gibi, HTML içinde 1 uygulama tanımlandı ve 2 ayrı DIV 2 ayrı modül olarak tanımlandı, ve aynı isimlerle 2 değişken 2 farklı modül içinde farklı değerlerle oluşuruldu. Bu noktada, her DIV objesi tanımlandığı modül içindeki değerlere erişim sağladığı görülebilir.

Direktifler (Directives):

"ng-" ifadesi ile birlikte kullanılan HTML özellikleri olarak düşünmek gerekir, Şu ana kadar bazı ön tanımlı direktifleri gördük, hatta en temel ng-app, ng-modul ve ng-bind ları örneklerde kullandık.
Ancak ön tanımlı direktiflerin dışında yeni direktiflerde eklemek mümkün.

Ön tanımlı Direktifler:

ng-app                   : Uygulama tanımlamaya yarar.
ng-bind                  : HTML objelerinin değerlerini uygulamaya bağlar.
ng-bind-html         : HTML objesinin innerHTML kısmını bağlar, böylelikle HTML syntax'ından kurtaırır.
ng-bind-template  : Text alanının template ile ezilmesini söyler.
ng-blur                   : Blur event'i için aksiyon tanımlar.
ng-change              : İçerik Kullanıcı tarafından değiştiğinde tekrar hesaplanması gerektiğini belirtir.
ng-checked            : Eleman işaretli olup olmadığını belirtir.
ng-class                  : HTML elemanları için CSS belirtir.
ng-class-even         : ng-class ile aynı sadece çift numaralı satırlar için geçerli olur.
ng-class-odd           : ng-class ile aynı sadece tek numaralı satırlar için geçerli olur.
ng-click                   : Tuşlama event'inde değerin tekrar hesaplanmasını sağlar.
ng-cloak                 : Sayfanız yüklenir iken titremeleri engeller.
ng-controller          : Kontrolör tanımı için kullanılır.
ng-copy                   : Kopyalama işlemi esnasındaki aksiyonu belirtir.
ng-csp                     : İçeriğin güvenlik politikasını tanımlar.
ng-cut                     : Kesme işlemi esnasındaki aksiyonu belirtir.
ng-dblclick             : Çift tuşlama event'inde değerin tekrar hesaplanmasını sağlar.
ng-disabled             : Eleman enabled olup olmadığını belirtir.
ng-focus                  : On focus durumu için aksiyon tanımlar.
ng-form                  : Elemanları kalıtacağı HTML formunu belirtir.
ng-hide                 : HTML elemanı gizler yada görünür kılar.
ng-href                 : <a> tagi için adres bilgisi tanımlamaya yarar.
ng-if                        : Koşul sağlanmadığı durumda HTML elemanını kaldırır.
ng-include              : Uygulamaya HTML ekler.
ng-init                    : Değişkenlerin ilk değer atamaları için kullanılır.
ng-jq                      : Uygulamanın JQuery Kütüphanesini kullanmasını söyler.
ng-keydown          : Keydown event'i için aksiyon tanımlar.
ng-keypress           : Keypress event'i için aksiyon tanımlar.
ng-keyup               : Keyup event'i için aksiyon tanımlar.
ng-list                    : Text içeriği list (array) haline çevirir.
ng-maxlength       : Input alanı için maximum character tanımını yapar.
ng-minlength        : Input alanı için minimum character tanımını yapar.
ng-model        : HTML içeriği uygulama datasına bağlar.
ng-model-options : Modeldeki güncellemelerin nasıl olacağını belirtir.
ng-mousedown     : Mouseown event'i için aksiyon tanımlar.
ng-mouseenter      : Mousedown event'i için aksiyon tanımlar.
ng-mouseleave      : Mousedown event'i için aksiyon tanımlar.
ng-mousemove      : Mousedown event'i için aksiyon tanımlar.
ng-mouseover        : Mouseover event'i için aksiyon tanımlar.
ng-mouseup           : Mouseupevent'i için aksiyon tanımlar.
ng-non-bindable : İlgili objeye data bind edilemeyeceğini belirtir.
ng-open            : Elemanın Open özelliğini adresler.
ng-options              : Select ifadesindeki option lar için kullanılır.
ng-paste                  : Yapıştırma işlemi esnasındaki aksiyonu belirtir.
ng-pluralize         : Konum ayarlarına göre gösterilecek mesaj tanımını yapar.
ng-readonly           : Elemanın readonly özelliğini adresler.
ng-repeat               : Bir listedeki tüm elemanlar için template sağlar.
ng-required            : Elemanın required özelliğini adresler.
ng-selected            : Elemanın selected özelliğini adresler.
ng-show                : HTML elemanı gizler yada görünür kılar.
ng-src                     : <img> elemanı için kaynak belirtir.
ng-srcset                : <img> elemanı için kaynak seti belirtir.
ng-style                 : Elemanın style  özelliğini adresler.
ng-submit              : Submit durumunda çalışacak aksiyon tanımlar.
ng-switch               : Show hide özelliklerinin değişimi için koşul belirtir.
ng-transclude        : Transcluded elemanın yerleştirildiği noktayı adresler.
ng-value                 : Input elemanının value değerini adresler.