Arahan, saya memahaminya sebagai cara bagi AngularJS untuk memanipulasi elemen HTML.
Karena langkah pertama dalam belajar AngularJS adalah menulis instruksi bawaan NG-App untuk menunjukkan bahwa simpul adalah simpul root dari aplikasi, instruksi sudah akrab.
Log ini hanya mencatat beberapa instruksi bawaan, pertama-tama gunakan, dan kemudian berbicara tentang beberapa hal menarik.
Perintah bawaan
Semua arahan bawaan memiliki awalan NG, dan tidak disarankan untuk menggunakan awalan ini untuk arahan khusus untuk menghindari konflik.
Mulailah dengan beberapa instruksi bawaan.
Pertama, daftar beberapa instruksi bawaan dan berbicara secara singkat tentang masalah ruang lingkup.
NG-MODEL
Penjelasan ini tampaknya tidak benar ketika mengikat kontrol formulir ke sifat -sifat ruang lingkup saat ini.
Tapi jangan khawatir tentang kenyal, mudah dimengerti saat menggunakan, misalnya:
Salinan kode adalah sebagai berikut:
<input type = "text" ng-model = "somemodel.someproperty" /> <br>
{{somemodel.someproperty}}
ng-init
Petunjuk ini disebut ruang lingkup internal yang diinisialisasi.
Instruksi ini biasanya muncul dalam aplikasi yang lebih kecil, seperti memberikan demo atau sesuatu ...
Salinan kode adalah sebagai berikut:
<div ng-init = "job = 'fighter'">
Saya a/an {{job}}
</div>
Selain NG-init, kami memiliki lebih banyak pilihan dan lebih baik.
NG-APP
Setiap kali Anda menggunakan AngularJS, perintah ini tidak dapat dipisahkan darinya. Ngomong -ngomong, $ rootscope disertakan.
Menyatakan elemen NG-App menjadi titik awal $ rootscope, yang merupakan akar dari rantai lingkup, yang biasanya dinyatakan dalam <html> Anda mengerti.
Dengan kata lain, itu dapat diakses oleh ruang lingkup di bawah akar.
Namun, tidak disarankan untuk menggunakan $ rootcope secara berlebihan untuk menghindari variabel global yang terbang di seluruh langit, membuat efisiensi menjadi buruk dan sulit dikelola.
Inilah contohnya:
Salinan kode adalah sebagai berikut:
<html ng-app = "myapp">
<body>
{{SomeProperty}}
</body>
<script>
var myapp = angular.module ('myapp', [])
.run (fungsi ($ rootscope) {
$ rootscope.someproperty = 'hello computer';
});
</script>
</html>
NG-Controller
Kami menggunakan instruksi ini untuk menginstal controller pada elemen DOM.
Seorang pengontrol? Memang, baik untuk memahami ini secara harfiah, jadi mengapa kita membutuhkan pengontrol?
Ingatlah bahwa ketika AngularJS 1.2.x, Anda juga dapat mendefinisikan pengontrol seperti ini ...
Salinan kode adalah sebagai berikut:
fungsi ohmycontroller ($ scope) {
// ...
}
Metode ini dilarang di AngularJS 1.3.x karena metode ini akan membuat pengontrol terbang di seluruh langit, dan Anda tidak dapat membedakan antara level dan semuanya digantung pada $ rootscope ...
NG-controller harus memiliki ekspresi sebagai parameter, dan di samping itu, metode dan sifat-sifat dari $ cakupan sebelumnya diwarisi melalui $ scope, dan $ rootscope juga disertakan.
Berikut ini hanyalah contoh sederhana, leluhur tidak dapat mengakses ruang lingkup anak.
Salinan kode adalah sebagai berikut:
<Div ng-controller = "ancestorcontroller">
{{Ancestorname}}
{{childName}}
<Div ng-controller = "childController">
{{Ancestorname}}
{{childName}}
</div>
</div>
<script>
var myapp = angular.module ('myapp', [])
.controller ('childController', function ($ scope) {
$ scope.childname = 'anak';
})
.controller ('ancestorcontroller', function ($ scope) {
$ scope.ancestorname = 'leluhur';
});
</script>
Masalah ruang lingkup lebih dari itu. Mari kita sisihkan untuk saat ini dan terus melihat instruksi bawaan lainnya.
NG-Form
Awalnya saya tidak mengerti mengapa ada perintah formulir, dan tag <sorm> terasa cukup.
Mengambil verifikasi bentuk sebagai contoh, ada sepotong kode di artikel sebelumnya:
Salinan kode adalah sebagai berikut:
<input type = "kirim" ng disabled = "MainForm. $ tidak valid" />
Artinya, ketika status formulir tidak valid, tombol kirim dinonaktifkan.
Jika pemandangannya sedikit lebih rumit, misalnya, ada banyak bentuk anak dalam bentuk orang tua, dan bentuk induk dapat diserahkan ketika 3 bentuk anak melewati verifikasi.
Namun, <Morm> tidak dapat bersarang.
Mempertimbangkan skenario ini, kami menggunakan arahan NG-Form untuk menyelesaikan masalah ini.
Misalnya:
Salinan kode adalah sebagai berikut:
<Form name = "MainForm" Novalidate>
<Div ng-form = "form1">
Nama: <input type = "text" ng-rquired = "true" ng-model = "name"/> <br>
Nomor ID: <input type = "number" ng-minlength = "15" ng-maxlength = "18" ng-required = "true" ng-model = "idnum"/>
</div>
<br>
<Div ng-form = "Form2">
Nama Guardian: <input type = "text" ng-required = "true" ng-model = "gname"/> <br>
Nomor ID Guardian: <input type = "number" ng-minlength = "15" ng-maxlength = "18" ng-rquired = "true" ng-model = "gidnum"/>
</div>
<tombol ng-disabled = "Form1. $ Invalid && Form2. $ Invalid"> Kirim semua </button>
</form>
NG-Disabled
Untuk atribut seperti ini yang mulai berlaku selama muncul, kita dapat membuatnya efektif di AngularJS dengan mengembalikan nilai yang benar/false dengan nilai pengembalian ekspresi.
Nonaktifkan bidang input formulir.
Salinan kode adalah sebagai berikut:
<textarea ng-disabled = "1+1 == 2"> 1+1 =? </textarea>
NG-readonly
Atur bidang input formulir ke read-only dengan mengembalikan nilai yang benar/false dengan ekspresi.
Buat contoh, dan menjadi hanya baca setelah 3 detik.
Salinan kode adalah sebagai berikut:
<input type = "text" ng-readonly = "stoptheworld" value = "Stop the World After 3s"/>
.run (fungsi ($ rootscope, $ timeout) {
$ rootscope.stoptheworld = false;
$ timeout (function () {
$ rootscope.stoptheworld = true;
}, 3000)
})
NG-checked
Ini untuk <input type = "kotak centang" />, seperti ...
Salinan kode adalah sebagai berikut:
<input type = "kotak centang" ng-checked = "someproperty" ng-init = "someproperty = true" ng-model = "someproperty">
NG-Dipilih
Untuk digunakan dengan <pection> di <colly>, contoh:
Salinan kode adalah sebagai berikut:
<label>
<input type = "kotak centang" ng-model = "isfullstack">
Saya Insinyur Tumpukan Penuh
</label>
<CILECT>
<pection> front-end </pection>
<pection> back-end </pection>
<option ng-terpilih = "isfullstack"> stack penuh !!! </pection>
</pilih>
NG-show/ng-hide
Tunjukkan/sembunyikan elemen html sesuai dengan ekspresi, perhatikan bahwa itu tersembunyi, tidak dihapus dari DOM, misalnya:
Salinan kode adalah sebagai berikut:
<Div ng-show = "1+1 == 2">
1+1 = 2
</div>
<div ng-hide = "1+1 == 3">
Anda tidak bisa melihat saya.
</div>
ng-change
Ini bukan onxxx html atau semacamnya, tetapi ng-xxx.
Gunakan dalam kombinasi dengan NG-model, ambil NG-change sebagai contoh:
Salinan kode adalah sebagai berikut:
<input type = "text" ng-model = "calc.arg" ng-change = "calc.result = calc.arg*2" />
<code> {{calc.result}} </code>
Atau, misalnya, opsi NG
{{}}
Bahkan, ini juga arahan. Mungkin rasanya mirip dengan NG-Bind, tetapi mungkin terlihat ketika halaman membuat sedikit lebih lambat.
Selain itu, kinerja {{}} jauh lebih sedikit dari NG-Bind, tetapi sangat nyaman untuk digunakan.
NG-BIND
Perilaku NG-Bind mirip dengan {{}}, kecuali bahwa kita dapat menggunakan instruksi ini untuk menghindari fouc (kilatan konten yang tidak pernah tidak ada), yaitu, flicker yang disebabkan oleh rindu.
NG-CLOAK
Ng-Cloak juga dapat menyelesaikan fouc untuk kita. Ng-Cloak menyembunyikan elemen internal sampai rute memanggil halaman yang sesuai.
NG-IF
Jika ekspresi di NG-jika salah, elemen yang sesuai akan dihapus dari DOM alih-alih disembunyikan, tetapi ketika meninjau elemen, Anda dapat melihat bahwa ekspresi menjadi komentar.
Jika fase disembunyikan, Anda dapat menggunakan NG-hide.
Salinan kode adalah sebagai berikut:
<Div ng-if = "1+1 === 3">
Elemen ini tidak dapat ditinjau
</div>
<Div ng-hide = "1+1 == 2">
Dapat ditinjau
</div>
NG-SWITCH
Tidak masalah jika Anda menggunakannya sendiri, berikut adalah contoh:
Salinan kode adalah sebagai berikut:
<Div ng-switch on = "1+1">
<p ng-switch-default> 0 </p>
<p ng-switch-when = "1"> 1 </p>
<p ng-switch-when = "2"> 2 </p>
<p ng-switch-when = "3"> 3 </p>
</div>
NG-repeat
Saya tidak mengerti bahwa itu tidak disebut iterate. Singkatnya, ini adalah untuk melintasi koleksi dan menghasilkan instance templat untuk setiap elemen. Beberapa atribut khusus dapat digunakan dalam ruang lingkup setiap contoh, sebagai berikut:
Salinan kode adalah sebagai berikut:
$ indeks
$ dulu
$ terakhir
$ tengah
Bahkan
aneh
Tanpa harus menjelaskannya secara khusus, mudah untuk melihat untuk apa ini. Inilah contohnya:
Salinan kode adalah sebagai berikut:
<ul>
<li ng-repeat = "char in
[{'alphabet': 'k'},
{'alphabet': 'a'},
{'Alphabet': 'V'},
{'Alphabet': 'l'},
{'Alphabet': 'e'},
{'alphabet': 'z'}] "ng-show =" $ even "> {{char.alphabet}} </li>
</ul>
Ng-Href
Pada awalnya saya membuat model NG di bidang teks dan kemudian menulisnya di href seperti ini.
Faktanya, tidak ada perbedaan antara HREF dan NG-HREF, jadi kita dapat mencobanya:
Salinan kode adalah sebagai berikut:
<ul ng-init = "myhref = ''">
<li> <a ng-href = "{{myhref}}"> {{linkText}} </a> </li>
<li> <a href = "{{myhref}}"> klik, tetapi belum tentu alamat yang benar </a> </li>
</ul>
.run (fungsi ($ rootscope, $ timeout) {
$ rootscope.linkText = 'Belum dimuat, Anda tidak dapat mengklik';
$ timeout (function () {
$ rootscope.linkText = 'Silakan klik'
$ rootscope.myhref = 'http://google.com';
}, 2000);
})
NG-SRC
Hal yang sama benar, yaitu, sumber daya tidak boleh dimuat sebelum ekspresi berlaku.
Contoh (PS: gambarnya bagus!):
Salinan kode adalah sebagai berikut:
<img ng-src = "{{imgsrc}}"/>
.run (fungsi ($ rootscope, $ timeout) {
$ timeout (function () {
$ rootscope.imgsrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})
NG-Class
Ubah gaya kelas secara dinamis dengan objek dalam ruang lingkup, misalnya:
Salinan kode adalah sebagai berikut:
<tyle>
.red {latar belakang-warna: merah;}
.blue {latar belakang-warna: biru;}
</tyle>
<Div ng-controller = "CurTimeController">
<tombol ng-click = "getCurrentSecond ()"> Dapatkan waktu! </button>
<p ng-class = "{red: x%2 == 0, biru: x%2! = 0}"> angka adalah: {{x}} </p>
</div>
.controller ('CurTimeController', function ($ scope) {
$ scope.getCurrentsecond = function () {
$ scope.x = tanggal baru (). getseconds ();
};
})
Di atas adalah semua konten yang dijelaskan dalam artikel ini, saya harap Anda menyukainya.