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

Tutorial Bermula AngularJS (Sifar): Bootstrap_AngularJS

May 16, 2016 pm 04:28 PM
angularjs Tutorial Bermula Pemuat but

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 Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Rangka kerja pelaksanaan PHP: Tutorial pengenalan CakePHP Rangka kerja pelaksanaan PHP: Tutorial pengenalan CakePHP Jun 18, 2023 am 09:04 AM

Dengan pembangunan berterusan teknologi Internet, teknologi pembangunan Web juga sentiasa dikemas kini dan diulang. Sebagai bahasa pengaturcaraan sumber terbuka, PHP digunakan secara meluas dalam pembangunan web. Sebagai salah satu alat yang biasa digunakan dalam pembangunan PHP, rangka kerja PHP boleh meningkatkan kecekapan pembangunan dan kualiti kod. Artikel ini akan memperkenalkan anda kepada rangka kerja PHP - CakePHP, dan menyediakan beberapa tutorial mudah untuk bermula. 1. Apakah itu CakePHP? CakePHP ialah model berdasarkan MVC (Model-View-Control

Begini caranya untuk dwi-but Windows 11 pada Microsoft Surface Duo Begini caranya untuk dwi-but Windows 11 pada Microsoft Surface Duo Apr 29, 2023 pm 09:37 PM

Pasang Windows 11 pada Microsoft Surface Duo Ingat, langkah yang diterangkan di bawah digunakan untuk model Surface Duo yang tidak berkunci dan AT&T. Surface Duo2 yang dikuasakan oleh pemproses Qualcomm Snapdragon 888 tidak serasi sepenuhnya dengan modul ini. Amaran: Sebelum kita mempelajari cara membuat dwi-but Windows 11 pada Microsoft Surface Duo, ingat untuk mengambil sandaran luar peranti. Ini kerana proses itu memerlukan pemadaman semua data pada telefon, termasuk fail dalam storan dalaman. Anda mungkin merosakkan peranti anda secara kekal, jadi cuba ini hanya jika anda tahu perkara yang anda lakukan

Cara memasang macOS pada SSD baharu Cara memasang macOS pada SSD baharu Apr 13, 2023 pm 04:01 PM

Cara Menggunakan Pemulihan macOS untuk Memasang macOS pada SSD Baharu Pada mana-mana Mac yang dibina selepas 2009, terdapat sistem pemulihan terbina dalam. Ini membolehkan anda but Mac anda ke dalam mod pemulihan. Dalam mod ini, anda boleh membaiki cakera dalaman, memulihkan fail daripada sandaran Mesin Masa, mendapatkan bantuan dalam talian atau memasang semula macOS. Anda mesti mempunyai sambungan Internet untuk menggunakan alat ini. Anda boleh menggunakan alat pemasangan macOS untuk memasang macOS pada SSD baharu yang dipasang pada komputer anda. Untuk menggunakan Pemulihan Internet untuk memasang macOS pada SSD: Ikut arahan pengilang

Panduan Pemula: Mulakan dari awal dan pelajari MyBatis langkah demi langkah Panduan Pemula: Mulakan dari awal dan pelajari MyBatis langkah demi langkah Feb 19, 2024 am 11:05 AM

Tutorial pengenalan MyBatis yang ringkas dan mudah difahami: tulis program pertama anda langkah demi langkah MyBatis ialah rangka kerja lapisan ketekunan Java yang popular yang memudahkan proses berinteraksi dengan pangkalan data. Tutorial ini akan menunjukkan kepada anda cara menggunakan MyBatis untuk mencipta dan melaksanakan operasi pangkalan data yang mudah. Langkah 1: Persediaan persekitaran Mula-mula, pastikan persekitaran pembangunan Java anda telah dipasang. Kemudian, muat turun versi terkini MyBatis dan tambahkannya pada projek Java anda. Anda boleh memuat turunnya dari laman web rasmi MyBatis

Rangka kerja pelaksanaan PHP: Tutorial pengenalan rangka kerja Lumen Rangka kerja pelaksanaan PHP: Tutorial pengenalan rangka kerja Lumen Jun 18, 2023 am 08:39 AM

Lumen ialah rangka kerja mikro berasaskan PHP yang dibangunkan oleh pembangun rangka kerja Laravel. Ia pada asalnya direka untuk membina aplikasi API kecil dan perkhidmatan mikro, sambil mengekalkan beberapa komponen dan ciri rangka kerja Laravel. Rangka kerja Lumen adalah ringan, pantas dan mudah digunakan, jadi ia telah mendapat perhatian dan penggunaan yang meluas. Dalam artikel ini, kami akan segera memulakan rangka kerja Lumen dan mempelajari cara menggunakan rangka kerja Lumen untuk membina aplikasi API mudah. Penyediaan rangka kerja Sebelum mempelajari rangka kerja Lumen, kita perlu

2022年最新5款的angularjs教程从入门到精通 2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi Jun 27, 2023 pm 07:37 PM

Dalam era maklumat hari ini, laman web telah menjadi alat penting untuk orang ramai mendapatkan maklumat dan berkomunikasi. Tapak web responsif boleh menyesuaikan diri dengan pelbagai peranti dan memberikan pengguna pengalaman berkualiti tinggi, yang telah menjadi tumpuan dalam pembangunan tapak web moden. Artikel ini akan memperkenalkan cara menggunakan PHP dan AngularJS untuk membina tapak web responsif untuk memberikan pengalaman pengguna yang berkualiti tinggi. Pengenalan kepada PHP PHP ialah bahasa pengaturcaraan sisi pelayan sumber terbuka yang sesuai untuk pembangunan web. PHP mempunyai banyak kelebihan, seperti mudah dipelajari, merentas platform, perpustakaan alat yang kaya, kecekapan pembangunan

Bina aplikasi web menggunakan PHP dan AngularJS Bina aplikasi web menggunakan PHP dan AngularJS May 27, 2023 pm 08:10 PM

Dengan pembangunan berterusan Internet, aplikasi Web telah menjadi bahagian penting dalam pembinaan maklumat perusahaan dan cara kerja pemodenan yang diperlukan. Untuk menjadikan aplikasi web mudah dibangunkan, diselenggara dan dikembangkan, pembangun perlu memilih rangka kerja teknikal dan bahasa pengaturcaraan yang sesuai dengan keperluan pembangunan mereka. PHP dan AngularJS ialah dua teknologi pembangunan web yang sangat popular. Kedua-duanya adalah penyelesaian bahagian pelayan dan bahagian pelanggan. Penggunaan gabungan mereka boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna aplikasi web. Kelebihan PHPPHP

See all articles