Pada bagian sebelumnya, kerangka kerja JS sudut diperkenalkan secara singkat. Pada bagian ini, mekanisme Bootstrap (Bootstrap) dan kompiler (kompilasi) Angular akan dilanjutkan.
1: Bootstrap: Inisialisasi sudut
1: Otomatisasi awal yang direkomendasikan oleh Angular adalah sebagai berikut:
<! Doctype html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "angular.js"> </body> </html
Gunakan NGAPP untuk menandai node root di mana Anda perlu mem -boot aplikasi secara otomatis, yang umumnya merupakan tag HTML. Ketika acara DOMContentLoaded memicu sudut, itu akan secara otomatis menemukan NGAPP sebagai simpul root aplikasi. Jika ditemukan, operasi berikut akan dilakukan:
1. Muat Modul (Modul) Petunjuk Terkait (Instruksi).
2. Buat Injector Aplikasi (Mekanisme Injeksi Angular).
3. Kompilasi dan proses NG-APP sebagai instruksi simpul root. Ini memungkinkan Anda untuk menyesuaikan pemilihan node DOM sebagai simpul root aplikasi.
<! Doctype html> <html ng-app = "opsionalModuleName"> <body> Saya dapat menambahkan: {{ +}}. <skrip src = "angular.js"> </script> </body> </html>2: Inisialisasi Manual:
Jika Anda ingin memiliki lebih banyak kontrol atas inisialisasi, Anda dapat menggunakan metode boot manual khusus untuk menginisialisasi alih -alih inisialisasi otomatis Angular. Misalnya, Anda perlu melakukan sesuatu sebelum Angular menyusun templat, seperti mengubah konten templat tertentu. Metode boot manual adalah sebagai berikut:
<! Doctype html> <html xmlns: ng = "http://angularjs.org"> <body> hello {{'world'}}! <script src = "http://code.angular.org/angular.js"> </script> <cript> <cript> <cript> script> <crips. {angular.bootstrap (dokumen);}); </script> </body> </html>1. Setelah semua kode pada halaman dimuat, temukan simpul root Template HTML (elemen dokumen tipikal).
2. Call API/Angular.Bootstrap (Angular.Bootstrap (Elemen [, Modul])) untuk mengkompilasi templat agar dapat dieksekusi.
Dua: Kompiler: Terjemahan Angular
Mekanisme kompilasi Angular memungkinkan pengembang untuk menambahkan sintaks HTML baru ke browser, memungkinkan kami untuk menambahkan beberapa node HTML, atribut, dan bahkan membuat beberapa node khusus, atribut. Angular memperluas perilaku ini ke dalam arahan. Perang membawa arahan yang bermanfaat dan memungkinkan kita untuk membuat arahan khusus domain.
1: Pemrosesan kompiler dibagi menjadi dua langkah:
1. Konversi DOM, kumpulkan Directive, dan return Link (Connection) Function.
2. Gabungkan instruksi dan ruang lingkup untuk menghasilkan pandangan hidup. Setiap perubahan dalam mode lingkup akan tercermin ke dalam tampilan dan interaksi pengguna dari tampilan juga akan disinkronkan ke model lingkup, dan ruang lingkup adalah sumber data tunggal.
2: Perintah Petunjuk
Directive adalah tindakan yang akan diproses dengan pengeditan desain HTML khusus. Itu dapat ditempatkan pada nama, atribut, kelas node, atau bahkan dalam komentar HTML. Berikut adalah metode penulisan yang setara dari NG-bind Angular sendiri:
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <!-Directive: ng-bind exp>
Petunjuk hanyalah fungsi yang akan dieksekusi oleh Angular di DOM. Berikut adalah contoh menyeret dan tetesan yang dapat diterapkan pada atribut rentang dan div:
angular.module ('drag', []). Directive ('draggable', function ($ document) {var startx =, starty =, x =, y =; function return (scope, element, attr) {element.css ({position: 'relatif', border: 'px solid red', latar belakang.csss: 'moous', 'cursor', poing: 'poing', poing ', {lightgrey', 'cursor', {lightgrey ', {lightgrey', {lightgrey ', {lightgrey', ',' cursor ',' oMoring ', po: latar belakang. Fungsi) {Startx = Event.Screenx - X; 'PX', Kiri: X + 'PX'});Demo
Anda dapat menyeret dan memindahkan saya ke mana saja!
3: Lihat pemahaman
Banyak mesin template dirancang untuk menggabungkan templat dan model untuk mengembalikan string, dan kemudian menambahkan node DOM menggunakan InnerHTML, yang dianggap bahwa setiap perubahan dalam data harus diraih kembali untuk menghasilkan konten baru dan ditambahkan ke DOM. Angka berikut ini termasuk dalam teknologi pengikatan satu arah:
Angular tidak menggunakan instruksi arahan daripada string. Nilai pengembalian adalah fungsi tautan yang menggabungkan model data. Pengikatan tampilan dan model adalah otomatis dan transparan, dan tidak mengharuskan pengembang untuk menambahkan tindakan tambahan untuk memperbarui tampilan. Angular tidak hanya mengikat model data, tetapi juga konsep perilaku. Sebagai ikatan dua arah, bentuknya adalah sebagai berikut:
bahan:
1. Situs web resmi: http://angularjs.org/
2. Kode Unduh: https://github.com/angular/angular.js
Di atas adalah mekanisme bootstrap dan kompiler sudut yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!