Rumah > Artikel > hujung hadapan web > Pengenalan ringkas kepada tutorial asas AngularJS_AngularJS

Pengenalan ringkas kepada tutorial asas AngularJS_AngularJS

WBOYasal: 2016-05-16 15:37:521228semak imbas

AngularJS ialah rangka kerja JavaScript. Ia boleh ditambahkan pada halaman HTML melalui teg 855348821b2e8f2cc4b633bf98f064df

AngularJS memanjangkan atribut HTML melalui arahan, dan kemudian mengikat data kepada elemen HTML melalui ungkapan.

AngularJS ialah rangka kerja JavaScript
AngularJS ialah rangka kerja JavaScript, iaitu perpustakaan kelas yang ditulis dalam bahasa JavaScript.

AngularJS diterbitkan sebagai fail JavaScript, yang boleh kami tambahkan pada halaman web melalui teg skrip:

de85def78bf4e5e73c3b76e0cbf117a2e41766e13484456de30e3c90d0e39b57df15d2bd3a0797a114d79c25e114807b

AngularJS memanjangkan HTML

AngularJS memanjangkan HTML melalui satu siri arahan-ng.

Arahan ng-app mentakrifkan aplikasi AngularJS.

Arahan model ng mengikat nilai kawalan HTML kepada model data.

Arahan ng-bind mengikat data model pada paparan HTML.

<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.js"></script>
<body>
<div ng-app="">
   <p>Name: <input type="text" ng-model="name"></p>
   <p ng-bind="name"></p>
</div>
</body>

Contoh penerangan:

AngularJS secara automatik memulakan pelaksanaan apabila halaman dimuatkan.

Arahan ng-app memberitahu AngularJS bahawa elemen dc6dce4a544fdca2df29d5ac0ea9906b ia terletak di dalamnya ialah elemen akar Aplikasi AngularJS.

Arahan model ng mengikat nilai teg input kepada nama pembolehubah.

Arahan ng-bind mengikat nilai nama pembolehubah kepada atribut innerHTML bagi elemen e388a4556c0f65e1904146cc1a846bee

Arahan AngularJS

Seperti yang anda lihat, arahan AngularJS ialah satu set atribut HTML bermula dengan ng.

Pembolehubah Aplikasi AngularJS boleh dimulakan melalui arahan ng-init.

<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>

Kod yang setara:

<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>

Nota Anda boleh menggunakan awalan data-ng- dan bukannya ng- untuk memastikan HTML pada halaman adalah sah.
Anda akan mempelajari lebih banyak arahan AngularJS dalam bab kemudian.

Ekspresi AngularJS

Ungkapan AngularJS ditulis dalam kurungan berganda: {{ pernyataan ungkapan }}.

AngularJS akan "mengeluarkan" ungkapan dengan tepat sebagai hasil yang dikira, contohnya:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Ungkapan AngularJS mengikat data ke HTML dengan cara yang sama seperti arahan ng-bind.

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<body>

<div ng-app="">
 <p>Name: <input type="text" ng-model="name"></p>
 <p>{{name}}</p>
</div>

</body>
</html>

Anda akan mengetahui lebih lanjut tentang ungkapan AngularJS dalam bab berikut.

Aplikasi AngularJS

Modul AngularJS mentakrifkan Aplikasi AngularJS.

Pengawal AngularJS mengawal tingkah laku Aplikasi AngularJS.

Arahan ng-app digunakan untuk menentukan aplikasi, dan arahan ng-controller digunakan untuk menentukan pengawal.

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});
</script>

Aplikasi definisi modul AngularJS:

var app = angular.module('myApp', []);
　　AngularJS控制器控制AngularJS Applications的行为：

app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});

Anda akan mengetahui lebih lanjut tentang modul dan pengawal dalam bab berikut.

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：Koleksi menu pusat beli-belah Tokyo tiruan, tiruan Win menu klik kanan dan kesan khas TAB Taobao tiruan yang dilaksanakan oleh kemahiran JS_javascriptArtikel seterusnya：Koleksi menu pusat beli-belah Tokyo tiruan, tiruan Win menu klik kanan dan kesan khas TAB Taobao tiruan yang dilaksanakan oleh kemahiran JS_javascript

Artikel berkaitan

Lihat lagi