1. Awal
Angular JS adalah seperangkat kerangka kerja, templat, pengikatan data dan komponen UI kaya yang digunakan untuk mengembangkan halaman web. Ini menyediakan arsitektur aplikasi web tanpa operasi DOM manual. AngularJS sangat kecil, hanya 60k, kompatibel dengan browser arus utama, dan bekerja dengan baik dengan jQuery.
2. Memahami Prinsip Dasar
① Beberapa perkenalan untuk bersudut
1. Pengetahuan Dasar
1. Pengganti IE8
2. Empat titik inti adalah MVC, modularitas, sistem instruksi, dan pengikatan data dua arah
2. Beberapa prinsip
1. Jangan menggunakan kembali pengontrol. Pengontrol umumnya hanya bertanggung jawab atas pemandangan kecil.
2. Jangan mengoperasikan DOM di pengontrol.
3. Jangan memformat data di Controllerller, NG memiliki kontrol bentuk yang baik.
4. Jangan lakukan operasi pemfilteran data di pengontrol, ada layanan $ filter.
5. Secara umum, pengontrol tidak akan saling memanggil, dan interaksi antara pengontrol akan dilakukan melalui peristiwa.
6. Perang menggunakan instruksi untuk menggunakan kembali tampilan.
7. $ SCOPE adalah struktur pohon yang sejajar dengan tag DOM.
8. Objek $ scope Child akan mewarisi properti dan metode pada SCOPE $ Parent.
9. Setiap aplikasi sudut hanya memiliki satu objek $ rootscope. (Umumnya terletak di NG-App).
10. Anda dapat menggunakan Angular.element ($ 0) .scope () untuk men -debug.
11. Gunakan Ngroute untuk perutean di antara tampilan.
3. Instruksi bawaan sudut yang paling umum digunakan dan praktis untuk halaman HTML
①.ng-Class (Cocok untuk situasi di mana gaya tertentu seperti suka dan perhatian akan berubah karena operasi tertentu)
Arahan NG-Class digunakan untuk mengikat satu atau lebih kelas CSS secara dinamis ke elemen HTML. Nilai Petunjuk NG-Class dapat berupa string, objek, atau array.
Jika itu adalah string, beberapa nama kelas dipisahkan oleh spasi.
Jika itu adalah objek, Anda perlu menggunakan pasangan nilai kunci, yang merupakan nilai boolean, dan nilainya adalah nama kelas yang ingin Anda tambahkan. Kelas hanya akan ditambahkan jika kunci itu benar.
Jika merupakan array, itu dapat terdiri dari string atau kombinasi objek, dan elemen array dapat berupa string atau objek.
Dua cara yang disarankan untuk digunakan:
1. Dalam bentuk string, kode adalah sebagai berikut:
<i ng-class = "{true: 'ion-ios-heart', false: 'ion-ios-heart-outline'} [accountInfo.isfocus]" ng-click = 'wetherfocus ()'> </i>Ini berarti bahwa tag I memiliki ikon kelas dasar, NG-Class, yang mengikat kelas dinamis. Nilai kelas ini ditentukan oleh apakah AccountInfo.isfocus benar atau salah. Jika nilainya benar, tag i akan menambahkan kelas ion-ios-heart. Jika nilainya salah, tag i akan menambahkan ion-ios-heart-outline. Jika nilainya salah, tag i akan menambahkan ion-ios-heart-outline.
Kategori ini. Tag I juga mengikat acara klik ng. Selain menangani logika yang sesuai, nilai AccountInfo.isfocus juga ditentukan. Dengan cara ini, ketika operasi klik terjadi, kelas tag I yang sesuai secara alami akan diubah, dan kemudian gaya yang berbeda akan ditampilkan.
2. Gaya nilai kunci, kodenya adalah sebagai berikut:
<i ng-class = "{'ion-ios-heart': iSios, 'ion-android-heart': isAndroid}"> </i>Jelas, dari kode, kita dapat melihat bahwa makna ini adalah bahwa ketika ISIOS benar, kelas ion-IOS-Heart akan diambil, dan ketika nilai isandroid benar, kelas ion-android-heart akan diambil.
②.ng-show dan NG-hide (cocok untuk saat menampilkan dua konten berbeda untuk situasi yang berbeda)
Arahan NG-Show menampilkan elemen HTML yang ditentukan ketika ekspresi benar, jika tidak menyembunyikan elemen HTML yang ditentukan.
Arahan NG-Hide menyembunyikan elemen HTML yang ditentukan ketika ekspresi benar, jika tidak elemen HTML yang ditentukan ditampilkan.
Haha, sepertinya saudara yang tidak sesuai dengan air dan api. . . .
Contohnya adalah sebagai berikut:
<div> <span ng-click = "togglemenu ()"> </span> </div> <viv> <ul ng-show = "menustate"> ... </ul> <div ng-hide = "menustate"> ... </div>
Tetapkan variabel boolean menustate (dalam pengembangan aktual, Anda dapat menggunakan ekspresi, persamaan trilogi, dll.). Ketika itu benar, konten NG-Show akan ditampilkan, dan konten NG-hide akan disembunyikan. Kalau tidak, yang sebaliknya adalah benar. . .
③.ng-switch (cocok untuk menampilkan konten yang berbeda dalam beberapa situasi)
Arahan NG-SWITCH menampilkan atau menyembunyikan bagian yang sesuai sesuai dengan ekspresi.
Elemen anak yang sesuai menggunakan arahan NG-SWITCH-When. Jika kecocokan dipilih, pilih tampilan, dan yang lainnya dihapus.
Dengan mengatur opsi default menggunakan arahan NG-SWITCH-DEFAULT, opsi default akan ditampilkan jika tidak ada yang cocok.
contoh:
<Div ng-switch = "essayType"> <div ng-switch-when = "4"> ..... </div> <div ng-switch-when = "3"> ... </div> <v-ng-switch-when = "1"> </Div> <Div ng-switch-when = "2"> </Div> </Div> <Div Ng-SWITCH-WHEN = "2"> </Div>
④.ng-model (saya terutama akan berbicara tentang lubang kecil magis NG-model)
Arahan Model NG mengikat elemen bentuk HTML ke dalam variabel lingkup.
Jika tidak ada variabel dalam ruang lingkup, itu akan dibuat. Model NG umumnya digunakan dalam <sput>, <filih>, <TextArea> dan elemen lainnya.
Kode berikut:
<div> <textAreA name = "my-massage-detail" ng-model = "content" placeholder = "Silakan masukkan pesan"> </textarea> <ang-klick = "submitmes ()"> kirim </a> <br> </div>
Menurut definisi, secara teoritis, ketika kami mengirimkan, tidak apa-apa untuk secara langsung mendapatkan nilai model NG yang ditentukan pada halaman di pengontrol. Namun pada kenyataannya, ini tidak layak. Tes pribadi menemukan bahwa output yang tidak terdefinisi adalah output, dan jika nilai awal NG-model didefinisikan dalam pengontrol, nilai awal diperoleh alih-alih nilai terbaru setelah berubah.
Saya mencari beberapa informasi, yang secara kasar berarti. Angular membatasi beberapa definisi kami. Kami hanya dapat menggunakan objek non-primitif untuk melewati parameter.
Apa artinya? Sedikit perubahan pada contoh di atas, sebagai berikut:
Kode HTML:
<div> <TextArea name = "my-massage-detail" ng-model = "model.content" placeholder = "Silakan masukkan pesan"> </textarea> <ang-klick = "submitmes ()"> kirim </a> </div>
Kode Pengontrol:
$ scope.model = {}; $ scope.model.content = ''; $ scope.submitmes = function () {console.log ($ scope.model.content);}Artinya, kami mendefinisikan suatu objek dan kemudian mendefinisikan model NG sebagai properti di objek ini untuk menanganinya. Dengan cara ini, kami mendapatkan nilai terbaru dari NG-model.
Cara sederhana lainnya adalah dengan hanya meneruskan model NG sebagai parameter di dalamnya.
Contohnya adalah sebagai berikut:
// kode html <input type = "text" ng-model = "code"> <tombol ng-click = "setCode (kode)"> login </button> <br> // kode pengontrol $ scope.setCode = fungsi (kode) {waspada (kode);}4. Keterampilan Praktis untuk Interaksi Data
① menggunakan janji
ES6 mendefinisikan objek janji. Objek ini sangat berguna, terutama saat berinteraksi dengan latar belakang. Ini tidak hanya mencegah panggilan balik menjadi terlalu dalam, tetapi juga dapat ditangani secara seragam untuk beberapa situasi, dan juga meningkatkan keterbacaan kode. Layanan semacam itu juga dienkapsulasi dalam AngularJS, yaitu $ q.
$ Q ada sebagai layanan AngularJS, dan hanyalah implementasi yang disederhanakan dari mode pemrograman janji asinkron. Objek Defer (objek tunda) dapat diperoleh melalui $ q.defer (). Ada tiga metode untuk objek ini:
Resolve (Nilai): Kirim pesan ke badan eksekusi asinkron dari objek Promise dan katakan kepadanya bahwa saya telah berhasil menyelesaikan tugas, dan nilainya adalah pesan yang dikirim.
Tolak (nilai): Kirim pesan ke badan eksekusi asinkron dari objek janji dan katakan kepadanya bahwa tidak mungkin bagi saya untuk menyelesaikan tugas ini. Nilainya adalah pesan yang dikirim.
Beri tahu (nilai): Kirim pesan ke badan eksekusi asinkron dari objek janji untuk memberitahunya penyelesaian tugas saat ini. Nilainya adalah pesan yang dikirim.
Setelah mengirim pesan -pesan ini, fungsi panggilan balik yang ada akan dipanggil.
Janji adalah objek janji dengan objek penundaan ini. Objek janji dapat diperoleh melalui penundaan. Promise, beberapa metode objek janji:
Kemudian (SuccessCallback, ErrorCallback, NotifyCallback): Parameter adalah fungsi panggilan balik yang berbeda di bawah pesan yang berbeda. DISHER mengirim pesan yang berbeda untuk menjalankan fungsi panggilan balik yang berbeda. Pesan disahkan sebagai parameter fungsi panggilan balik ini. Nilai pengembalian kembali ke objek janji yang ada dalam mendukung panggilan rantai. Ketika objek Defer pertama mengirim pesan, objek penundaan yang sesuai dari janji berikutnya juga akan mengirim pesan, tetapi pesan yang dikirim berbeda. Tidak peduli apakah objek penundaan pertama mengirimkan penolakan atau tekad, yang kedua dan yang kemudian dikirim diselesaikan, dan pesannya bisa dilewati.
Catch (errorCallback): Kemudian (null, errorCallback).
Akhirnya (Callback): Setara dengan singkatan dari itu (Callback, Callback). Metode di akhirnya tidak menerima parameter, tetapi dapat berhasil lulus pesan dan jenis pesan yang dikirim oleh tundukan ke yang berikutnya.
Defer (): Digunakan untuk menghasilkan objek penundaan var defer = $ q.defer ();
RIDE (): Parameter menerima pesan kesalahan, yang setara dengan melempar pengecualian di fungsi callback, dan kemudian memanggil fungsi callback yang salah di yang berikutnya.
all (): Parameter diterima sebagai array janji, dan objek janji tunggal baru dikembalikan. Ketika semua objek penundaan yang sesuai dari objek janji ini diselesaikan, objek janji tunggal ini akan diselesaikan. Ketika salah satu dari benda -benda janji ini ditolak, janji tunggal ini juga ditolak.
when (): Menerima parameter pertama sebagai nilai sewenang -wenang atau objek janji, dan yang lainnya kemudian metode dari janji yang sama, dan nilai pengembalian adalah objek janji. Jika parameter pertama bukan objek janji, panggilan balik keberhasilan akan dijalankan secara langsung dan pesannya adalah objek ini. Jika itu adalah janji, janji yang dikembalikan sebenarnya adalah pembungkus untuk argumen jenis janji ini. Pesan yang dikirim oleh penundaan yang sesuai dengan janji yang masuk akan diterima oleh objek janji yang dikembalikan oleh fungsi kami.
Penggunaan spesifiknya adalah sebagai berikut:
Dalam sudut, tentukan layanan khusus untuk interaksi.
get: function (url, opsi) {<br> var ditangguhkan = $ q.defer (); <br> showTip (); $ http.get (url, opsi) .success (function (data) {hidetip (); if (data.success) {deferred.resolve (data);} else {rever.rect (data); Deferred.promise;} // Panggilan dalam controller get ('url', params) .then (function (data) {// Berikut ini adalah SuccessCallback}, function (data) {// Berikut ini adalah errorCallback});Dengan cara ini, kita dapat mendefinisikan beberapa petunjuk secara seragam ketika setiap permintaan dikeluarkan, dan kemudian menyembunyikan petunjuk ini setelah permintaan selesai. Dalam kode ini, makna umum adalah bahwa ketika permintaan berhasil, ditangguhkan.
Di atas adalah keterampilan pengembangan praktis AngularJ yang diperkenalkan editor kepada 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!