cari

Rumah >hujung hadapan web >tutorial js >Susun beberapa arahan biasa dalam AngularJS_AngularJS

Susun beberapa arahan biasa dalam AngularJS_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal
2016-05-16 15:54:421320semak imbas

Arahan AngularJS digunakan untuk melanjutkan HTML. Ini adalah sifat istimewa bermula dengan awalan ng-. Kami akan membincangkan arahan berikut:

  • ng-app - Perintah ini memulakan aplikasi AngularJS.
  • ng-init - Arahan ini memulakan data aplikasi.
  • ng-model - Arahan ini mentakrifkan model, iaitu pembolehubah yang digunakan dalam AngularJS.
  • ng-repeat - Arahan ini akan mengulangi elemen HTML untuk setiap item dalam koleksi.

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

Contoh berikut akan menunjukkan semua arahan di atas.
testAngularJS.html

<html>
<title>AngularJS Directives</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
                  {locale:'en-GB',name:'United Kingdom'},
                  {locale:'en-FR',name:'France'}]">
  <p>Enter your Name: <input type="text" ng-model="name"></p>
  <p>Hello <span ng-bind="name"></span>!</p>
  <p>List of Countries with locale:</p>
  <ol>
   <li ng-repeat="country in countries">
     {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
   </li>
  </ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Output

Buka textAngularJS.html dalam penyemak imbas web anda. Masukkan nama dan lihat hasilnya di bawah.

2015616115415280.png (613×372)

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kemahiran asas pembelajaran_javascript BootstrapArtikel seterusnya：Kemahiran asas pembelajaran_javascript Bootstrap

Artikel berkaitan

Lihat lagi