Ringkasan
Kompiler HTML AngularJS memungkinkan browser untuk mengenali sintaks HTML baru. Ini memungkinkan Anda untuk mengaitkan perilaku dengan elemen atau atribut HTML, dan bahkan memungkinkan Anda untuk membuat elemen baru dengan perilaku khusus. AngularJS menyebut perilaku ini diperluas ke "instruksi"
HTML memiliki banyak struktur deklaratif untuk mengontrol format saat menulis halaman statis. Misalnya, jika Anda ingin memusatkan konten, Anda tidak perlu memberi tahu browser untuk "menemukan titik tengah jendela dan menggabungkannya dengan tengah konten." Anda hanya perlu menambahkan atribut align = "center" ke elemen yang perlu dipusatkan. Ini adalah kekuatan bahasa deklaratif.
Tetapi bahasa deklaratif juga memiliki sesuatu yang tidak dapat dicapai, dan salah satu alasannya adalah Anda tidak dapat menggunakannya untuk memungkinkan browser mengenali sintaks baru. Misalnya, jika Anda tidak memusatkan konten, tetapi untuk 1/3 dari kiri, itu tidak akan bisa melakukannya. Jadi kita membutuhkan cara untuk mengaktifkan browser untuk mempelajari sintaks HTML baru.
Siswa AngularJS berasal dari beberapa instruksi yang sangat berguna untuk membuat aplikasi. Kami juga berharap Anda dapat membuat beberapa instruksi yang berguna untuk aplikasi Anda sendiri. Instruksi yang diperluas ini adalah "bahasa spesifik domain" yang Anda buat.
Proses kompilasi akan terjadi di sisi browser; Sisi server tidak akan berpartisipasi dalam langkah apa pun, juga tidak akan dikompilasi.
Compier
Kompiler adalah layanan yang disediakan oleh AngularJS. Ini mencari properti yang terkait dengan itu dengan melintasi DOM. Seluruh proses kompilasi dibagi menjadi dua tahap.
1. Kompilasi: Lintasi DOM dan kumpulkan semua instruksi yang relevan untuk menghasilkan fungsi tautan.
2. Tautan: Bind ruang lingkup ke arahan dan menghasilkan tampilan dinamis. Setiap perubahan pada model lingkup akan tercermin pada tampilan, dan tindakan pengguna apa pun pada tampilan akan tercermin pada model lingkup. Ini membuat model ruang lingkup satu -satunya hal yang perlu Anda pedulikan dalam logika bisnis Anda.
Ada beberapa instruksi, seperti NG-repeat, yang mengkloning setiap elemen DOM dalam set data sekali. Praktik membagi seluruh proses kompilasi menjadi dua tahap: kompilasi dan menghubungkan meningkatkan kinerja keseluruhan, karena template yang dikloning hanya perlu dikompilasi sekali secara total, dan kemudian dihubungkan ke contoh model masing -masing.
petunjuk
Petunjuk menunjukkan "tindakan yang harus dilakukan ketika struktur HTML yang terkait memasuki fase kompilasi". Arahan dapat ditulis atas nama elemen, di atribut, dalam nama kelas CSS, dan di komentar. Di bawah ini adalah beberapa contoh menggunakan arahan NG-bind dengan fungsi yang sama.
Salinan kode adalah sebagai berikut:
<span ng-bind = "exp"> </span>
<span> </span>
<ng-bind> </g-bind>
<!-Directive: NG-Bind exp->
Arahan pada dasarnya hanyalah fungsi yang perlu dieksekusi ketika kompiler dikompilasi ke DOM yang relevan. Anda dapat menemukan informasi lebih rinci tentang arahan dalam dokumentasi API directive.
Di bawah ini adalah perintah yang membuat elemen dapat diseret. Perhatikan atribut yang dapat diseret di elemen <span>.
index.html:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html ng-app = "drag">
<head>
<skrip src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<skrip src = "script.js"> </script>
</head>
<body>
<Span Draggable> Seret saya </span>
</body>
</html>
Script.js:
Salinan kode adalah sebagai berikut:
angular.module ('drag', []).
Directive ('Draggable', function ($ document) {
var startx = 0, starty = 0, x = 0, y = 0;
fungsi pengembalian (scope, elemen, attr) {
element.css ({
Posisi: 'kerabat',
Perbatasan: '1px solid red',
BackgroundColor: 'Lightgrey',
Kursor: 'Pointer'
});
element.bind ('mousedown', function (event) {
startx = event.screenx - x;
starty = event.screeny - y;
$ document.bind ('mousemove', mousemove);
$ document.bind ('mouseUp', mouseUp);
});
function mousemove (event) {
y = event.screeny - starty;
x = event.screenx - startx;
element.css ({
Atas: y + 'px',
Kiri: x + 'px'
});
}
function mouseUp () {
$ document.unbind ('mousemove', mousemove);
$ document.unbind ('mouseUp', mouseUp);
}
}
});
Perilaku baru ini dapat dicapai dengan menambahkan atribut yang dapat diseret. Keindahan peningkatan kami adalah kami memberikan kemampuan baru kepada browser. Kami telah menggunakan cara alami untuk memperluas kemampuan browser untuk memahami perilaku baru dan sintaksis baru selama pengembang akrab dengan aturan HTML.
Pahami pandangannya
Ada banyak sistem template online. Sebagian besar dari mereka "mengikat templat karakter statis dan data, menghasilkan karakter baru, dan memasukkannya ke dalam elemen halaman melalui innerHTML".
Ini berarti bahwa setiap perubahan dalam data akan menyebabkan data digabungkan kembali dengan templat untuk menghasilkan karakter baru dan kemudian dimasukkan ke dalam DOM. Masalah yang muncul meliputi: input pengguna perlu dibaca dan dikombinasikan dengan data model, input pengguna perlu ditimpa, seluruh proses pembaruan perlu dikelola secara manual, dan kurangnya ekspresi yang kaya.
AngularJS berbeda. Kompiler AngularJS menggunakan DOM dengan instruksi, bukan templat string. Ini mengembalikan fungsi tautan, yang digabungkan dengan model lingkup untuk menghasilkan tampilan dinamis. Proses pengikatan tampilan dan model ini adalah "transparan". Pengembang tidak perlu melakukan apa pun tentang memperbarui tampilan. Dan aplikasi tidak menggunakan innerHTML, jadi kami tidak perlu menimpa input pengguna. Lebih khusus lagi, arahan Angular tidak hanya dapat menggunakan pengikatan string, tetapi juga menggunakan beberapa struktur yang menunjukkan perilaku.
Kompilasi AngularJS akan menghasilkan "DOM stabil". Ini berarti bahwa contoh elemen DOM yang terikat pada model data tidak akan berubah selama siklus hidup pengikatan. Ini juga berarti bahwa kode dapat mendapatkan referensi instance elemen DOM dan mendaftarkan acara, tanpa khawatir bahwa referensi ini akan hilang ketika templat dan data digabungkan.