Rakan yang biasa dengan HTML tahu bahawa HTML mempunyai banyak atribut. Contohnya, atribut href bagi teg boleh digunakan untuk menentukan alamat URL pautan dan atribut jenis teg Arahan AngularJS menambah fungsi pada aplikasi AngularJS dengan memanjangkan atribut HTML.
Arahan AngularJS digunakan untuk melanjutkan HTML. Ini adalah sifat istimewa bermula dengan awalan ng-. Kami akan membincangkan arahan berikut:
Arahan AngularJS biasa
Arahanng-app memulakan aplikasi AngularJS.
Arahan ng-init memulakan data aplikasi.
Arahanng-model mengikat nilai elemen (seperti nilai medan input) kepada aplikasi.
arahan ng-app
Arahanng-app memulakan aplikasi AngularJS. Ia mentakrifkan unsur akar. Ia secara automatik memulakan atau memulakan aplikasi yang memuatkan halaman web yang mengandungi aplikasi AngularJS. Ia juga digunakan untuk memuatkan pelbagai modul AngularJS ke dalam aplikasi AngularJS. Dalam contoh di bawah, kami mentakrifkan aplikasi AngularJS lalai menggunakan atribut ng-app bagi elemen div.
<div ng-app=""> ... </div>
arahan ng-init
Arahan ng-init memulakan data aplikasi AngularJS. Ia digunakan untuk meletakkan nilai ke dalam pembolehubah yang digunakan dalam aplikasi. Dalam contoh berikut, kami akan memulakan tatasusunan negara. Gunakan sintaks JSON untuk menentukan tatasusunan negara.
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
...
</div>arahan model-ng
arahan model-ng mentakrifkan model/pembolehubah yang digunakan dalam aplikasi AngularJS. Dalam contoh di bawah, kami mentakrifkan model bernama "nama".
<div ng-app=""> ... <p>Enter your Name: <input type="text" ng-model="name"></p> </div>
arahan ng-ulang
Arahanng-repeat mengulangi setiap item dalam koleksi elemen html. Dalam contoh di bawah, kami telah mengulangi negara tatasusunan.
<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>Contoh arahan AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div> ng-app memberitahu AngularJS bahawa elemen
Perhatian
Halaman web boleh mengandungi berbilang aplikasi AngularJS yang dijalankan dalam elemen berbeza.
Ia tidak begitu biasa untuk menggunakan ng-init untuk memulakan data. Anda akan mempelajari cara yang lebih baik untuk memulakan data dalam bab seterusnya.
arahan ng-ulang
Arahan ng-repeat akan mengulang elemen HTML, yang bersamaan dengan setiap gelung dalam JavaScript
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>Contoh di atas akan dihuraikan ke dalam HTML berikut
<ul> <li>Jani</li> <li>Hege</li> <li>Kai</li> </ul>
ng-repeat berfungsi pada tatasusunan objek:
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>akan dihuraikan ke dalam HTML berikut:
<ul> <li>Jani, Norway</li> <li>Hege, Sweden</li> <li>Kai, Denmark</li> </ul>
Perintah tersuai
Selain arahan terbina dalam AngularJS, kami juga boleh membuat arahan tersuai. Anda boleh menambah arahan tersuai menggunakan fungsi .directive. Untuk memanggil arahan tersuai, nama arahan tersuai perlu ditambahkan pada elemen HTMl. Gunakan camelCase untuk menamakan arahan, askh5Directive, tetapi perlu dipisahkan oleh - apabila menggunakannya: askh5-directive
<body ng-app="myApp">
<askh5-directive></askh5-directive>
<script>
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>Contoh di atas menghuraikan kepada:
Arahan boleh dipanggil dengan cara berikut:
Nama elemen:
Atribut:
Nama kelas:
Ulasan:
hadkan penggunaan
nilai had boleh seperti berikut:
E hanya boleh digunakan dalam nama unsur
Hanya tersedia untuk atribut
C hanya boleh digunakan dengan nama kelas
M hanya untuk komen
Nilai lalai sekatan ialah EA, iaitu, arahan boleh dipanggil melalui nama elemen dan nama atribut.
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});AngularJS di atas hanya akan membenarkan panggilan sifat.
Bacaan berkaitan:
Tutorial pengenalan AngularJS - ungkapan AngularJS
Kandungan di atas ialah arahan AngularJS bagi tutorial pengenalan AngularJS yang diperkenalkan oleh editor saya harap ia akan membantu semua orang!
Penggunaan arahan zip mampatan Linux
Di manakah antara muka audio terletak pada papan induk?
Pasang dan konfigurasikan vnc pada ubunt
padamkan elemen daripada tatasusunan js
Apakah kaedah untuk mengesan kelemahan ASP?
Cara menyediakan Douyin untuk menghalang semua orang daripada melihat hasil kerja
Apakah perisian anti-virus?
Bagaimana untuk menetapkan lebar set medan
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
