Rumah > Artikel > hujung hadapan web > Pengenalan ringkas kepada nota kajian asas AngularJS_AngularJS

Pengenalan ringkas kepada nota kajian asas AngularJS_AngularJS

WBOYasal: 2016-05-16 15:59:581172semak 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:

Salin kod Kod adalah seperti berikut:

b042b587c0c87bb11492bb37acc4f42a2cacc6d41bbb37262a98f745aa00fbf0

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="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

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：Bagaimana untuk meniru kesan slaid keluar Tencent Weibo menggunakan jQuery untuk melaporkan cuaca harianArtikel seterusnya：Bagaimana untuk meniru kesan slaid keluar Tencent Weibo menggunakan jQuery untuk melaporkan cuaca harian

Artikel berkaitan

Lihat lagi