AngularJS Memahami Template Sudut

Penulis：Eve Cole Waktu Pembaruan：2025-08-23 06:32:01

Template Angular adalah spesifikasi deklarasi, yang diterjemahkan ke tampilan yang dilihat pengguna di browser bersama dengan informasi model dan pengontrol. Ini adalah DOM statis, termasuk HTML, CSS, elemen khusus sudut dan atribut elemen yang ditentukan sudut. Elemen dan atribut sudut menunjukkan sudut untuk memperluas perilaku dan untuk mengubah template DOM menjadi dom tampilan dinamis.

Berikut adalah jenis elemen sudut yang sudah atribut yang dapat kita gunakan dalam template:

Directive (//www.vevb.com/article/91739.htm) - Atribut atau elemen yang memperluas elemen DOM yang ada atau mewakili komponen DOM yang dapat digunakan kembali, yaitu kontrol.
Markup (http://code.angularjs.org/1.0.2/docs/api/ng.$interpolate) - Bind ekspresi ke dalam elemen melalui notasi brace ganda {{}}, yang merupakan markup sudut bawaan.
Filter (http://code.angularjs.org/1.0.2/docs/guide/dev_guide.templates.filters) - Digunakan untuk memformat data yang kami tunjukkan kepada pengguna.
Kontrol formulir (//www.vevb.com/article/91744.htm) - Mari kita verifikasi input pengguna.

Catatan: Selain mendeklarasikan elemen -elemen di atas dalam templat, kami juga dapat mengakses elemen -elemen ini dalam kode JavaScript.

Cuplikan kode berikut menunjukkan templat sudut sederhana yang terdiri dari tag HTML standar dan arahan sudut, ekspresi brace-bound ({{{}}}, //www.vevb.com/article/91742.htm).

 <! Doctype html> <!-ng-app, tentukan ruang lingkup aplikasi, buat root scop-> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Template </title> <meta conten = "charset = UTF-8"/> <title> template </title> <meta content = "cringe =" cring = "cring =" cring = "crime = 1"/> <title> </title> </title conten = "charset = uTF-8"/> <title> </title> <Meta conten = "chrome =" cring = "crim = cring =" cring = 1 " http-equiv = "x-ua-kompatibel"> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <!-ng-cloak, kelas yang akan dihapus setelah kompilasi ng-controller, arahan, yang digunakan untuk menentukan bahwa pengontrol yang sesuai dari templat saat ini adalah myController-<body ng-controller = "mycontroller"> <!-ng-nel, directive. -> <input type = "text" ng-model = "foo" value = ""/> <!-ng-klik, arahan, apa yang perlu Anda lakukan setelah mengklik dapat berupa ekspresi, seperti buttontext = '1'; Atau bisa menjadi fungsi panggilan, seperti yang ditunjukkan di bawah ini. {{Buttontext}}, digunakan untuk menampilkan nilai buttontext yang dapat atau diperoleh dalam rantai lingkup saat ini-> <button ng-click = "changeFoo ()"> {{{buttontext}} </button> <script src = "../ angular -.0.1.js" type = "TOMPT/JAVASI"> JAWACK "</JAVACK =" JAVACK "TEPPS =" JAVACCRIPS = "JAVACCRIPT/JAVACK/JAVACK" Mycontroller ($ scope) {$ scope.buttontext = "stuff default"; // inisialisasi model buttontext $ scope.foo = "ubah me"; // inisialisasi model foo $ scope.changefoo = function () {// Declare changefoo this.buttontext = this.foo; }; } </script> </body> </html>

Dalam aplikasi satu halaman sederhana, templat terdiri dari HTML, CSS, dan Petunjuk Angular, semuanya terkandung dalam file HTML (biasanya disebut index.html). Tetapi dalam beberapa aplikasi yang lebih kompleks, kami dapat menampilkan beberapa tampilan dalam satu halaman dengan menggunakan "parsial", yaitu, simpan segmen templat dalam file HTML terpisah. Kita dapat menggunakan layanan $ rute (http://code.angularjs.org/1.0.2/docs/api/ng.$route) dan arahan Ngview (http://code.angularjs.org/1.0.2/docs/api/ng.direktif:ngiew) di laginas " Contoh teknik ini ditunjukkan pada langkah ketujuh dan kedelapan tutorial Angular (http://code.angularjs.org/1.0.2/docs/tutorial/index). (Saya akan bermain dengan bagian ini nanti -_-!)

Di atas adalah kumpulan informasi tentang AngularJS Memahami Template Sudut. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!