Bir AngularJS direktifi nedir?

AngularJS belgelerini ve birkaç öğreticiyi okumak için oldukça fazla zaman harcadım ve belgelerin ne kadar ulaşılamaz olduğuna oldukça şaşırdım.

AngularJS almak isteyen başkaları için de yararlı olabilecek basit, cevaplanabilir bir sorum var:

Bir AngularJS direktifi nedir?

Bir yerde direktifin basit ve kesin bir tanımı olmalı, ancak AngularJS web sitesi şu şaşırtıcı derecede yararsız tanımları sunmaktadır:

Ana sayfada :

Yönergeler, AngularJS'de bulunan benzersiz ve güçlü bir özelliktir. Yönergeler, uygulamanıza özgü yeni HTML sözdizimini icat etmenizi sağlar.

In geliştirici belgelerinde :

Yönergeler HTML'ye yeni numaralar öğretmenin bir yoludur. DOM sırasında derleme yönergeleri HTML ile eşleştirilir ve yürütülür. Bu, direktiflerin davranışı kaydetmesine veya DOM'u dönüştürmesine izin verir.

Ve bir dizi görüşme var ironik bir şekilde, izleyicilerin ne olduklarını zaten anladıklarını varsayan yönetmelikler hakkında var.

Herkes, açık bir referans için, direktifin ne olduğunu açıklayan kesin bir tanım sunabilir mi?

1. Nedir (jQuery'nin açık tanımına bakın örnek olarak )
2. Hangi pratik problemleri ve durumları ele almayı amaçlamaktadır
3. Hangi tasarım modelini veya alternatif olarak AngularJS'nin iddia edilen MVC / MVW misyonuna nasıl uyduğunu gösterir .

Nedir (örnek olarak jQuery'nin açık tanımına bakın)?

Bir yönerge esasen , Açısal derleyici onu DOM'da bulduğunda çalışan bir işlev ^† işlevidir . İşlev (ler) neredeyse her şeyi yapabilir, bu yüzden bir direktifin ne olduğunu tanımlamanın oldukça zor olduğunu düşünüyorum. Her direktifin bir adı vardır (ng-repeat, sekmeler, kendi makyajınız gibi) ve her direktif bir yorumda nerede kullanılabileceğini belirler: eleman, nitelik, sınıf, yorumda.

^† Bir direktif normalde sadece (post) bağlantı fonksiyonuna sahiptir. Karmaşık bir yönerge derleme işlevi, bağlantı öncesi işlevi ve bağlantı sonrası işlevi içerebilir.

Hangi pratik problemleri ve durumları ele almayı amaçlıyor?

Direktiflerin yapabileceği en güçlü şey HTML'yi genişletmektir. Uzantılarınız, uygulamanızı oluşturmak için Alana Özel Bir Dil'dir (DSL). Örneğin, uygulamanız çevrimiçi bir alışveriş sitesi çalıştırıyorsa, HTML'yi "alışveriş sepeti", "kupon", "özel" vb. Yönergelere sahip olacak şekilde genişletebilirsiniz. " "div" ve "span" yerine çevrimiçi alışveriş "alan adı (@WTK’da daha önce bahsedildiği gibi).

Yönergeler ayrıca HTML'yi bileşenlendirebilir - bir grup HTML'yi yeniden kullanılabilir bazı bileşenlerde gruplandırabilir. Kendinizi çok sayıda HTML çekmek için ng-include kullanarak bulursanız, büyük olasılıkla yönergelere yeniden bakmanın zamanı gelmiştir.

Hangi tasarım modelini somutlaştırıyor veya alternatif olarak, açısaljların iddia edilen MVC / MVW misyonuna nasıl uyuyor?

Yönergeler, DOM'yi değiştirdiğiniz ve DOM olaylarını yakaladığınız yerdir. Bu nedenle direktifin derleme ve bağlantı fonksiyonlarının her ikisi de "element" i bağımsız değişken olarak alır. Yapabilirsin

• yönergeyi değiştirmek için bir grup HTML (yani bir şablon) tanımlayın
• olayları bu öğeye (veya alt öğelerine) bağlama
• sınıf ekle / kaldır
• metin () değerini değiştirme
• aynı öğede tanımlanan özniteliklerde değişiklik olup olmadığına dikkat edin (aslında özniteliklerin izlendiği değerlerdir - bunlar kapsam özellikleridir, dolayısıyla yönerge değişiklikler için "modeli" izler)
• vb.

Belki açısal direktifler için gerçekten basit ve ilk bir tanım

AngularJS yönergeleri (ng-yönergeleri), Angular tarafından HTML'yi genişletmek için kullanılan bir ng önekine (ng-model, ng-app, ng-repeat, ng-bind) sahip HTML özellikleridir. ( from: W3schools açısal öğretici )

Bunun bazı örnekleri

Ng uygulama yönergesi, angularjs uygulaması tanımlar.

Ng model yönergesi uygulama verilerine HTML denetimleri (giriş, seçin metin alanı) değerini bağlanır.

Ng-bağlama HTML görünümüne yönergesi bağlandığı uygulama verileri.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

Bu öğreticiyi kontrol edin, en azından benim için Angular'ın en iyi tanıtımlarından biriydi. Daha eksiksiz bir yaklaşım @ mark-rajcok'un daha önce söylediği her şey olacaktır.

Belgelere bakıldığında, direktifler, nesneler ve davranışlar oluşturmak için angularjs ayrıştırabileceğiniz yapılardır. widget'ınız (bileşen) yapılandırılmıştır, nasıl davranır ve verilerle nasıl beslenir. Angularjs daha sonra bu direktiflere aykırı bunları çalışan html / javascript koduna çevirmek için .

Yönergeler oradadır, böylece uygun semantiği kullanarak daha karmaşık bileşenler (widget'lar) oluşturabilirsiniz. Angularjs direktifleri örneğine bir göz atın - sekme bölmesini tanımlarlar (bu normal HTML'de elbette geçerli değildir). Daha sonra bir sekme bölmesi gibi görünecek şekilde tasarlanmış yapı oluşturmak için div-s veya yayılma gibi kullanmaktan daha sezgiseldir .

AngularJS Yönergelerinde, AngularJS'nin HTML derleyicisine ($) söyleyen bir öznitelik (restrict-A), element adı (restrict-E), comment (restrict-M) veya CSS sınıfı (restrict - C) gibi bir HTML DOM öğesi için html re işaretleri bulunur. derleme), bu DOM öğesine belirli bir davranış uygulamak veya hatta DOM öğesini ve alt öğelerini dönüştürmek.Bazı Örnek ng-bind, ng-hide / show vb.

Ana sayfa bu konuda çok açık: Son bölümdeki sekmelerin üzerine geldiğinizde:

HTML kelimelerini özel bir tabs öğeyle genişlettik . tabsSekmelerin oluşturma için gerekli kompleks HTML yapısını ve davranışını soyutlar. Sonuç, daha okunabilir bir görünüm ve çok kolay bir şekilde yeniden kullanılabilir sözdizimidir. "

Sonra bir sonraki sekmede:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

Böylece html elemanlarını icat edebilir tabsve bu elemanların oluşturulmasını açısal olarak ele alabilirsiniz.