Pengenalan AngularJS

AngularJS adalah Kerangka kerja JavaScript. Ia dapat ditambahkan ke halaman HTML dengan tag <script>.

AngularJS melaluiperintahmemperluas atribut HTML dan menggunakanEkspresimenikat data kepada HTML.

Kerangka kerja JavaScript

AngularJS adalah kerangka kerja JavaScript yang ditulis dalam JavaScript.

AngularJS disiarkan dalam bentuk file JavaScript dan dapat ditambahkan ke halaman web dengan tag script:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>

AngularJS memperluas HTML

AngularJS digunakan Perintah ng-Memperluas HTML.

ng-app Perintah mendefinisikan aplikasi AngularJS.

ng-model Perintah akan memikat nilai kontrol HTML (input, select, textarea) kepada data aplikasi.

ng-bind Perintah akan memikat data aplikasi kepada tampilan HTML.

Contoh AngularJS

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
</body>
</html>

Cuba sendiri

Pengertian contoh:

Ketika halaman web disiapkan untuk dimuat, AngularJS akan beroperasi secara automatik.

ng-app Perintah memberitahu AngularJS bahawa elemen <div> adalah AngularJS Aplikasipemiliknya.

ng-model Perintah akan memikat nilai field input kepada variable aplikasi name。

ng-bind 指令将 <p> 元素的内容绑定到应用程序变量 name。

Arahan AngularJS

如您所见，AngularJS 指令是带有 ng 前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。

Contoh AngularJS

<div ng-app="" ng-init="firstName='Bill'">
<p>名字是 <span ng-bind="firstName"></span></p>
</div>

Cuba sendiri

或者使用有效的 HTML：

Contoh AngularJS

<div data-ng-app="" data-ng-init="firstName='Bill'">
<p>名字是 <span data-ng-bind="firstName"></span></p>
</div>

Cuba sendiri

如果您想让页面 HTML 有效，您可以使用 data-ng- 而不是 ng-。

您将在本教程的后面部分了解有关指令的更多信息。

Ekspresi AngularJS

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 将在表达式所在的位置“输出”数据：

Contoh AngularJS

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>我的第一个表达式：{{ 5 + 5 }}</p>
</div>
</body>
</html>

Cuba sendiri

AngularJS 表达式将 AngularJS 数据绑定到 HTML，与 ng-bind 指令的方式相同。

Contoh AngularJS

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>
</body>
</html>

Cuba sendiri

您将在本教程后面了解有关表达式的更多信息。

Aplikasi AngularJS

AngularJS 模块定义 AngularJS 应用程序。

AngularJS 控制器控制 AngularJS 应用程序。

ng-app 指令定义应用程序，ng-controller 指令定义控制器。

Contoh AngularJS

<div ng-app="myApp" ng-controller="myCtrl">
名字：<input type="text" ng-model="firstName"><br>
Nama keluarga：<input type="text" ng-model="lastName"><br>
<br>
Nama Penuh：{{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "Bill";
  $scope.lastName= "Gates";
});
</script>

Cuba sendiri

Modul AngularJS mendefinikan aplikasi:

Modul AngularJS

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

Kawalan AngularJS mengawal aplikasi:

Kawalan AngularJS

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

Anda akan mendapatkan maklumat lanjut tentang modul dan kawalan di belakang panduan ini.