Tutorial pengenalan AngularJS AngularJS instructions_AngularJS

Rakan yang biasa dengan HTML tahu bahawa HTML mempunyai banyak atribut. Contohnya, atribut href bagi teg 3499910bf9dac5ae3c52d5ede7383485 boleh digunakan untuk menentukan alamat URL pautan dan atribut jenis teg d5fd7aea971a85678ba271703566ebfd 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

Arahan

ng-app memulakan aplikasi AngularJS.

Arahan ng-init memulakan data aplikasi.

Arahan

ng-model mengikat nilai elemen (seperti nilai medan input) kepada aplikasi.

arahan ng-app

Arahan

ng-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

Arahan

ng-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> 

Arahan

ng-app memberitahu AngularJS bahawa elemen dc6dce4a544fdca2df29d5ac0ea9906b semasa ialah aplikasi AngularJS Arahan ng-init digunakan untuk memulakan data, yang setara dengan mentakrifkan pembolehubah dalam JavaScript. Pengikatan data dalam AngularJS menyegerakkan ungkapan AngularJS dan data AngularJS. {{ firstName }} disegerakkan melalui ng-model="firstName". Contoh di atas secara serentak akan memaparkan kandungan yang anda masukkan dalam kotak input pada halaman.

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:

4a249f0d628e2318394fd9b75b4636b1Arahan tersuai!473f0a7621bec819994bb5020d29372a

Arahan boleh dipanggil dengan cara berikut:

Nama elemen: 6864244c5133c8be482ad78135864b813c099c703ad56dc8c4d20f130b6633bb

Atribut: 215a28f1b197530e83ae97e8b7faab7416b28748ea4df4d9c2150843fecfba68

Nama kelas:246c50ea82720d6a9056246ce10521a416b28748ea4df4d9c2150843fecfba68

Ulasan: 2517a5999b8b1d0325102db1b0f9334b

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!