Pengenalan kepada AngularJS


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

AngularJS memanjangkan HTML melalui Arahan dan mengikat data kepada HTML melalui Ungkapan.

AngularJS ialah rangka kerja JavaScript

AngularJS ialah rangka kerja JavaScript. Ia adalah perpustakaan yang ditulis dalam JavaScript.

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

<skrip src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>


NoteKami mengesyorkan meletakkan skrip di bahagian bawah elemen <body>.
Note我们建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
Ini akan meningkatkan kelajuan pemuatan halaman kerana pemuatan HTML tidak tertakluk kepada pemuatan skrip.

Muat turun setiap versi angular.js: https://github.com/angular/angular.js/releases

AngularJS memanjangkan HTML

AngularJS memanjangkan HTML melalui ng-directives. Arahan

ng-app mentakrifkan aplikasi AngularJS. Arahan

ng-model mengikat nilai elemen (seperti nilai medan input) pada aplikasi. Arahan

ng-bind mengikat data aplikasi pada paparan HTML.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Penjelasan dengan contoh:

Apabila halaman web dimuatkan, AngularJS akan bermula secara automatik. Arahan

ng-app memberitahu AngularJS bahawa elemen <div> ialah "pemilik" AngularJS aplikasi. Arahan

ng-model mengikat nilai medan input kepada pembolehubah aplikasi nama. Arahan

ng-bind mengikat nama pembolehubah aplikasi pada innerHTML perenggan.


NoteJika anda mengalih keluar arahan
Note如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。
ng-app<🎜>, HTML akan memaparkan ungkapan secara langsung tanpa mengira hasil ungkapan.

Apakah AngularJS?

AngularJS memudahkan untuk membangunkan aplikasi halaman tunggal moden (SPA: Aplikasi Halaman Tunggal).

  • AngularJS mengikat data aplikasi kepada elemen HTML.

  • AngularJS boleh mengklon dan mengulang elemen HTML.

  • AngularJS boleh menyembunyikan dan menunjukkan elemen HTML.

  • AngularJS boleh menambah kod "di belakang" elemen HTML.

  • AngularJS menyokong pengesahan input.

Arahan AngularJS

Seperti yang anda lihat, arahan AngularJS ialah atribut HTML yang diawali dengan ng. Arahan

ng-init memulakan pembolehubah aplikasi AngularJS.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

<p>姓名为 <span ng-bind="firstName"></span></p>

</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

NoteHTML5 membenarkan atribut lanjutan (buatan sendiri), bermula dengan
NoteHTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
data-<🎜>. <🎜>Atribut AngularJS bermula dengan <🎜>ng-<🎜>, tetapi anda boleh menggunakan <🎜>data-ng-<🎜> untuk menjadikan halaman itu sah untuk HTML5.

Dengan HTML5 yang sah:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

<p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>
</body>
</html>

Run Instance»

Klik butang "Run Instance" View contoh dalam talian

Ekspresi AngularJS

Ekspresi AngularJS ditulis dalam kurungan kerinting dua kali: {{ ungkapan }}.

Ekspresi AngularJS mengikat data ke HTML, yang serupa dengan arahan ng-bind.

AngularJS akan "mengeluarkan" data tempat ungkapan ditulis.

Ekspresi AngularJS sama seperti JavaScript Ungkapan : Ia boleh mengandungi literal, operator dan pembolehubah.

Instance {{ 5 + 5 }} atau {{ firstName + " " + lastName }}

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="">
  <p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

AngularJS Application

AngularJS Modul Mentakrifkan aplikasi AngularJS.

AngularJS Pengawal digunakan untuk mengawal aplikasi AngularJS. Arahan

ng-app mentakrifkan aplikasi dan ng-controller mentakrifkan pengawal.

Instance

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<p>尝试修改以下表单。</p>

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

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

</body>
</html>

Run Instance»

Klik "Run Instance" Butang untuk melihat contoh dalam talian


Aplikasi definisi modul AngularJS:

Modul AngularJS

apl var = angular.module('myApp', []);

AngularJS controller mengawal aplikasi:

AngularJS controller

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

Dalam tutorial berikut, anda akan mengetahui lebih lanjut tentang aplikasi dan modul.