Faktanya, saya tidak tahu siapa yang harus ditargetkan atau di mana harus mulai menulis, jadi saya akan mulai menulis sesuai dengan ide sederhana.
1.angular.element
2. gulung.bootstrap
Kami sangat jelas bahwa NG-APP diterapkan pada node, dan Angular secara otomatis membantu Anda menginisialisasi. Proses inisialisasi dibagi menjadi langkah -langkah berikut
1.angular akan diinisialisasi secara otomatis saat memuat dokumen, dan pertama-tama, simpul yang ditentukan oleh arahan NG-APP akan ditemukan.
2. Instruksi Terkait Modul Memuat
3. Buat injektor terkait aplikasi (Dependence Manager)
4. Mulailah menyusun DOM dengan NG-APP yang mapan sebagai simpul root
Sekarang kami menginisialisasi sendiri dan membuat sesuatu yang setara dengan arahan NG-APP. Angular.Element Ini adalah pembungkus, membungkus elemen DOM asli atau string html sebagai elemen jQuery. Angular.Bootstrap dapat secara manual menginisialisasi skrip, kami menggunakan keduanya untuk menginisialisasi skrip ini
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "UTF-8">
<title> bootstrap-manual </title>
<type style = "text/css">
.ng-cloak {
Tampilan: Tidak Ada;
}
</tyle>
</head>
<body>
Berikut adalah bagian luar NG-App ~~ {{1+2}}
<Div id = "widuu"> Ini ada di ng-app ~~~ {{1+2}} </div>
<skrip src = "angular.min.js" type = "text/javascript"> </script>
<type skrip = "Teks/JavaScript">
angular.element (dokumen) .ready (function () {
angular.bootstrap (angular.element (document.geteLementById ("widuu")));
});
</script>
</body>
</html>
2.Kompiler
Kami dengan jelas melihat bahwa dokumen resmi AngularJS penuh dengan nomenklatur unta, seperti NGAPP, NGModule, Ngbind, dll., Adalah instruksi terkait. Di antara mereka, kompiler HTML memungkinkan kita untuk mendefinisikan atribut dan tag elemen sendiri. Angular menyebut arahan perilaku tambahan ini.
Dokumentasi resmi menjelaskan kompiler seperti ini
Salinan kode adalah sebagai berikut:
Penyusun
Compiler adalah layanan sudut yang melintasi DOM mencari atribut. Proses kompilasi terjadi dalam dua fase.
Kompilasi: Lintasi DOM dan kumpulkan semua arahan. Hasilnya adalah fungsi penghubung.
Tautan: Gabungkan arahan dengan ruang lingkup dan hasilkan tampilan langsung. Setiap perubahan dalam model lingkup tercermin dalam tampilan, dan setiap interaksi pengguna dengan tampilan tercermin dalam model lingkup. Ini membuat model lingkup menjadi sumber kebenaran tunggal.
Beberapa arahan seperti NG-RePeat Clone DOM Elements sekali untuk setiap item dalam koleksi. Memiliki fase kompilasi dan tautan meningkatkan kinerja karena template yang dikloning hanya perlu dikompilasi sekali, dan kemudian dihubungkan sekali untuk setiap instance klon.
Kompiler adalah layanan sudut, bertanggung jawab untuk melintasi node DOM dan menemukan properti. Kompilasi dibagi menjadi dua tahap:
1. Kompilasi: Lintasi node dan kumpulkan semua arahan, kembalikan fungsi tautan
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. Buat arahan Anda sendiri langkah demi langkah
1. Memahami Petunjuk
Pertama -tama, kami memahami bahwa Petunjuk didasarkan pada nomenklatur unta, seperti Ngmodule. Saat menyusun, pertandingan seperti ini, misalnya:
Salinan kode adalah sebagai berikut:
<input ng-model = "foo">
<Input Data-Ng: Model = "Foo">
Petunjuk dapat menggunakan X- atau data- sebagai awalan, dan dapat menggunakan pembatas:,-, atau _ dll untuk mengonversi metode penamaan unta, sebagai berikut:
Salinan kode adalah sebagai berikut:
<span ng-bind = "name"> </span> <br/>
<span ng: bind = "name"> </span> <br/>
<span ng_bind = "name"> </span> <br/>
<span data-ng-bind = "name"> </span> <br/>
<span x-ng-bind = "name"> </span> <br/>
Secara umum, kami menggunakan NG-Bind untuk sesuai dengan NGBind, format ini
$ compile dapat cocok dengan arahan berdasarkan nama elemen, atribut, nama kelas dan komentar
Salinan kode adalah sebagai berikut:
<my-dir> </my-dir>
<span my-dir = "exp"> </span>
<!-Directive: My-Dir Exp->
<span> </span>
Selama proses kompilasi, kompiler cocok dengan teks dengan ekspresi tertanam dalam atribut (seperti {{sesuatu}}) melalui layanan $ interpolate. Ekspresi ini akan didaftarkan sebagai jam tangan dan akan diperbarui bersama sebagai bagian dari siklus Digest. Ini interpolasi sederhana:
<img src = "img/{{username}}. jpg"/> halo {{username}}!
2. Langkah Kompilasi
Tiga langkah untuk "mengkompilasi" html:
1. Pertama, ubah HTML menjadi objek DOM melalui API standar browser. Ini adalah langkah yang sangat penting. Karena template harus parsable (sesuai dengan spesifikasi). Ini dapat dibandingkan dengan sebagian besar sistem templat, yang umumnya didasarkan pada string, bukan elemen DOM.
2. Kompilasi DOM dilakukan dengan memanggil metode $ comple (). Metode ini melintasi DOM dan cocok dengan arahan. Jika pertandingan berhasil, itu akan ditambahkan ke daftar arahan bersama dengan DOM yang sesuai. Selama semua arahan yang terkait dengan DOM yang ditentukan diidentifikasi, mereka akan diurutkan dalam prioritas dan menjalankan fungsi kompilasi () mereka dalam urutan itu. Fungsi Compile Directive memiliki peluang untuk memodifikasi struktur DOM dan bertanggung jawab untuk menghasilkan parsing fungsi tautan (). Metode $ compile () mengembalikan fungsi penghubung gabungan, yang merupakan kumpulan fungsi tertaut yang dikembalikan oleh fungsi kompilasi dari Petunjuk itu sendiri.
3. Hubungkan templat ke ruang lingkup melalui fungsi tautan yang dikembalikan pada langkah sebelumnya. Ini pada gilirannya memanggil fungsi tautan Directive sendiri, memungkinkan mereka untuk mendaftarkan beberapa pendengar pada elemen, dan membuat beberapa jam tangan dengan ruang lingkup. Hasilnya adalah ikatan dua arah, instan antara lingkup dan DOM. Ketika ruang lingkup berubah, DOM akan mendapatkan respons yang sesuai.
Salinan kode adalah sebagai berikut:
var $ compile = ...; // disuntikkan ke kode Anda
var scope = ...;
var html = '<div ng-bind =' exp '> </div>';
// Langkah 1: Parse HTML ke dalam elemen DOM
var template = angular.element (html);
// Langkah 2: Kompilasi template
var linkfn = $ compile (template);
// Langkah 3: Tautkan templat yang dikompilasi dengan ruang lingkup.
linkfn (scope);
Ikatan atribut NGATTR
Salinan kode adalah sebagai berikut:
<svg>
<Circle ng-attr-cx = "{{cx}}"> </circle>
</svg>
Itu saja hari ini, dan mulailah menulis untuk membuat arahan besok ~~~ Panjang kontrol tidak boleh terlalu lama, ada banyak konsep utama dalam bab ini ~~~