Teks asli dilanjutkan, dan buku terus berlangsung. . . Masih merujuk ke http://code.angularjs.org/1.0.2/docs/guide/compiler
1. Ringkasan
Kompiler HTML Angular memungkinkan pengembang untuk menyesuaikan sintaks HTML baru. Kompiler memungkinkan kita untuk melampirkan perilaku ke elemen atau atribut HTML apa pun, atau bahkan tag HTML baru, atribut (seperti <gadis cantik = "cf"> </cantik>). Angular menyebut arahan perilaku tambahan ini.
HTML memiliki banyak struktur gaya HTML yang telah ditentukan sebelumnya yang secara khusus memformat dokumen statis (yang dapat memberi tahu browser cara menampilkan konten yang ditandai). Misalkan sesuatu perlu dipusatkan, dan kita tidak perlu mengajar browser bagaimana melakukannya (n kata -kata dihilangkan di sini). Kita hanya perlu menambahkan Align = "Center" ke tag yang perlu dipusatkan. Ini adalah hal yang hebat tentang bahasa deklaratif.
Tetapi bahasa deklaratif juga memiliki keterbatasan, yaitu, Anda tidak dapat memberi tahu browser cara menangani sintaks di luar ruang lingkup yang telah ditentukan. Misalnya, kami tidak dapat memberi tahu browser dengan sangat sederhana bagaimana membuat teks selaras 1/3 dari browser. Jadi, kita membutuhkan cara untuk menjaga browser bergerak seiring waktu dan belajar tata bahasa baru.
Angular pra-mengikat beberapa arahan yang membantu dalam membangun aplikasi. Kami juga dapat membuat arahan unik untuk aplikasi kami sendiri. Ekstensi arahan ini akan menjadi "bahasa spesifik domain" dari aplikasi kita sendiri.
Kompilasi ini hanya akan terjadi di sisi browser dan tidak memerlukan sisi server atau langkah prekompilasi.
2. Kompiler
Sebagai layanan sudut, kompiler bertanggung jawab untuk melintasi struktur DOM dan menemukan sifat. Proses kompilasi dibagi menjadi dua tahap:
1. Kompilasi: Lintasi pohon simpul DOM dan kumpulkan semua arahan. Hasilnya adalah fungsi penghubung.
2. Tautan: Bind Arahan ke dalam lingkup dan buat tampilan langsung. Setiap perubahan dalam ruang lingkup akan tercermin dalam tampilan (perbarui tampilan); Aktivitas pengguna apa pun (Ubah) ke templat akan tercermin dalam model lingkup (pengikatan dua arah). Ini memungkinkan model lingkup untuk mencerminkan nilai yang benar.
Beberapa arahan, seperti NG-repeat, menyalin elemen tertentu (kombinasi) sekali untuk setiap elemen dalam koleksi. Kompilasi dan tautan adalah dua tahap untuk meningkatkan kinerja. Karena template yang diklon hanya perlu dikompilasi sekali, dan kemudian menghubungkan elemen -elemen di setiap koleksi sekali (mirip dengan cache template).
3. Petunjuk
Petunjuk adalah perilaku yang dipicu ketika struktur HTML tertentu ditemui selama kompilasi. Arahan dapat ditempatkan di nama, atribut, kelas, dan bahkan komentar elemen. Berikut adalah beberapa cara untuk merujuk NG-BIND (arahan bawaan):
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <!-arahan: ng-bind exp->
Petunjuk hanyalah fungsi yang dieksekusi ketika kompiler bertemu di DOM. Directive API Documentation menjelaskan secara rinci cara membuat arahan.
Berikut adalah sampel yang memungkinkan elemen untuk bermain petak umpet dengan mouse Anda ...
<! Doctype html> <html lang = "zh-cn" ng-app = "hideeankseek"> <head> <meta charset = "utf-8"> <itement> tersembunyi dan mencari </iteme> <style type = "text/css"> .ng-cloak {no pajangan: tidak ada; } </tyle> </head> <body> <span wildcat> saya melarikan diri segera setelah saya menyentuh ~ ~ Come Me ~~ </span> <script src = "../ angular-1.0.1.js" type = "text/javascript", "script> <script =" text/javascript "> hilcript" ("hidcript" ("hilce." hilceK ("hilce." function. ($ dokumen) {var maxleft = 400, maxtop = 300; "Posisi": "Absolute", "Border": "1px Solid Green"}); }). Teks (msg [parseInt (math.random () * 10000 % msg.length)]);Menambahkan atribut "Wildcat" ke elemen apa pun akan membuat elemen memiliki perilaku baru. Dengan cara ini, kami mengajarkan browser cara menangani elemen yang akan bersembunyi dan mencari (jangan khawatir, Anda tidak berada di ruangan tertentu, Anda tidak akan menggantung -_-!). Kami telah memperluas "kosa kata" browser melalui pendekatan ini. Ini adalah cara yang relatif alami bagi siapa saja yang akrab dengan aturan HTML.
Sekarang sudah larut malam, dan kita akan melanjutkan besok. . . Sampai jumpa setelah iklan
======================= GREATD GREATED GREATE ================================
4. Memahami tampilan (tampilan)
Ada banyak sistem template di luar, yang biasanya terhubung ke data melalui string templat, menghasilkan string HTML akhir, dan menulis hasilnya menjadi elemen melalui atribut InnerHTML.
Ini berarti bahwa ketika ada data yang berubah, data dan templat perlu digabungkan ke dalam string lagi, dan kemudian ditulis kembali ke elemen yang sesuai sebagai bagian dalam. Ada beberapa masalah di sini: (Saya benar -benar tidak dapat memahami terjemahan literal di sini ... hanya yy) Misalkan ada adegan seperti itu, dan template berisi kotak input. Pengguna memasuki kotak input dan template diperbarui secara serempak. Templat normal memperbarui tampilan melalui innerHTML, string dan koneksi data, yang akan mengganggu input pengguna dan memiliki pengalaman yang buruk.
Angular itu unik. Proses DOM PROSES (COMULER) DOM melalui arahan, bukan dengan memproses templat string. Hasil pemrosesan adalah fungsi penghubung yang digabungkan dengan model lingkup dan menghasilkan templat waktu-nyata. Ikatan tampilan pada model lingkup transparan bagi kita. Pengembang tidak perlu melakukan tindakan apa pun untuk memperbarui tampilan atau model. Selain itu, karena template tampilan tidak diperbarui dengan innerHTML, input pengguna tidak akan terganggu. Selain itu, arahan sudut tidak hanya dapat mengikat nilai teks, tetapi juga konstruksi perilaku.
Metode pemrosesan sudut ini menghasilkan DOM yang stabil. Ini berarti bahwa selama siklus hidup elemen DOM, selalu terikat pada contoh model tertentu, dan hubungan ini tidak akan berubah. Ini juga berarti bahwa kode dapat menyimpan referensi ke objek DOM, mendaftarkan fungsi acara untuk itu, dan bahwa referensi ini tidak akan dihancurkan oleh penggabungan data templat.