Kerangka kerja AngularJS pada dasarnya digunakan dalam proyek front-end. Saya tidak tahu tentang kerangka kerja ini sebelumnya, dan itu karena saya mengambil alih baru -baru ini, jadi saya berencana untuk mempelajarinya dengan baik. Saya dulu adalah sisi PC, tetapi sekarang saya mengambil alih proyek seluler. Kerangka kerja UI seluler menggunakan ionic + vordova, tetapi tidak menggunakan bootstrap. Saya terutama menggunakan antarmuka aplikasi iOS + Android. Saya tidak tahu banyak tentang kerangka kerja ionik dan saya perlu menghabiskan waktu untuk terbiasa dengan itu. AngularJS Learning Novices dipersilakan untuk mengoreksi saya.
Apa itu AngularJS?
Sederhananya, ini adalah kerangka JavaScript yang ditambahkan ke halaman web melalui tag skrip. Yaitu, ketika kita menggunakan AngularJS, kita perlu memperkenalkan kode berikut.
<skrip src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
Biasanya disarankan untuk menempatkan skrip di bagian bawah elemen <body>, yaitu meningkatkan kecepatan pemuatan halaman web. Karena pemuatan HTML tidak tunduk pada pemuatan skrip.
Apa itu AngularJS?
AngularJS memudahkan untuk mengembangkan aplikasi halaman tunggal modern (SPAS: aplikasi satu halaman).
• AngularJS mengikat data aplikasi ke elemen HTML.
• AngularJS dapat mengkloning dan mengulangi elemen HTML.
• AngularJS dapat menyembunyikan dan menampilkan elemen HTML.
• AngularJS dapat menambahkan kode "di belakang" elemen HTML.
• AngularJS mendukung verifikasi input.
Misalnya, terminal seluler pada dasarnya menggunakan perbandingan satu halaman, yang dilakukan dengan menggunakan konversi perutean sudut. Seperti proyek kami saat ini, kami juga menggunakan satu halaman. Artinya, di halaman utama, semua halaman melompat dilakukan di halaman utama. Tangkapan layar adalah sebagai berikut:
Ekspresi AngularJS
Ekspresi AngularJS ditulis dalam kawat gigi ganda: {{ekspresi}}.
Ekspresi AngularJS mengikat data ke HTML, yang mirip dengan arahan NG-bind.
AngularJS akan "mengeluarkan" data di lokasi di mana ekspresi ditulis.
Ekspresi AngularJS sangat mirip dengan ekspresi JavaScript: mereka dapat berisi literal, operator, dan variabel.
<! Doctype html> <!-Tag angularjs untuk memproses seluruh halaman html dan boot aplikasi-> <html ng-app> <head> <meta charset = "utf-8"> <skrip src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> </head> <body> <p> Nama: {"Ting"+"Feng"}} </p> <p> Nomor: {5+5}} </p> </p> <p> Nomor: {5+5}} </p> </p> <p> ng-init = "person = {name: 'tingfeng', usia: '13 '}"> <p> name: {{person.name}} usia: {{person.age}} </p> </div> </body> </html>Aplikasi AngularJS dalam HTML
Terutama memperluas HTML melalui NG-Directive. Petunjuk AngularJS adalah atribut HTML yang diawali dengan NG, yang berisi empat fitur utama: MVC, modular, sistem instruksi (arahan), dan basis data
NG-INIT: Petunjuk ini menginisialisasi variabel aplikasi AngularJS. Misalnya, kolom berikut:
<! Doctype html> <!-Tag angularjs untuk memproses seluruh halaman html dan memandu aplikasi-> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-.0.1.min.min.min.js ng-init = "name = 'tingfeng'"> <p> Nama adalah: <span ng-bind = "name"> </span> </p> </div> </body> </html>
NG-APP: Petunjuk ini menunjukkan bahwa aplikasi AngularJS didefinisikan. Biasanya ditempatkan di belakang HTML, Anda juga dapat menggunakan NG-APP Directive secara lokal. Misalnya, <v ng-app>, skrip AngularJS hanya akan berjalan di div, yang berarti bahwa dari sini, semua konten adalah AngularJS untuk manajemen.
NG-Model: Petunjuk ini mengacu pada nilai elemen yang mengikat (seperti nilai kotak input) ke aplikasi.
NG-BIND: Petunjuk ini mengikat data aplikasi ke tampilan HTML. Gunakan instruksi yang sesuai untuk menggunakan AngularJS untuk mengoperasikan halaman HTML. Mari kita lihat kode cara menggunakannya.
Pada saat ini, gunakan NG-model untuk mengikat variabel model setName. Saat memasukkan nilai di kotak input, setName yang sesuai juga akan berubah. Anda dapat mengujinya sendiri.
Penjelasan tentang $ SCOPE
Apa itu $ scope? Apa fungsinya? Bagaimana cara menggunakannya?
Sederhananya, ruang lingkup adalah pojo (PlainoldjavascripTObject), mirip dengan objek, dengan properti dan metode, ruang lingkup adalah pojo (PlainoldjavascriptObject), mirip dengan objek, dengan properti dan metode, SCOPE menyediakan Watch (), Watch () dan Apply () Metode alat. MVC AngularJS semuanya dilakukan dengan bantuan $ SCOPE.
Fitur: 1. Ini adalah lingkungan eksekusi (atau ruang lingkup) dari ekspresi
2. Lingkup adalah struktur pohon, sejajar dengan tag DOM, berisi ruang lingkup, yang merupakan struktur pohon, sejajar dengan tag DOM, berisi rootcope di atasnya berada di tingkat atas.
3. Lingkup akan mewarisi ruang lingkup induk akan mewarisi sifat dan metode rootscope induk.
4. $ SCOPE dapat menyebarkan peristiwa, mirip dengan DOM, yang dapat merambat ke atas atau ke bawah.
5. $ SCOPE tidak hanya dasar dari MVC, tetapi juga dasar untuk mengimplementasikan pengikatan dua arah nanti.
Komponen AngularJS
Template: Artinya, file HTML dan CSS tertulis, menunjukkan tampilan aplikasi. AngularJS dapat membangun tag HTML sendiri di HTML!
Pengontrol: Tidak seperti Ajax, tidak perlu menulis pendengar atau pengontrol DOM karena sudah dibangun menjadi AngularJS. Manfaat: Mudah ditulis, menguji, memelihara, dan memahami.
Data Model: Model diperluas dari AngularJS sebagai atribut objek domain. Data model mungkin objek JS, array, atau tipe primitif, tetapi semuanya milik objek lingkup AngularJS.
Bagaimana cara memahami ruang lingkup di AngularJS?
Artinya, ruang lingkup dapat dianggap sebagai templat, ikatan yang bekerja bersama dengan model dan pengontrol. AngularJS menggunakan ruang lingkup, dan ada juga informasi, model data dan pengontrol dalam templat. Ini dapat membantu memisahkan model dan tampilan, tetapi keduanya disinkronkan! Setiap perubahan pada model akan segera tercermin pada tampilan, dan setiap perubahan pada tampilan akan tercermin dalam model segera.
Lihat: Di AngularJS, sebuah tampilan adalah pemetaan setelah model diterjemahkan melalui template HTML. Artinya, tidak peduli kapan model berubah, AngularJS akan memperbarui titik persimpangan secara real time dan memperbarui tampilan.
Lebih intuitif untuk memposting kode!
<! Doctype html> <html ng-app = "helloangular"> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular 1.0.1.min.js"> </script> <cript>//Modular; －Control Template HelloangularMyModule.Controller ("Helloangular", ['$ scope', function helloangular ($ scope) {$ scope.value = {name: 'jiangting'};}]); </script> </head> <body> <!-mvc-view angular-> <div ng-controller = "helloangular"> － Controller adalah helloangular <p> {{value.name}}, halo! </p> </v> <!-Modular Angular-</body> </htm> </div> <!Mari kita lihat aplikasi pengontrol, yaitu, pengontrol, yaitu pengontrol mengoperasikan data, mengikatnya dan menampilkannya di halaman HTML.
Modul AngularJS (Modul) mendefinisikan aplikasi AngularJS.
Pengontrol AngularJS (pengontrol) digunakan untuk mengontrol aplikasi AngularJS.
Petunjuk NG-APP mendefinisikan aplikasi, dan NG-controller mendefinisikan pengontrol. Mari kita gunakan kolom di atas untuk dilihat:
Modul AngularJS mendefinisikan aplikasi:
var mymodule = angular.module ("helloangular", []); －Control Template HelloangularAplikasi Kontrol Pengontrol AngularJS:
mymodule.controller ("helloangular", ['$ scope', function helloangular ($ scope) {$ scope.value = {name: 'jiangting'};}]);Memahami MVC front-end
Tentang fitur pengontrol:
1. Jangan mencoba mengambil pengontrol, pengontrol biasanya hanya bertanggung jawab atas pandangan kecil.
2. Jangan mengoperasikan DOM secara langsung di pengontrol, itu bukan tanggung jawabnya
3. Jangan lakukan operasi pemfilteran data di pengontrol, ada layanan filter
4. Jangan memformat data di pengontrol, NG memiliki kontrol formulir yang sangat berguna
5. Pengontrol tidak akan saling memanggil. Interaksi antara pengontrol akan dilakukan melalui acara. Ini akan melalui layanan filter. 4. Jangan memformat data dalam pengontrol. Ada kontrol bentuk yang sangat berguna. 5. Pengontrol tidak akan saling memanggil. Interaksi antara pengontrol akan dilakukan melalui acara. Itu akan dilakukan melalui ruang lingkup.
Mari kita lihat cara menyesuaikan sistem perintah, kode adalah sebagai berikut:
<!doctype html><html ng-app><head><meta charset="utf-8"><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script><script>//Instruction system var myModule = angular.module("MyModule", []); myModule.directive ("hello", function () {return {batasi: 'e', template: '<verv> hai semuanya! </div>', --se kami memasukkan tag html ganti: true}}); <script> </head> <hody> <wello> </hello> </body> </htmDalam Petunjuk, ada tiga parameter yang dikembalikan setelahnya, di mana Template Middle mengacu pada tag HTML yang dimasukkan. Sekarang saya akan menulis sepotong kode HTML sendiri dan melihat bagaimana menulisnya ke AngularJS.
Kode HTML statis asli adalah sebagai berikut:
<ul> <li> <span> new1 </span> <p> Hanya tes page1 </p> </li> <li> <span> new2 </span> <p> Hanya tes page2 </p> </li> </ul>
Cara memodifikasinya menjadi AngularJS adalah sebagai berikut:
<! Doctype html> <html ng-app> <head> <meta charset = "utf-8"> <skrip src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> <script> // $ scope adalah scope dari controller. // Lingkup AngularJS: Ini dapat dianggap sebagai templat. Setelah aplikasi dimulai, ruang lingkup root akan dibuat, dan ruang lingkup pengontrol adalah penerus khas ruang lingkup root. Fungsi newsctrl ($ scope) {$ scope.news = [{"content": "new1", "perkenalan": "Hanya uji page1"}, {"content": "new2", "memperkenalkan": "hanya tes page2"}]; $ scope.phones = {length: "4" // a atribute page2 "}]; $ scope.phones = {length:" 4 "// a atribute by page2"}]; $ scope.phones = {length: "4" / / a atribute dengan satu atribute dengan satu atribute dengan satu atribute dengan satu atribute dengan satu atribute. commas};} </script> </head> <body ng-controller = "newsctrl"> <ul> <li ng-repeat = "new in news"> {{new.content}} <p> {{new.introduce}} </p> </li> </ul> </body> </ht> </p> </li> </ul> </body> </ht> </p> </li> </ul> </body> </ht>Di atas adalah analisis fitur dasar AngularJS yang diperkenalkan kepada Anda oleh editor (i). Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!