Pengenalan ringkas kepada nota kajian asas AngularJS

Pengenalan ringkas kepada nota kajian asas AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:59:58

asal

1188 orang telah melayarinya

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

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:

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>

Salin selepas log masuk

Contoh penerangan:

AngularJS secara automatik memulakan pelaksanaan apabila halaman dimuatkan.

Arahan ng-app memberitahu AngularJS bahawa elemen

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

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>

Salin selepas log masuk

Kod yang setara:

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Aplikasi definisi modul AngularJS:

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

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

Salin selepas log masuk

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

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