Kami sekarang sedang bersiap untuk menulis aplikasi AngularJS - PhoneCat. Pada langkah ini (langkah 0), Anda akan terbiasa dengan file kode sumber penting, belajar memulai lingkungan pengembangan yang berisi proyek benih AngularJS, dan menjalankan aplikasi di sisi browser.
Masukkan direktori Angular-Phonecat dan jalankan perintah berikut:
Salinan kode adalah sebagai berikut:
git checkout -f Langkah -0
Perintah ini akan mengatur ulang Direktori Kerja Proyek PhoneCat. Dianjurkan agar Anda menjalankan perintah ini pada setiap langkah pembelajaran, ubah nomor dalam perintah ke nomor yang sesuai dengan langkah pembelajaran, dan perintah akan menghapus setiap perubahan yang Anda buat di direktori kerja.
Jalankan perintah berikut:
Salinan kode adalah sebagai berikut:
skrip simpul/web-server.js
Untuk memulai server, terminal baris perintah akan meminta server http yang berjalan di http: // localhost: 8000. Tolong jangan tutup terminal. Tutup terminal akan menutup server. Masukkan http: // localhost: 8000/app/index.html ke browser Anda untuk mengakses aplikasi PhoneCat kami.
Sekarang, di browser Anda seharusnya melihat aplikasi awal kami, yang sederhana, tetapi itu berarti bahwa proyek kami siap untuk dijalankan.
"Belum ada di sini!" Ditampilkan dalam aplikasi dibangun dari kode HTML berikut, yang berisi elemen kunci AngularJS, yang persis seperti yang perlu kita pelajari.
app/index.html
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "en" ng-app>
<head>
<meta charset = "UTF-8">
<title> file html saya </iteme>
<tautan rel = "stylesheet" href = "css/app.css">
<tautan rel = "stylesheet" href = "css/bootstrap.css">
<skrip src = "lib/angular/angular.js"> </cript>
</head>
<body>
<p> Tidak ada di sini {{'yet' + '!'}} </p>
</body>
</html>
Apa kodenya lakukan?
Petunjuk NG-APP:
Salinan kode adalah sebagai berikut:
<html lang = "en" ng-app>
Petunjuk NG-APP menandai ruang lingkup skrip AngularJS. Menambahkan atribut NG-App di <Html> berarti bahwa seluruh <Html> adalah ruang lingkup skrip AngularJS. Pengembang juga dapat menggunakan arahan NG-APP secara lokal, seperti <v ng-app>, dan skrip AngularJS hanya dijalankan dalam <ver>.
Tag skrip AngularJS:
Salinan kode adalah sebagai berikut:
<skrip src = "lib/angular/angular.js"> </cript>
Baris kode ini dimuat ke dalam skrip Angular.js. Ketika browser memuat seluruh halaman HTML, skrip Angular.js akan dieksekusi. Setelah skrip Angular.js dijalankan, ia akan mencari tag HTML yang berisi arahan NG-APP. Tag ini mendefinisikan ruang lingkup aplikasi AngularJS.
Ekspresi terikat kawat gigi ganda:
Salinan kode adalah sebagai berikut:
<p> Tidak ada di sini {{'yet' + '!'}} </p>
Baris kode ini menunjukkan fungsi inti dari template AngularJS - Binding, yang terdiri dari kawat gigi ganda {{}} dan ekspresi 'namun' + '!'.
Ikatan ini memberi tahu AngularJS bahwa ia perlu menghitung ekspresi dan memasukkan hasilnya ke DOM. Pada langkah selanjutnya, kita akan melihat bahwa DOM dapat diperbarui secara real time saat hasil operasi ekspresi berubah.
Ekspresi AngularJS Ekspresi sudut adalah cuplikan seperti javascript, ekspresi AngularJS hanya berjalan dalam ruang lingkup AngularJS, bukan di seluruh DOM.
Boot aplikasi AngularJS
Secara otomatis mem -boot aplikasi AngularJS melalui arahan NGAPP adalah cara singkat yang sesuai dengan sebagian besar situasi. Dalam pengembangan lanjutan, seperti menggunakan skrip untuk memuat aplikasi, Anda juga dapat menggunakan bootstrap untuk mem -boot aplikasi AngularJS secara manual.
Ada tiga titik penting dalam proses boot aplikasi AngularJS:
1. Injektor akan digunakan untuk membuat injeksi ketergantungan untuk aplikasi ini;
2. Injektor akan membuat ruang lingkup root sebagai ruang lingkup model aplikasi kami;
3. AngularJS akan menghubungkan DOM dalam lingkup root, dimulai dengan tag HTML yang ditandai dengan NGAPP, dan secara bertahap berurusan dengan arahan dan binding di DOM.
Setelah aplikasi AngularJS di -boot, itu akan terus mendengarkan peristiwa pemicu HTML browser, seperti acara klik mouse, acara tekan kunci, respons yang masuk HTTP, dll. Yang mengubah model DOM. Setelah peristiwa tersebut terjadi, AngularJS akan secara otomatis mendeteksi perubahan dan membuat pemrosesan dan pembaruan yang sesuai.
Struktur aplikasi di atas sangat sederhana. Paket template hanya berisi satu arahan dan satu ikatan statis, dan modelnya juga kosong. Selanjutnya, mari kita coba aplikasi yang sedikit lebih kompleks!
Apa yang dilakukan file -file ini di direktori kerja saya?
Aplikasi di atas berasal dari Proyek Benih AngularJS, kami biasanya dapat menggunakan Proyek Benih AngularJS untuk membuat proyek baru. Proyek Seed mencakup basis kode AngularJS terbaru, pustaka uji, skrip, dan contoh aplikasi sederhana yang berisi konfigurasi dasar yang diperlukan untuk mengembangkan aplikasi web yang khas.
Untuk tutorial ini, kami membuat perubahan berikut pada Proyek Benih AngularJS:
1. Hapus aplikasi sampel;
2. Tambahkan gambar ponsel ke aplikasi/img/ponsel/;
3. Tambahkan File Data Ponsel (JSON) ke App/Ponsel/;
4. Tambahkan file Bootstrap Twitter ke APP/CSS/dan APP/IMG/.
praktik
Coba tambahkan ekspresi baru tentang operasi matematika ke index.html:
Salinan kode adalah sebagai berikut:
<p> 1 + 2 = {{1 + 2}} </p>
Meringkaskan
Sekarang mari kita lanjutkan ke Langkah 1 dan tambahkan beberapa konten ke aplikasi web.