Apa itu arahan AngularJS?

Saya telah menghabiskan cukup banyak waktu membaca dokumentasi AngularJS dan beberapa tutorial, dan saya cukup terkejut melihat betapa sulitnya dokumentasi tersebut.

Saya memiliki pertanyaan sederhana yang dapat dijawab yang juga berguna bagi orang lain yang ingin mengambil AngularJS:

Apa itu arahan AngularJS?

Seharusnya ada definisi yang sederhana dan tepat tentang arahan di suatu tempat, tetapi situs web AngularJS menawarkan definisi yang sangat tidak berguna ini:

Di beranda :

Arahan adalah fitur unik dan kuat yang tersedia di AngularJS. Arahan memungkinkan Anda menemukan sintaks HTML baru, khusus untuk aplikasi Anda.

Dalam dokumentasi pengembang :

Arahan adalah cara untuk mengajarkan trik baru HTML. Selama DOM arahan kompilasi dicocokkan dengan HTML dan dieksekusi. Ini memungkinkan arahan untuk mendaftarkan perilaku, atau mengubah DOM.

Dan ada serangkaian pembicaraan tentang arahan yang, ironisnya, tampaknya menganggap audiens sudah mengerti apa itu arahan.

Adakah yang bisa menawarkan, untuk referensi yang jelas, definisi yang tepat tentang apa arahan yang menjelaskan:

1. Apa itu (lihat definisi jQuery sebagai contoh)
2. Masalah dan situasi praktis apa yang dimaksudkan untuk diatasi
3. Apa pola desain yang diwujudkannya, atau sebagai alternatif, bagaimana itu cocok dengan misi MVC / MVW yang diakui AngularJS.

Apa itu (lihat definisi jQuery sebagai contoh)?

Arahan pada dasarnya adalah fungsi ^† yang dijalankan ketika kompiler Angular menemukannya di DOM. Fungsi dapat melakukan hampir semua hal, itulah sebabnya saya pikir agak sulit untuk mendefinisikan apa itu arahan. Setiap arahan memiliki nama (seperti ng-repeat, tab, make-up-your-own) dan setiap arahan menentukan di mana ia dapat digunakan: elemen, atribut, kelas, dalam komentar.

^† Arahan biasanya hanya memiliki fungsi tautan (pos). Arahan yang rumit dapat memiliki fungsi kompilasi, fungsi pra-tautan, dan fungsi pasca-tautan.

Masalah dan situasi praktis apa yang dimaksudkan untuk diatasi?

Hal yang paling kuat yang dapat dilakukan arahan adalah memperluas HTML. Ekstensi Anda adalah Bahasa Khusus Domain (DSL) untuk membangun aplikasi Anda. Misalnya, jika aplikasi Anda menjalankan situs belanja online, Anda dapat memperluas HTML untuk memiliki "keranjang belanja", "kupon", "spesial", dll. Arahan - kata atau objek atau konsep apa pun yang lebih alami untuk digunakan dalam " "belanja online" domain, bukan "div" dan "span" (seperti @WTK sudah sebutkan).

Arahan juga dapat membuat komponen HTML - kelompokkan sekelompok HTML menjadi beberapa komponen yang dapat digunakan kembali. Jika Anda menemukan diri Anda menggunakan ng-include untuk menarik banyak HTML, mungkin saatnya untuk merefleksikan arahan.

Apa pola desain yang diwujudkannya, atau sebagai alternatif, bagaimana itu cocok dengan misi MVC / MVW yang diklaim dari angularjs

Arahan adalah tempat Anda memanipulasi DOM dan menangkap peristiwa DOM. Inilah sebabnya mengapa kompilasi direktif dan fungsi tautan keduanya menerima "elemen" sebagai argumen. Kamu bisa

• tentukan sekelompok HTML (yaitu templat) untuk menggantikan arahan
• ikat acara dengan elemen ini (atau anak-anaknya)
• tambah / hapus satu kelas
• ubah nilai teks ()
• perhatikan perubahan pada atribut yang didefinisikan dalam elemen yang sama (sebenarnya itu adalah nilai atribut yang ditonton - ini adalah properti lingkup, karenanya arahan mengawasi "model" untuk perubahan)
• dll.

Mungkin definisi yang sangat sederhana dan awal untuk arahan sudut akan menjadi

Arahan AngularJS (ng-directives) adalah atribut HTML dengan awalan ng (model-ng, aplikasi-ng, ng-repeat, ng-bind) yang digunakan oleh Angular untuk memperluas HTML. ( dari: tutorial sudut W3schools )

Beberapa contohnya adalah

The ng-aplikasi direktif mendefinisikan sebuah aplikasi AngularJS.

The ng model direktif mengikat nilai kontrol HTML (input, pilih, textarea) untuk data aplikasi.

The ng-mengikat mengikat direktif data aplikasi ke tampilan HTML.

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

Lihat tutorial ini, setidaknya bagi saya itu adalah salah satu pengantar terbaik untuk Angular. Pendekatan yang lebih lengkap adalah segala sesuatu yang dikatakan @ mark-rajcok sebelumnya.

Melihat dokumentasi, arahan adalah struktur yang Anda dapat menulis bahwa angularjs mem-parsing untuk membuat objek dan perilaku. Dengan kata lain itu adalah template di mana Anda menggunakan campuran dari sembarang node dan pseudo-javascript dan placeholder untuk data untuk mengekspresikan niat tentang bagaimana widget (komponen) Anda terstruktur, bagaimana perilakunya, dan bagaimana ia diumpankan dengan data. Angularjs kemudian menjalankan arahan - arahan tersebut untuk menerjemahkannya menjadi kode html / javascript yang berfungsi.

Arahan ada sehingga Anda dapat membangun komponen (widget) yang lebih kompleks menggunakan semantik yang tepat. Lihat saja contoh angularj dari arahan - mereka mendefinisikan panel tab (yang tentu saja tidak valid dalam HTML biasa). Ini lebih intuitif daripada menggunakan seperti div-s atau rentang untuk membuat struktur yang kemudian ditata agar terlihat seperti panel tab.

Dalam AngularJS Directive adalah penanda ulang html untuk elemen DOM HTML seperti atribut (membatasi- A), nama elemen (pembatasan- E), komentar (pembatasan- M) atau kelas CSS (batasan - C) yang memberi tahu kompiler HTML AngularJS ($ kompilasi) untuk melakukan perilaku tertentu ke elemen DOM atau bahkan mengubah elemen DOM dan anak-anaknya. Beberapa Contoh adalah ng-bind, ng-hide / show dll.

Beranda sangat jelas tentang ini: Ketika Anda mengarahkan kursor ke tab di bagian terakhir:

Kami telah menambah kosakata HTML dengan tabs elemen khusus . The tabsabstrak struktur HTML yang kompleks dan perilaku yang diperlukan untuk rendering tab. Hasilnya adalah tampilan yang lebih mudah dibaca dan sintaks yang sangat mudah digunakan kembali. "

Kemudian di tab berikutnya:

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;
        }

Jadi Anda dapat menemukan elemen html yaitu tabsdan membiarkan sudut menangani rendering dari elemen-elemen tersebut.