Bootstrap Bootstrap Penjelasan Detail dan Kode Sampel

Penulis：Eve Cole Waktu Pembaruan：2025-08-28 04:00:03

Artikel pertama dari seri catatan studi AngularJS, saya harap saya bisa terus menulisnya. Isi artikel ini terutama berasal dari konten dokumen http://docs.angularjs.org/guide/, tetapi juga menambahkan beberapa pemahaman dan upaya Anda sendiri.

1. Ringkasan

Artikel ini menjelaskan proses inisialisasi sudut dan bagaimana menginisialisasi sudut secara manual saat Anda membutuhkannya.

2. Tag Angular <Pript>

Contoh ini digunakan untuk menunjukkan cara mengintegrasikan sudut melalui jalur yang disarankan untuk mencapai inisialisasi otomatis.

 <! Doctype html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <skrip src = "angular.js"> </body> </html>

Tempatkan tag SCIPRT di bagian bawah halaman. Ini dapat mencegah pemuatan HTML dengan memuat Angular.js, sehingga mengurangi waktu pemuatan aplikasi. Kita bisa mendapatkan versi terbaru dari AngularJS di http://code.angularjs.org. Untuk alasan keamanan, jangan langsung merujuk alamat ini dalam produk untuk memuat skrip. Tetapi jika itu hanya untuk penelitian dan pembelajaran, tidak masalah jika itu adalah koneksi langsung.

Pilih: Angular- [Versi] .js adalah versi yang nyaman dibaca dan cocok untuk pengembangan dan debugging harian.

Pilih: Angular- [Versi] .min.js adalah versi terkompresi dan dikaburkan yang cocok untuk digunakan dalam produk akhir.

Tempatkan "ng-app" ke dalam simpul root aplikasi. Jika Anda ingin Angular secara otomatis memulai aplikasi Anda, Anda biasanya dapat meletakkannya di tag <html>.

Jika kita perlu menggunakan sintaksis arahan bergaya sekolah lama "ng:", maka kita perlu menambahkan xml-namespace ke dalam tag HTML untuk "tolong" IE. (Ini adalah alasan historis, dan kami tidak merekomendasikan menggunakan NG :)

3. Inisialisasi Otomatis

Angular akan diinisialisasi secara otomatis dalam acara DOMContentloaded, dan Angular akan menemukan simpul root aplikasi yang ditentukan oleh Anda melalui Petunjuk NG-APP. Jika ditemukan, Angular akan melakukan hal berikut:

Muat arahan yang terkait dengan modul.

Buat injektor terkait aplikasi (Dependency Manager).

Tentukan simpul root dengan NG-APP dan mulai karya "kompilasi" yang relevan dari DOM. Dengan kata lain, sebagian dari halaman (bukan <html>) dapat digunakan sebagai simpul akar, sehingga membatasi ruang lingkup sudut.

 <! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <itement> bootstrap-auto </itement> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> Berikut ini adalah bagian luar NG-App ~~ {{1+2}} <Div Ng-App> di sini adalah bagian dalam NG-App ~~~ {{1+3*2}} </Div> <script src = "../ angular-1.0.1.js" Tipe = "TEPP/TEPP/TEPP/" ../ Angular-10.1.js "

Catatan: "NG-cloak" di dalamnya digunakan sebelum kompilasi Angular.js selesai (ya! Itu benar! Ini sebelum kompilasi selesai, tidak sebelum pemuatan AngularJS. Oleh karena itu, jika Anda ingin menghindari situasi ini dengan baik, cara terbaik untuk mengoptimalkan proses pemuatan aplikasi 6, atau menggabungkan CSS untuk memproses Templates yang tidak dikompilasi. Sejak Daerah-Daerah, atau menggabungkan CSS untuk memproses Templates yang tidak dikompilasi. Sejak Daerah-Daerah, atau menggabungkan CSS untuk memproses Templates yang tidak dikompilasi. Sejak Daerah-Daerah Ize. Metode class = "ng-cloak". Setelah kompilasi selesai, kelas atau atribut ini akan dihapus.) Sembunyikan templat untuk menghindari menampilkan template asli pada halaman.

4. Inisialisasi manual

Jika kami ingin lebih mengontrol proses inisialisasi (misalnya, Anda perlu memuat Angular.js melalui skrip loader atau melakukan beberapa operasi sebelum halaman kompilasi sudut), maka kami dapat menggunakan metode startup yang disebut secara manual sebagai gantinya.

Contoh berikut setara dengan menggunakan NG-APP, arahan:

 <! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <itement> bootstrap-manual </iteme> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> Berikut ini adalah bagian luar NG-App ~~ {{1+2}} <div id = "rootofapp"> Ini adalah bagian dalam NG-App ~~~ {{1+3*2} </Div> <script src = "../ angular-1.1.js" type = "text/javascript"> Angular.element (dokumen) .ready (function () {angular.bootstrap (angular.element (document.geteLementById ("rootofapp")));}); </script> </body> </html>

Artinya, kode kami dapat ditulis dalam langkah -langkah berikut:

1. Setelah halaman dan kode lainnya dimuat, temukan simpul root dari templat aplikasi;

2. Hubungi Angular.Bootstrap dan biarkan Angular mengkompilasi templat menjadi aplikasi pengikat dua arah yang dapat dieksekusi!

Kami akan terus menambahkan artikel yang relevan di masa depan. Terima kasih atas dukungan Anda untuk situs ini!