Tutorial pengenalan AngularJS AngularJS instructions_AngularJS

WBOY

Lepaskan： 2016-05-16 15:05:03

asal

1675 orang telah melayarinya

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

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Contoh arahan AngularJS

<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div>

Salin selepas log masuk

Arahan

ng-app memberitahu AngularJS bahawa elemen

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>

Salin selepas log masuk

Contoh di atas akan dihuraikan ke dalam HTML berikut

<ul>
<li>Jani</li>
<li>Hege</li>
<li>Kai</li>
</ul>

Salin selepas log masuk

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>

Salin selepas log masuk

akan dihuraikan ke dalam HTML berikut:

<ul>
<li>Jani, Norway</li>
<li>Hege, Sweden</li>
<li>Kai, Denmark</li>
</ul>

Salin selepas log masuk

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>

Salin selepas log masuk

Contoh di atas menghuraikan kepada:

Arahan tersuai!

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>"
};
});

Salin selepas log masuk

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!