Bermula dengan Angularjs basics_AngularJS

Malah, saya tidak tahu siapa yang harus saya sasarkan atau di mana untuk mula menulis tentang ini, jadi saya akan mula menulis berdasarkan idea mudah

1.elemen.sudut 2.sudut.Bootstrap

Kami sangat mengetahui bahawa apabila ng-app digunakan pada nod, angular akan memulakannya secara automatik untuk anda Proses pemulaan dibahagikan kepada langkah berikut

1. Angular akan dimulakan secara automatik semasa memuatkan dokumen. Ia akan mencari nod yang ditentukan oleh arahan ng-app. 2. Muatkan arahan berkaitan modul 3. Buat penyuntik (pengurus kebergantungan) yang berkaitan dengan aplikasi 4. Dengan ng-app yang ditentukan sebagai nod akar, mula menyusun Dom

Sekarang mari kita mulakan sendiri dan buat sesuatu yang setara dengan arahan ng-app. angular.element ialah pembungkus yang membungkus elemen DOM asal atau rentetan HTML sebagai elemen jQuery. angular.Bootstrap boleh memulakan skrip secara manual Kami menggunakan kedua-dua ini untuk memulakan skrip ini

Salin kod Kod adalah seperti berikut: Bootstrap-manual .ng-jubah { paparan: tiada; } Ini di luar ng-app~~{{1 2}} Ini ada di dalam ng-app~~~ {{1 2}} angular.element(document).ready(function() { angular.bootstrap(angular.element(document.getElementById("widuu"))); }); 2.penyusun

Kami dengan jelas melihat bahawa dokumen rasmi angularjs adalah semua nomenklatur kes unta, seperti ngApp, ngModule, ngBind, dll. Ini adalah arahan yang berkaitan Pengkompil html membolehkan kami mentakrifkan atribut dan teg elemen sendiri tingkah laku dipanggil arahan. Dokumentasi rasmi menerangkan pengkompil seperti berikut

Salin kod Kod adalah seperti berikut: Penyusun Pengkompil ialah perkhidmatan Sudut yang merentasi DOM mencari atribut Proses penyusunan berlaku dalam dua fasa. Susun: melintasi DOM dan kumpulkan semua arahan Hasilnya ialah fungsi pemautan.

Pautan: menggabungkan arahan dengan skop dan menghasilkan paparan langsung Sebarang perubahan dalam model skop dicerminkan dalam paparan, dan sebarang interaksi pengguna dengan paparan ditunjukkan dalam model skop ini sumber kebenaran.

Beberapa arahan seperti elemen DOM klon ng-repeat sekali untuk setiap item dalam koleksi Mempunyai fasa penyusunan dan pautan meningkatkan prestasi kerana templat klon hanya perlu disusun sekali, dan kemudian dipautkan sekali untuk setiap contoh klon.

Pengkompil ialah perkhidmatan Angular, bertanggungjawab untuk merentasi nod DOM dan mencari atribut terbahagi kepada dua peringkat:

1. Susun: melintasi nod dan kumpulkan semua arahan, dan kembalikan fungsi pemautan 2. Pautan: Ikat arahan pada skop dan buat paparan langsung. Sebarang perubahan dalam skop akan ditunjukkan dalam paparan (mengemas kini paparan apa-apa aktiviti pengguna (perubahan) pada templat akan ditunjukkan dalam model skop (pengikatan dua hala). Ini membolehkan model skop mencerminkan nilai yang betul. Sesetengah arahan, seperti ng-repeat, akan menyalin elemen tertentu (gabungan) sekali untuk setiap elemen dalam koleksi. Kedua-dua peringkat penyusunan dan pemautan meningkatkan prestasi. Kerana templat klon hanya perlu disusun sekali dan kemudian dipautkan sekali untuk setiap elemen dalam koleksi (serupa dengan caching templat).

3. Cipta arahan anda sendiri langkah demi langkah

1. Fahami arahan Pertama sekali, fahami bahawa arahan mengikut penamaan kes unta, seperti ngModule Apabila disusun, padanan adalah seperti ini, contohnya:

Salin kod Kod adalah seperti berikut: arahan boleh menggunakan x- atau data- sebagai awalan, dan boleh menggunakan pembatas seperti:, -, atau _ untuk menukar kaedah penamaan kotak unta, seperti ditunjukkan di bawah:

Salin kod Kod adalah seperti berikut:

Secara amnya kami menggunakan ng-bind untuk sepadan dengan ngBind, format ini $compile boleh memadankan arahan berdasarkan nama elemen, atribut, nama kelas dan ulasan

Salin kod Kod adalah seperti berikut: Semasa proses penyusunan, pengkompil memadankan ungkapan terbenam (seperti {{sesuatu}}) dalam teks dan atribut melalui perkhidmatan $interpolate. Ungkapan ini akan didaftarkan sebagai jam tangan dan dikemas kini sebagai sebahagian daripada kitaran ringkasan. Berikut ialah interpolasi mudah: Hello {{username}}!

2. Langkah penyusunan

Tiga langkah "kompilasi" HTML:

1. Mula-mula, tukar HTML kepada objek DOM melalui API standard penyemak imbas. Ini adalah langkah penting. Kerana templat mestilah boleh dihuraikan (mengikut spesifikasi) HTML. Ini boleh dibandingkan dengan kebanyakan sistem templat, yang biasanya berdasarkan rentetan dan bukannya elemen DOM. 2. Penyusunan DOM diselesaikan dengan memanggil kaedah $comple(). Kaedah ini merentasi DOM dan sepadan dengan arahan. Jika perlawanan itu berjaya, ia akan ditambahkan pada senarai arahan bersama-sama dengan DOM yang sepadan. Selagi semua arahan yang dikaitkan dengan DOM yang ditentukan dikenal pasti, ia akan diisih mengikut keutamaan dan fungsi compile() mereka akan dilaksanakan dalam susunan ini. Fungsi penyusunan arahan mempunyai peluang untuk mengubah suai struktur DOM dan bertanggungjawab untuk menjana penghuraian fungsi pautan(). Kaedah $compile() mengembalikan fungsi pemautan gabungan, yang merupakan koleksi fungsi pemautan yang dikembalikan oleh semua fungsi kompilasi arahan sendiri. 3. Sambungkan templat ke skop melalui fungsi pemautan yang dikembalikan dalam langkah sebelumnya. Ini seterusnya memanggil fungsi pemautan arahan itu sendiri, membolehkan mereka mendaftarkan beberapa pendengar pada elemen dan menyediakan beberapa jam tangan bersama-sama dengan skop. Hasilnya ialah pengikatan segera dua hala antara skop dan DOM. Apabila skop berubah, DOM akan mendapat respons yang sepadan.

Salin kod Kod adalah seperti berikut: var $compile = ...; // disuntik ke dalam kod anda var skop = ...; var html = ' '; // Langkah 1: menghuraikan HTML ke dalam elemen DOM templat var = angular.element(html); // Langkah 2: susun templat var linkFn = $compile(template); // Langkah 3: pautkan templat yang disusun dengan skop. linkFn(skop); mengikat atribut ngAttr

Salin kod Kod adalah seperti berikut: Itu sahaja untuk hari ini, dan saya akan mula menulis dan mencipta arahan esok~~~ Jangan panjangkan panjangnya, bab ini mempunyai banyak konsep utama~~~