AngularJS Yönergeleri
AngularJS, HTML'yi Directives adı verilen yeni niteliklerle genişletmenize olanak tanır .
AngularJS, uygulamalarınıza işlevsellik sunan bir dizi yerleşik yönergeye sahiptir.
AngularJS ayrıca kendi yönergelerinizi tanımlamanıza izin verir.
AngularJS Yönergeleri
AngularJS yönergeleri, önek ile genişletilmiş HTML nitelikleridir ng-.
Yönerge ng-app, bir AngularJS uygulamasını başlatır.
Yönerge, ng-inituygulama verilerini başlatır.
Yönerge ng-model, HTML kontrollerinin (input, select, textarea) değerini uygulama verilerine bağlar.
AngularJS yönerge referansımızdaki tüm AngularJS yönergeleri hakkında bilgi edinin .
Örnek
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Yönerge ng-appayrıca AngularJS'ye <div> öğesinin AngularJS uygulamasının "sahibi" olduğunu söyler.
Bağlanma verileri
Yukarıdaki {{ firstName }}örnekteki ifade, bir AngularJS veri bağlama ifadesidir.
AngularJS'de veri bağlama, AngularJS ifadelerini AngularJS verileriyle bağlar.
{{ firstName }}ile bağlıdır ng-model="firstName".
Sonraki örnekte iki metin alanı, iki ng-model yönergesi ile birbirine bağlanmıştı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>
Kullanımı ng-initçok yaygın değildir. Denetleyiciler hakkındaki bölümde verileri nasıl başlatacağınızı öğreneceksiniz.
Yinelenen HTML Öğeleri
Yönerge ng-repeatbir HTML öğesini tekrarlar:
Örnek
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Yönerge ng-repeataslında
bir koleksiyondaki her öğe için HTML öğelerini bir kez klonlar .
Bir ng-repeatdizi nesne üzerinde kullanılan 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>
AngularJS, veritabanı CRUD (Okuma Güncelleme Silme Oluştur) uygulamaları için mükemmeldir.
Bu nesnelerin bir veritabanındaki kayıtlar olduğunu hayal edin.
Uygulama içi Yönerge
Yönerge , bir AngularJS uygulamasının kök öğesining-app tanımlar .
Yönerge ng-app, bir web sayfası yüklendiğinde uygulamayı otomatik olarak başlatır (otomatik olarak başlatır) .
Isı Yönergesi
Yönerge , bir AngularJS uygulaması için başlangıç değerlerining-init tanımlar .
Normalde, ng-init kullanmazsınız. Bunun yerine bir denetleyici veya modül kullanacaksınız.
Daha sonra kontrolörler ve modüller hakkında daha fazla bilgi edineceksiniz.
modelleme Direktifi
Yönerge ng-model, HTML kontrollerinin (input, select, textarea) değerini uygulama verilerine bağlar.
Direktif ng-modelayrıca:
- Uygulama verileri için tip doğrulama sağlayın (sayı, e-posta, gerekli).
- Uygulama verileri için durum sağlayın (geçersiz, kirli, dokunuldu, hata).
- HTML öğeleri için CSS sınıfları sağlayın.
- HTML öğelerini HTML formlarına bağlayın.
ng-modelBir sonraki bölümde yönerge hakkında daha fazla bilgi edinin .
Yeni Yönergeler Oluştur
Tüm yerleşik AngularJS yönergelerine ek olarak kendi yönergelerinizi oluşturabilirsiniz.
.directiveFonksiyon kullanılarak yeni direktifler oluşturulur .
Yeni yönergeyi çağırmak için, yeni yönergeyle aynı etiket adına sahip bir HTML öğesi yapın.
Bir yönergeyi adlandırırken, bir deve vakası adı kullanmalısınız
w3TestDirective, ancak onu çağırırken -ayrı bir ad kullanmalısınız, 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>
Aşağıdakileri kullanarak bir yönerge çağırabilirsiniz:
- Öğe adı
- Bağlanmak
- Sınıf
- Yorum Yap
Aşağıdaki örneklerin tümü aynı sonucu verecektir:
Öğe adı
<w3-test-directive></w3-test-directive>
Bağlanmak
<div w3-test-directive></div>
Sınıf
<div class="w3-test-directive"></div>
Yorum Yap
<!-- directive: w3-test-directive -->
Kısıtlamalar
Yönergelerinizi yalnızca bazı yöntemler tarafından çağrılacak şekilde kısıtlayabilirsiniz.
Örnek
restrictvalue ile bir özellik eklendiğinde "A", yönerge yalnızca nitelikler tarafından çağrılabilir:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Yasal kısıtlama değerleri şunlardır:
EEleman adı içinAÖzellik içinCsınıf içinMyorum için
Varsayılan olarak değerdir EA, yani hem Öğe adları hem de öznitelik adları yönergeyi çağırabilir.