AngularJS Düzenleyici

AngularJS, "" adlı bir adlandırma kullanmanızı sağlar.yönergeyeni özellikleri HTML'ye eklemek için kullanılır.

AngularJS, uygulamanıza işlevsellik sağlayacak bir dizi yerleşik yönergeye sahiptir.

AngularJS, kendi ifadelerinizi tanımlamanıza da izin verir.

AngularJS Düzenleyici

AngularJS ifadeleri, öneki ile başlayan genişletilmiş HTML özellikleridir ng-.

ng-app İfade, AngularJS uygulamasını başlatır.

ng-init İfade, uygulama verilerini başlatır.

ng-model Talimat, HTML kontrolcülerinin (input, select, textarea) değerlerini uygulama verilerine bağlar.

Lütfen AngularJS ifadeleri hakkında bilgi için AngularJS ifadeleri referansımızı okuyun.

Örnek

<div ng-app="" ng-init="firstName='Bill'">
<p>Ad: <input type="text" ng-model="firstName"></p>
<p>Yazdığınız: {{ firstName }}</p>
</div>

Kişisel olarak deneyin

ng-app İfade, AngularJS, <div> elementinin 'sahibi' olduğunu AngularJS uygulamasına söyler.

veri bağlama

Örnekteki {{ firstName }} İfade, bir AngularJS veri bağlama ifadesidir.

AngularJS'teki veri bağlama, AngularJS ifadelerini AngularJS verileri ile bağlar.

{{ firstName }} ile ng-model="firstName" Bir araya getirilir.

Bir sonraki örnekte, iki metin alanı iki ng-model ifadesi ile bir araya getirilir:

Örnek

<div ng-app="" ng-init="quantity=1;price=5">
Miktar: <input type="number" ng-model="quantity">
Giderler:    <input type="number" ng-model="price">
Toplam dolar cinsinden: {{ quantity * price }}
</div>

Kişisel olarak deneyin

Kullanarak ng-init Çok yaygın değil. Veri başlatma hakkında kontrolör bölümünde öğreneceksiniz.

HTML elementini tekrarlar

ng-repeat İfade tekrarlar HTML elementini:

Örnek

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

Kişisel olarak deneyin

ng-repeat İfade, koleksiyondaki her bir öğeyeHTML elementini bir kez klonlar.

nesne dizilerine ng-repeat İfade:

Ö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>

Kişisel olarak deneyin

AngularJS, veritabanı CRUD (oluşturma, okuma, güncelleme, silme) uygulamaları için çok uygun.

Bu nesneler veritabanı kayıtlarından geldiğini düşünün.

ng-app talimatı

ng-app ng-init talimatı AngularJS uygulamasınınAna element.

Web sayfası yüklenirken:ng-app Talimat:Otomatik başlatmauygulamasını (otomatik olarak başlatma).

ng-init talimatı

ng-init ng-init talimatı AngularJS uygulamasınınBaşlangıç değeri.

Genellikle, ng-init kullanmazsınız. Kontrolcü veya modül kullanacaksınız.

Kontrolcü ve modül hakkında daha fazla bilgi edineceksiniz.

ng-model talimatı

ng-model Talimat, HTML kontrolcülerinin (input, select, textarea) değerlerini uygulama verilerine bağlar.

ng-model Talimatlar ayrıca:

  • Uygulama verilerine tür doğrulaması sağlayın (sayı, e-posta, zorunlu)
  • Uygulama verilerine durum sağlayın (geçersiz, kirli, dokunulmuş, hata)
  • HTML ögesine CSS sınıfı sağlayın
  • HTML ögesine HTML formu bağlayın

Daha fazla bilgi için bir sonraki bölümde okuyun: ng-model Talimat bilgileri.

Yeni talimat oluşturma

Tüm yerleşik AngularJS talimatları dışında, kendi talimatlarınızı oluşturabilirsiniz.

Yeni talimat, aşağıdaki şekilde kullanılarak oluşturulur: .directive fonksiyon tarafından oluşturulan.

Yeni talimatı çağırmak için, yeni talimatla aynı etiket adına sahip bir HTML ögesi oluşturun.

Adlandırma talimatları için, at kederli adlandırma kullanmanız gerekir:w3TestDirectiveAma onu çağırırken, - ile ayrılmış adı kullanmanız gerekir: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>Bir yönergelerle yapılmıştır!</h1>"
  });
});
</script>
</body>

Kişisel olarak deneyin

Bu talimatı çağırmak için aşağıdaki yolları kullanabilirsiniz:

  • Element adı
  • Özellik
  • Sınıf
  • Yorum

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

Element adı

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

Kişisel olarak deneyin

Özellik

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

Kişisel olarak deneyin

Sınıf

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

Kişisel olarak deneyin

Yorum

<!-- directive: w3-test-directive -->

Kişisel olarak deneyin

Sınırlama

Kendi yönergelerin sadece belirli yöntemler yoluyla çağrılmasını sınırlayabilirsiniz.

Örnek

Bir değeri ekleyerek "A" nın restrict Öznitelik, bu yönergeli sadece öznitelik yoluyla çağrılabilir:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Bir yönergelerle yapılmıştır!</h1>"
  });
});

Kişisel olarak deneyin

Geçerli restrict değeri:

  • E Element adını temsil eder
  • A Öznitelikleri temsil eder
  • C Sınıfı temsil eder
  • M Yorumları temsil eder

Öntanımlı olarak bu değer EABu, element adı ve özellik adlarının her ikisinin de yönergeleri çağırabileceği anlamına gelir.