En son web geliştirme öğreticiler
 

AngularJS Direktifleri

❮ Önceki Sonraki Bölüm ❯

Angularjs Eğer Direktifleri denilen yeni özelliklere sahip HTML uzatmak sağlar.

Angularjs uygulamalarınıza işlevsellik sunar yerleşik bir yönerge kümesi vardır.

Angularjs ayrıca kendi direktifleri tanımlamanızı sağlar.

angularjs Direktifleri

Angularjs direktifler HTML önek ile niteliklerini uzatılır ng- .

ng-app yönergesi angularjs uygulama başlatır.

ng-init yönergesi uygulama verilerini başlatır.

ng-model yönergesi HTML kontroller değerinin bağlanan (input, select, textarea) uygulama verilerine.

Bizim tüm angularjs direktifleri hakkında okuyun angularjs direktifi referans .

Örnek

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>
Kendin dene "

ng-app direktifi de angularjs söyler <div> unsurdur "owner" angularjs uygulamasının.

Bağlanma verileri

{{ firstName }} ifadesi, yukarıdaki örnekte, bir ifade bağlanan bir angularjs verilerdir.

Angularjs bağlama veri angularjs verilerle angularjs ifadeleri bağlanır.

{{ firstName }} ile bağlı olduğu ng-model="firstName" .

Bir sonraki örnekte iki metin alanları iki ng model direktifleri birbirine bağlanır:

Örnek

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>
Kendin dene "

Kullanılması ng-init çok yaygın değildir. Sen kontrolörleri hakkında bölümdeki verileri başlatmak için öğreneceksiniz.

HTML Elementleri tekrarlanması

ng-repeat yönergesi bir HTML öğesi tekrarlar:

Örnek

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>
Kendin dene "

ng-repeat yönergesi aslında bir koleksiyonunda her öğe için bir kez HTML öğelerini klonlar.

ng-repeat nesnelerinin bir dizisi kullanılabilir yönerge:

Örnek

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>
Kendin dene "

Angularjs veritabanı CRUD için idealdir (Create Read Update Delete) uygulamalar.
bu nesneler bir veritabanından kayıtları olsaydı Sadece düşünün.

ng Uygulama Yönergesi

ng-app yönergesi angularjs uygulamasının kök elemanını tanımlar.

ng-app bir web sayfası yüklendiğinde direktif otomatik önyükleme uygulaması (otomatik başlatma) olacaktır.

ng-init Direktifi

ng-init yönergesi angularjs uygulama için başlangıç değerlerini tanımlar.

Normalde, ng-init kullanmaz. Onun yerine bir denetleyici veya modül kullanacaktır.

Daha sonra kontrolörler ve modülleri hakkında daha fazla öğreneceksiniz.

ng model Direktifi

ng-model yönergesi HTML kontroller değerinin bağlanan (input, select, textarea) uygulama verilerine.

ng-model direktifi de yapabilirsiniz:

  • Uygulama verileri tip doğrulama sağlamak (number, email, required) .
  • Uygulama verileri durumunu sağlayın (invalid, dirty, touched, error) .
  • HTML öğeleri için CSS sınıflarını sağlayın.
  • HTML formları Bind HTML öğeleri.

Hakkında daha fazlasını okuyun ng-model sonraki bölümde direktifi.

Yeni Direktifleri Oluştur

tüm yerleşik angularjs direktifleri ek olarak, kendi direktifleri oluşturabilirsiniz.

Yeni direktifler kullanılarak oluşturulur .directive işlevi.

Yeni yönergesini çağırmak için yeni direktif ile aynı etiket adı taşıyan bir HTML öğesi olun.

Bir yönerge ad verirken, bir deve vaka adını kullanmalıdır, w3TestDirective bunu çağrılırken, ancak, kullanmak gerekir - ayrılmış isim, w3-test-directive :

Örnek

<body ng-app="myApp">

<w3-test-directive></w3-test-directive>

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        template : "<h1>Made by a directive!</h1>"
    };
});
</script>

</body>
Kendin dene "

Sen kullanarak bir yönergeyi çağırabilirsiniz:

  • eleman adı
  • nitelik
  • Sınıf
  • Yorum Yap

Aşağıdaki örneklerin tümü aynı sonucu üretecektir:

eleman adı

<w3-test-directive></w3-test-directive>
Kendin dene "

nitelik

<div w3-test-directive></div>
Kendin dene "

Sınıf

<div class="w3-test-directive"></div>
Kendin dene "

Yorum Yap

<!-- directive: w3-test-directive -->
Kendin dene "

Kısıtlamalar

Sadece yöntemlerden bazıları ile çağrılması için Kendi direktifleri kısıtlayabilir.

Örnek

Bir ekleyerek restrict değerle özelliği "A" , yönerge sadece özelliklerine göre çağrılabilir:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        restrict : "A",
        template : "<h1>Made by a directive!</h1>"
    };
});
Kendin dene "

Yasal kısıtlamak değerler şunlardır:

  • E Eleman adını
  • A Özellik için
  • C sınıfı için
  • M For Comment

Varsayılan olarak değer EA Eleman isimleri ve öznitelik adları hem yönergeyi çağırabileceği yani.


❮ Önceki Sonraki Bölüm ❯