Chỉ định các thành phần liên kết với nhau AngularJS

* Giới thiệu

Tiền tố sử dụng đều có ng-
ng-app khởi tạo ứng dụng
ng-init khai báo dữ liệu khi ứng dụng khởi tạo.
ng-model nhận dữ liệu và đẩy dữ liệu ra biến từ các thành phần của HTML như input, select, textarea.

* Ví dụ:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="Ten='Nhật'">
    <p>Nhập tên của bạn:</p>
    <p>Tên: <input type="text" ng-model="Ten"></p>
    <p>Xin chào: {{ Ten }}</p>
</div>
</body>
</html>

* Kết quả:
Khi ứng dụng khởi động lên sẽ khởi tạo biến Ten có giá trị là Nhật
Và gán vào ô text, sau khi thay đổi giá trị ở ô text giá trị sẽ được gán lại tới biến Ten
Và hiển thị ra {{ Ten }}
 
* Ví dụ 2:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="a=1;b=5">
<h2>Nhập 2 số:</h2>
A: <input type="number" ng-model="a">
B: <input type="number" ng-model="b">
<p><b>Tổng 2 số là:</b> {{a + b}}</p>
</div>
</body>
</html>

​* kết quả: Xuất hiện 2 ô nhập liệu A,B, nhập xong sẽ ra kết quả tổng.