soru sor sorular uzmanlar

AngularJS Directives nedir?

alattin (16999) 7 yıl önce sordu

AngularJS Directives nedir?

AngularJS Directives nasıl kullanılır?

AngularJS Directives ne işe yarar?

angularjs angularjs directives angularjs directives nedir angularjs temelleri angularjs giriş

Toplam 1 cevap

alattin (16999) 7 yıl önce cevapladı

AngularJS Directives nedir? AngularJS Directives nasıl kullanılır?

AngularJS ile HTML etiketlerini yeni özellikler ile  genişletmek mümkündür. AngularJS'de bu yeni özellikler Directive olarak adlandırılır.

AngularJS kendi içinde ön tanımlı pek çok özellik barındırır. Aynı zamanda AngularJS size kendi  özelliklerinizi yaratma fırsatı verir.

AngularJS direktifleri ng- ön eki ile başlar. 

Baı örnek AngularJS direktifleri:

  • ng-app direktifi bir AngularJS uygulamasını başlatır.
  • ng-init ile AngularJS ifadelerini oluşturabilirsiniz.
  • ng-model direktifi ile herhangi bir HTML etiketinie veri bağlama yapabilirsiniz.
  • ng-repeat bir döngü oluşturarak kendine verilen dizi kadar tekrar oluşturur.

 

AngularJS Directive oluşturma

Aşağıda örnek bir AngularJS direktifi örneği bulabilirsiniz.
 

Kodun nasıl çalıştığını gör

<html >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body >

<body ng-app="uygulamam">

<ilk-test-direktifi></ilk-test-direktifi>

<script>
var app = angular.module("uygulamam", []);
app.directive("ilkTestDirektifi", function() {
    return {
        template : "<h1>Direktif tarafından oluşturuldu!</h1>"
    };
});
</script>

</body>

</body>
</html>

Script kodunda öncelikle modül oluşturuluyor. Daha sonra app.directive fonksitonu ile direktifi oluşturuyoruz. Dikkat ederseniz direktif adı (ilkTestDirektifi) camel Case isimlendirme yöntemi ile yazılıyor. Yani ilk harf küçük, daha sonra her kelimenin ilk harfi büyük.

Fakat direktifi HTML içinden çağırırken bu sefer kelime aralarına - işareti koyuyoruz: ilk-test-direktifi 

Bir direktifi aşağıdaki şekillerde çağırabilir, kullanabilirsiniz:

  • Element adı olarak
  • Özellik olarak
  • Class ifadesinde
  • Yorum olarak

Oluşturduğumuz bu direktifi aşağıdaki gibi de kullanabilirdik:
Element adı olarak kullanıma örnek:

<div ilk-test-direktifi></div>

veya class olarak da çağırabilirdik:

<div class="ilk-test-direktifi"></div>

Class olarak çağıracaksanız  şu şekilde kullanmalısınız:

 <script>
       var app = angular.module('app', []);
       app.directive("ilkDirektif", function () {
           return {
               template: '<h1>direktif tarafından oluşturuldu</h1>',
               restrict:'C'
           }
       })
   </script>

Yani return ifadesine özellik olarak restrict:'C' eklemelisiniz.

Yorum olarak kullanacaksanız

 <script>
        var app = angular.module('app', []);
        app.directive("ilkDirektif", function () {
            return {
                restrict: "M",
                replace: true,
                template: '<h1>direktif tarafından oluşturuldu</h1>'

            }
        })
    </script>

<!-- directive: ilk-direktif -->

restrict: "M",   replace: true özellikleri yorum olarak kullanılacaksa yukarıdaki gibi kullanılmalıdır.

Restrictions (Kısıtlamalar)

Yukarıda yazdığım gibi  direktifi 4 farklı şekilde kullanabiliriz. Fakat Class ve Yorum olarak kullanmak varsayılan olarak engellenmiştir. Siz açmak isterseniz yukarıdaki örnekteki gibi restrict özelliği üzerinden ayarlamalısınız.

Kısıtlamalarda kullanılan harfler ve anlamları şu şekilde:

  • E => Elemant adı
  • A => Özellik
  • C => Class
  • M => Yorum

Varsayılan olarak EA açık olarak gelir.