Rumah >hujung hadapan web >tutorial js >Tutorial Bermula AngularJS (Sifar): Bootstrap_AngularJS

Tutorial Bermula AngularJS (Sifar): Bootstrap_AngularJS

WBOYasal: 2016-05-16 16:28:331387semak imbas

Kami kini bersedia untuk menulis aplikasi AngularJS - phonecat. Dalam langkah ini (Langkah 0), anda akan menjadi biasa dengan fail kod sumber yang penting, belajar untuk memulakan persekitaran pembangunan yang mengandungi projek benih AngularJS dan menjalankan aplikasi dalam penyemak imbas.

Masukkan direktori angular-phonecat dan jalankan arahan berikut:

Salin kod Kod adalah seperti berikut:

git checkout -f langkah-0

Arahan ini akan menetapkan semula direktori kerja projek phonecat Anda disyorkan untuk menjalankan arahan ini pada setiap langkah pembelajaran dan menukar nombor dalam arahan kepada nombor yang sepadan dengan langkah pembelajaran anda dibuat dalam direktori kerja.

Jalankan arahan berikut:

Salin kod Kod adalah seperti berikut:

skrip nod/web-server.js

untuk memulakan pelayan Selepas memulakan, terminal baris arahan akan menggesa Pelayan Http berjalan di http://localhost:8000 Harap jangan tutup terminal akan menutup pelayan. Masukkan http://localhost:8000/app/index.html dalam penyemak imbas untuk mengakses aplikasi phonecat kami.

Sekarang, anda sepatutnya melihat aplikasi awal kami dalam penyemak imbas, ia sangat mudah, tetapi ia menunjukkan bahawa projek kami sedia untuk dijalankan.

"Tiada apa-apa lagi di sini!" yang dipaparkan dalam aplikasi dibina daripada kod HTML berikut. Kod ini mengandungi elemen utama AngularJS, yang perlu kita pelajari.

app/index.html

Salin kod Kod adalah seperti berikut:

Fail HTML Saya

Tiada apa-apa di sini {{'yet' '!'}}

Apa yang dilakukan oleh kod itu?

arahan ng-app:

Salin kod Kod adalah seperti berikut:

Arahan

ng-app menandakan skop skrip AngularJS Menambahkan atribut ng-app pada Pembangun juga boleh menggunakan arahan ng-app secara setempat, seperti

, dan skrip AngularJS hanya akan dijalankan dalam

itu.

Teg skrip AngularJS:

Salin kod Kod adalah seperti berikut:

Barisan kod ini memuatkan skrip angular.js Apabila penyemak imbas selesai memuatkan keseluruhan halaman HTML, ia akan melaksanakan skrip angular.js Selepas skrip angular.js dijalankan, ia akan mencari tag HTML yang mengandungi arahan ng-app , teg ini mentakrifkan skop aplikasi AngularJS.

Ekspresi terikat dengan pendakap berganda:

Salin kod Kod adalah seperti berikut:

Tiada apa-apa di sini {{'yet' '!'}}

Barisan kod ini menunjukkan fungsi teras templat AngularJS - pengikatan ini terdiri daripada kurungan kerinting berganda {{}} dan ungkapan 'yet' '!'.

Pengikatan ini memberitahu AngularJS bahawa ia perlu menilai ungkapan dan memasukkan hasilnya ke dalam DOM Dalam langkah seterusnya, kita akan melihat bahawa DOM boleh dikemas kini dalam masa nyata kerana hasil daripada operasi ekspresi.

Ekspresi AngularJS Ungkapan sudut ialah coretan kod yang serupa dengan ungkapan AngularJS hanya berjalan dalam skop AngularJS dan bukannya berjalan dalam keseluruhan DOM.

Aplikasi Bootstrap AngularJS

Meboot aplikasi AngularJS secara automatik melalui arahan ngApp ialah cara yang ringkas dan sesuai untuk kebanyakan situasi. Dalam pembangunan lanjutan, seperti menggunakan skrip untuk memuatkan aplikasi, anda juga boleh menggunakan bootstrap untuk bootstrap aplikasi AngularJS secara manual.

Terdapat tiga perkara penting dalam proses bootstrap aplikasi AngularJS:

1. Penyuntik akan digunakan untuk membuat suntikan pergantungan untuk aplikasi ini; 2. Penyuntik akan mencipta skop akar sebagai skop model aplikasi kami; 3. AngularJS akan memaut ke DOM dalam skop akar, bermula daripada teg HTML yang ditandakan dengan ngApp, dan memproses arahan dan binding secara beransur-ansur dalam DOM.

Setelah aplikasi AngularJS dibut, ia akan terus mendengar peristiwa yang dicetuskan HTML penyemak imbas, seperti peristiwa klik tetikus, peristiwa penting, respons masuk HTTP dan peristiwa lain yang mengubah model DOM. Sebaik sahaja peristiwa sedemikian berlaku, AngularJS akan secara automatik mengesan perubahan dan mengendalikan serta mengemas kininya dengan sewajarnya.

Struktur aplikasi di atas sangat mudah. Pakej templat mengandungi hanya satu arahan dan satu pengikatan statik, dan model juga kosong. Seterusnya kami mencuba aplikasi yang sedikit lebih kompleks!

Untuk apa fail ini dalam direktori kerja saya?

Aplikasi di atas berasal daripada projek benih AngularJS, biasanya kami boleh menggunakan projek benih AngularJS untuk mencipta projek baharu. Projek benih termasuk pangkalan kod AngularJS terkini, perpustakaan ujian, skrip dan contoh aplikasi mudah, yang mengandungi konfigurasi asas yang diperlukan untuk membangunkan aplikasi web biasa.

Untuk tutorial ini kami membuat perubahan berikut pada projek benih AngularJS:

1. Padamkan contoh aplikasi; 2. Tambahkan imej telefon mudah alih ke apl/img/telefon/; 3. Tambahkan fail data telefon mudah alih (JSON) pada apl/telefon/; 4. Tambahkan fail Twitter Bootstrap pada app/css/ dan app/img/.

Berlatih

Cuba tambah ungkapan baharu tentang operasi matematik pada index.html:

Salin kod

Kod adalah seperti berikut:

1 2 = {{ 1 2 }}

Ringkasan

Sekarang mari kita beralih ke langkah 1 dan tambahkan beberapa kandungan pada aplikasi web.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Tutorial Bermula AngularJS (1): Static Template_AngularJSArtikel seterusnya：Tutorial Bermula AngularJS (1): Static Template_AngularJS

Artikel berkaitan

Lihat lagi