Kami akan menggunakan AngularJS dan Bootstrap untuk mengembangkan contoh aplikasi front-end. Melalui praktik proyek sederhana ini, kami akan membawa semua orang ke Istana Pengembangan Front-End AngularJS, dan memperkenalkan beberapa poin pengetahuan kepada Anda:
1. Dasar -dasar MVC, melalui contoh proyek, biarkan setiap orang memiliki pemahaman awal tentang penerapan model desain MVC.
2. Bangun aplikasi AngularJS pertama kami. Melalui pengembangan kasus penggunaan praktis, setiap orang dapat memperoleh pemahaman persepsi tertentu tentang pengembangan front-end.
3. Pemahaman awal tentang tiga komponen paling penting dari AngularJS, yaitu model, tampilan, dan pengontrol.
4. Pemahaman awal tentang penggunaan objek lingkup AngularJS.
Pengantar Dasar untuk Mode MVC:
MVC adalah model arsitektur UI. Tujuannya adalah untuk menguraikan fungsi aplikasi menjadi modul khusus, mewujudkan penggunaan kembali modul, mengurangi kopling antar modul, dan meningkatkan ketahanan sistem. Mode MVC terutama dibagi menjadi tiga bagian:
Model: Digunakan untuk menyimpan data sistem
View: Digunakan untuk mengimplementasikan antarmuka UI sistem
Pengontrol: Digunakan untuk menghubungkan model dan tampilan.
Menurut pendapat saya, cara terbaik untuk belajar adalah berlatih. Kami akan mengembangkan contoh aplikasi front-end. Melalui contoh ini, di satu sisi, kita dapat memperdalam pemahaman kita tentang kerangka kerja AngularJS, dan pada saat yang sama, kita juga dapat merasakan bagaimana model MVC tertanam dalam proses pengembangan.
PENDAHULUAN APLIKASI (Jalur Kode: http://xiazai.vevb.com/201608/yuanma/bootstrap-mooc(vevb.com).rar)
Kami akan membuat aplikasi web yang menebak angka, dengan antarmuka sebagai berikut:
Latar belakang aplikasi akan secara acak menghasilkan nomor acak dengan kisaran 1 hingga 1000. Pengguna memasukkan nomor yang ditebak di kotak teks. Jika inputnya benar, aplikasi akan memunculkan prompt hijau di bawah ini. Jika salah, misalnya, nomor input lebih besar atau lebih kecil dari angka yang dihasilkan oleh latar belakang, aplikasi akan memunculkan prompt yang sesuai, misalnya:
Angka -angka yang ditunjukkan di bagian bawah menunjukkan berapa kali kami menebak.
Struktur direktori kode seluruh aplikasi adalah sebagai berikut:
Karena kami sedang mengerjakan contoh aplikasi sederhana, kami mengumpulkan kode dari setiap modul bersama -sama. Di masa depan, ketika kami membangun aplikasi front-end skala besar, kami akan sangat berhati-hati untuk mengatur struktur direktori kode seluruh proyek.
Dalam komposisi file yang ditunjukkan pada gambar di atas, Angular.js adalah file kerangka kerja yang kami andalkan untuk mengembangkan aplikasi, bootstrap.min.css adalah file pustaka antarmuka yang digunakan untuk merancang antarmuka UI, dan numberguessing.html akan menjadi file aplikasi utama yang ingin kami kembangkan. Selanjutnya, kami akan menambahkan kode ke numberguessing.html langkah demi langkah dan secara bertahap meningkatkan fungsi aplikasi.
Pertama -tama, yang perlu kita lakukan adalah membangun template HTML sederhana. Pada template ini, kita secara perlahan dapat menambahkan fungsi. Kode template adalah sebagai berikut:
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Guess The Number !</title> <link href="bootstrap.min.css" rel="stylesheet"></head><body > <script src = "angular.js"> </script> </body> </html>
Dalam kode template di atas, perhatikan bahwa ada baris "meta ... charset =" utf = 8 "
Tujuan dari baris ini adalah untuk memungkinkan browser untuk menampilkan Cina dengan benar. Jika baris ini tidak tersedia, browser akan menampilkan Cina. Dalam templat, pertama -tama kami memperkenalkan kode kerangka kerja dan kode pustaka antarmuka UI yang akan digunakan nanti. Setelah selesai, kami memuatnya ke browser untuk melihat apakah ada kesalahan. Jika itu benar, apa yang saat ini kita lihat adalah kosong:
Selanjutnya, kami akan mengembangkan kode logika latar belakang aplikasi, dan pertama -tama kami akan menentukan beberapa variabel untuk digunakan:
OriginalVal, digunakan untuk menyimpan nomor acak yang dihasilkan
Userguess, simpan nomor yang ditebak yang saat ini dimasukkan oleh pengguna
numoftries, rekam berapa kali pengguna telah mencoba
Deviasi: Catat perbedaan antara angka yang dimasukkan oleh pengguna dan nomor acak latar belakang. Jika nomor yang dimasukkan oleh pengguna besar, maka definisi> 0; Inputnya kecil, definisi <0; Jika inputnya benar, maka definisi == 0
Implementasi Modul Pengontrol
Controller digunakan untuk menghubungkan dua modul model dan tampilan, dan logika bisnis sistem juga diimplementasikan dalam pengontrol. Ketika pengguna melakukan beberapa operasi pada antarmuka, seperti mengklik tombol dan memasukkan konten, pengontrol menerima informasi yang sesuai dari sisi tampilan, dan kemudian pengontrol memicu logika pemrosesan acara yang sesuai. Misalnya, setelah pengguna memasukkan angka di antarmuka, klik tombol OK, pengontrol mendapatkan nilai input dari tampilan, dan kemudian mengeluarkan nomor acak yang dihasilkan oleh aplikasi dari model, membandingkannya dengan dua hatchback, dan mengembalikan hasil perbandingan ke tampilan. Tampilan menampilkan perubahan antarmuka yang sesuai berdasarkan nilai penyimpangan yang dikembalikan. Mari kita lihat bagaimana badan logis pengontrol diimplementasikan:
function guesthenumberController ($ scope) {$ scope.verifyguess = function () {$ scope.deviation = $ scope.originalval - $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializeGame = function () {$ scope.numoftries = 0; $ scope.originalval = math.floor ((math.random () * 1000) + 1); $ scope.userguess = null; $ scope.deviation = null; } $ scope.initializeGame (); }Fungsi GuessThenumberController mengatur sifat numerik dari objek model. Arti dari nilai -nilai ini telah disebutkan sebelumnya. Pada saat yang sama, fungsi pengontrol ini juga memperoleh dua panggilan antarmuka, satu diverifikasi. Ketika tombol konfirmasi pada antarmuka diklik, modul tampilan akan memanggil antarmuka untuk menentukan apakah data yang dimasukkan oleh pengguna benar. Pada saat yang sama, panggilan akan memperbarui nilai -nilai dari dua atribut, penyimpangan dan numoftries.
Initializegame digunakan untuk menginisialisasi seluruh aplikasi sistem, pertama menghasilkan angka acak, dan kemudian menginisialisasi beberapa variabel untuk mengosongkan.
Dalam fungsi bodi pengontrol kami, parameter $ lingkup dilewatkan. Parameter ini diteruskan kepada kami oleh AngularJS. Ini pada dasarnya setara dengan M dalam mode MVC, yang merupakan model. Ini mirip dengan database, secara khusus digunakan untuk menyimpan data aplikasi dan kode logis. Seperti yang Anda lihat, dalam panggilan initializeGame, pengontrol menempatkan numoftries, originalval dan data lainnya ke dalam objek $ scope. Dalam panggilan VerifyGuess, ia mendapatkan data ini dari $ ruang lingkup untuk perhitungan dan modifikasi.
Setelah kode pengontrol di atas ditambahkan ke file template kami numberguessing.html, hasilnya adalah sebagai berikut:
<! Doctype html> <html> <head> <meta http-equiv = "tipe konten" content = "text/html; charset = utf-8"> <itement> Tebak nomornya! </Title> <link href = "bootstrap.min.css" rel = "styleSheet"> </head> </scripy> <min.css "rel =" styleSheet "> </head> </scriple <min. <script type = "text/javascript"> function guesthenumberController ($ scope) {$ scope.verifyguess = function () {$ scope.deviation = $ scope.originalval - $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializeGame = function () {$ scope.numoftries = 0; $ scope.originalval = math.floor ((math.random () * 1000) + 1); $ scope.userguess = null; $ scope.deviation = null; } $ scope.initializeGame (); } </script> </body> </html>Desain Antarmuka Aplikasi Lihat Aplikasi
Lihat, yaitu, tampilan dalam MVC, sebenarnya untuk menampilkan data dalam model melalui antarmuka grafis. Aplikasi kami saat ini sederhana dan berdasarkan prinsip kesederhanaan, pengalaman pengguna desain antarmuka mungkin tidak terlalu baik, tetapi cukup untuk memahami cara menggunakan angularjs dan bootstrap dengan cepat untuk dengan cepat membangun antarmuka front-end untuk suatu program.
Mari kita lihat konstruksi antarmuka dan mengintegrasikan pengontrol dan logika antarmuka:
<body ng-app = "app"> <div ng-controller = "guessthenumbercontroller"> <h2> tebak angka! </h2> <p> Harap tebak nomor acak yang dihasilkan oleh komputer, yang berkisar dari 1 hingga 1000. </p> <label> ambil tindakan: </label <label <input type = "number" nggan "nggeel =" Number = "Number" number "number" number "number" number " ng-click = "verifyguess ()"> konfirmasi </button> <tombol ng-click = "initializeGame ()"> return </button> <p> <p ng-show = "deviation <0"> mr., Anda menawar terlalu tinggi! </p> <p ng-show = "deviation> 0"> pria saya, jika Anda memiliki lebih sedikit, tambahkan lebih banyak poin, tambahkan lebih banyak poin. </p> <p ng-show = "deviation === 0"> saya benar-benar membuat Anda mengatakannya dengan benar!
C dalam MVC, yaitu pengontrol, adalah jembatan antara antarmuka (tampilan) dan data (model). Untuk mengaitkan ketiganya, kita perlu menanamkan ketiganya ke dalam kerangka AngularJS, dan kemudian mengandalkan mekanisme kerangka kerja AngularJS untuk mencapai interkoneksi antara ketiganya.
Untuk menanamkan tampilan ke AngularJS, pernyataan kode di atas:
<body ng-app = "app">
NG-APP Properti ini memberi tahu Angular bahwa kode HTML dalam tag tubuh akan tertanam sebagai bagian tampilan ke dalam kerangka kerja AnguljS, dan "aplikasi" digunakan sebagai nilai properti NG-App untuk menginformasikan kerangka kerja AngularJS untuk memuat modul bernama "APP". Modul ini setara dengan gudang penyimpanan. Kami memecah berbagai fungsi aplikasi front-end menjadi berbagai unit. Unit -unit ini disimpan dalam modul yang disebut aplikasi. Pengontrol dan model juga merupakan unit fungsional. Nanti kita akan melihat bahwa mereka akan ditambahkan ke modul yang disebut aplikasi. Kerangka kerja AngularJS akan mengeluarkan dua unit controllerre dan model dari modul ini untuk digunakan.
Selanjutnya, pertama -tama kita memasukkan modul ini yang disebut aplikasi ke dalam kerangka kerja AngularJS, kodenya adalah sebagai berikut:
<script type = "text/javascript"> angular.module ('app', []) function guessthenumberController ($ scope) {....} <script>Dengan cara ini, kami memiliki modul yang disebut aplikasi dalam kerangka AngularJS, dan kami mengaitkan modul dengan antarmuka melalui NG-App = "App". Selanjutnya, kita perlu memasukkan unit pengontrol ke dalam modul aplikasi, kode ini adalah sebagai berikut:
<script type = "text/javascript"> angular.module ('app', []) .controller ('guesthenumberController', guessthenumberController); function guesthenumberController ($ scope) {....} </ptript>Fungsi Angular.module menghasilkan dan mengembalikan objek modul. Objek ini berisi antarmuka yang disebut pengontrol. Melalui antarmuka ini, unit fungsional pengontrol yang kami kembangkan dapat ditempatkan ke dalam modul. Dari kode di atas, kita dapat melihat bahwa kita menempatkan unit pengontrol di modul. Nama unit ini adalah GuessThenumberController, yang merupakan parameter input pertama dari fungsi pengontrol. Parameter input kedua adalah badan logika fungsional dari unit pengontrol, yang merupakan fungsi GuessThenumberController yang kami kembangkan sebelumnya.
Setelah menyelesaikan langkah -langkah di atas, aplikasi kami dikembangkan. Pada saat ini, HTML kami dapat dimuat dari browser, sehingga Anda dapat melihat efek spesifiknya.
Sebelum akhir, mari kita masuk ke dalam kode untuk melihat bagaimana AngularJS mengintegrasikan berbagai modul untuk membentuk aplikasi front-end lengkap. Dalam kode, ada beberapa simbol dan atribut khusus, simbol khusus, seperti: {{}}, dan atribut khusus seperti: ng-app, ng-controller, dll. Dalam konteks sudut, {{dan}} digabungkan bersama-sama disebut simbol interpolasi, dan properti dalam bentuk NG-* yang disebut Angular. Angular mengonversi variabel yang diapit dalam {{dan}} menjadi nilai yang sesuai dengan variabel, seperti cuplikan kode berikut:
<p> Berapa kali Anda menebak adalah: <span> {{numoftries}} </span> <p>
Numoftries berarti berapa kali pengguna mencoba menebak. Jika nilai numoftries adalah 0, AngularJs akan lepas dari kode di atas sebagai:
<p> berapa kali Anda menebak adalah: <span> 0 </span> <p>
Browser akan membuat antarmuka ke situasi berikut:
Arahan AngularJS adalah titik pengetahuan teknis yang kompleks. Dalam diskusi selanjutnya, kami akan membahasnya secara rinci. Di sini kami secara singkat memperkenalkan peran Arahan AngularJS, yang terutama memperluas fungsi sintaks HTML. Arahan adalah bagian paling kuat dalam kerangka kerja AngularJS. Mari kita perkenalkan secara singkat arahan AngularJS yang digunakan dalam kode.
NG-Controller: Petunjuk ini menghubungkan pengontrol dan tampilan yang diwakili oleh HTML. Hanya dengan arahan ini dapat mengakses variabel dan antarmuka yang ditetapkan oleh pengontrol. Anda dapat mencoba memasukkannya ke dalam kode.
ng-model = ng-controller = "guesthenumbercontroller"
Hapus kalimat ini dan lihat apa hasilnya.
NG-MODEL: BIDIRECTION mengikat variabel dalam model dengan kontrol dalam tampilan, misalnya:
<input type = "number" ng-model = "userguess"/>
Pernyataan ini mengikat variabel Userguess dalam model ke kotak teks input pada antarmuka. Ketika nilai dalam kotak teks berubah, nilai yang sesuai dari Userguess juga berubah. Sebaliknya, jika nilai tebakan berubah di latar belakang, konten di kotak teks juga berubah.
NG-Klik: Hubungkan peristiwa klik yang dihasilkan oleh antarmuka dengan logika pemrosesan pengontrol, misalnya:
<tombol ng-click = "verifyguess ()"> konfirmasi </button>
Kode di atas menghubungkan acara klik tombol "OK" dengan fungsi verifikasi controller (). Setelah tombol diklik, fungsi akan dieksekusi.
NG-Show: Digunakan untuk mengontrol apakah kontrol yang digunakan untuk mengontrol tampilan yang akan ditampilkan. Jika nilai ekspresi NG-show yang sesuai adalah benar, kontrol akan ditampilkan. Jika salah, kontrol tidak akan ditampilkan. Misalnya:
<p ng-show = "Deviation <0"> Mr., Tawaran Anda terlalu tinggi! </p>
Fungsi kode di atas adalah bahwa ketika nilai definisi variabel kurang dari 0, konten elemen paragraf p akan ditampilkan pada antarmuka.
AngularJS adalah kerangka pengembangan front-end yang kuat tetapi relatif kompleks. Peran contoh kami adalah hanya untuk membantu semua orang memahami fungsi-fungsi kuat AngularJS dan pertama-tama mendapatkan pemahaman persepsi tertentu, sehingga dapat meletakkan dasar yang kuat bagi kami untuk menganalisis dan menguasai seluruh teknologi pengembangan front-end AngularJS di masa depan.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.