Giới thiệu AngularJS

AngularJS là một Khung JavaScriptNó có thể được thêm vào trang HTML bằng thẻ <script>.

AngularJS thông quaHướng dẫnMở rộng thuộc tính HTML và sử dụngBiểu thứcKết hợp dữ liệu với HTML.

AngularJS là một khung JavaScript

AngularJS là một khung JavaScript viết bằng JavaScript.

AngularJS được phân phối dưới dạng tệp JavaScript và có thể được thêm vào trang web bằng thẻ script:

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

AngularJS mở rộng HTML

AngularJS sử dụng Hướng dẫn ng-Mở rộng HTML.

ng-app Hướng dẫn định nghĩa một ứng dụng AngularJS.

ng-model Hướng dẫn gán giá trị của các điều khiển HTML (input, select, textarea) vào dữ liệu ứng dụng.

ng-bind Hướng dẫn gán dữ liệu ứng dụng vào视图 HTML.

Mô hình AngularJS

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

Thử ngay

Giải thích ví dụ:

Khi trang web được tải xong, AngularJS sẽ tự động khởi động.

ng-app Hướng dẫn thông báo cho AngularJS rằng phần tử <div> là phần tử của AngularJS Ứng dụngcủa người sở hữu.

ng-model Hướng dẫn gán giá trị của trường đầu vào vào biến ứng dụng của ứng dụng. name。

ng-bind Hướng dẫn sẽ gắn kết nội dung của phần tử <p> với biến ứng dụng của ứng dụng. name。

Cú pháp AngularJS

Như bạn đã thấy, hướng dẫn AngularJS có tiền tố ng thuộc tính HTML có tiền tố.

ng-init Hướng dẫn khởi tạo biến ứng dụng AngularJS.

Mô hình AngularJS

<div ng-app="" ng-init="firstName='Bill'">
<p>Tên là <span ng-bind="firstName"></span></p>
</div>

Thử ngay

hoặc sử dụng HTML hợp lệ:

Mô hình AngularJS

<div data-ng-app="" data-ng-init="firstName='Bill'">
<p>Tên là <span data-ng-bind="firstName"></span></p>
</div>

Thử ngay

Nếu bạn muốn HTML trang của bạn có hiệu lực, bạn có thể sử dụng data-ng- thay vì ng-。

Bạn sẽ tìm hiểu thêm về hướng dẫn trong phần sau của hướng dẫn này.

Biểu thức AngularJS

Biểu thức AngularJS được viết trong hai dấu ngoặc kép:{{ expression }}。

AngularJS sẽ "xuất" dữ liệu tại vị trí biểu thức:

Mô hình AngularJS

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Biểu thức đầu tiên của tôi: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Thử ngay

Biểu thức AngularJS sẽ gắn kết dữ liệu AngularJS với HTML, tương tự như ng-bind Cách sử dụng hướng dẫn tương tự.

Mô hình AngularJS

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

Thử ngay

Bạn sẽ tìm hiểu thêm về biểu thức trong phần sau của hướng dẫn này.

Ứng dụng AngularJS

AngularJS Mô đunĐịnh nghĩa ứng dụng AngularJS.

AngularJS Điều khiểnQuản lý ứng dụng AngularJS.

ng-app Định nghĩa ứng dụng,ng-controller Định nghĩa điều khiển.

Mô hình AngularJS

<div ng-app="myApp" ng-controller="myCtrl">
Tên: <input type="text" ng-model="firstName"><br>
Họ: <input type="text" ng-model="lastName"><br>
<br>
Họ và tên: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "Bill";
  $scope.lastName= "Gates";
});
</script>

Thử ngay

Mô-đun AngularJS định nghĩa ứng dụng:

Mô-đun AngularJS

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

Kontroler AngularJS kiểm soát ứng dụng:

Kontroler AngularJS

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

Bạn sẽ tìm hiểu thêm về mô-đun và kontroler trong hướng dẫn này.