Giới thiệu AngularJS
AngularJS là một khung công tác JavaScript . Nó có thể được thêm vào trang HTML bằng thẻ <script>.
AngularJS mở rộng các thuộc tính HTML bằng Chỉ thị và liên kết dữ liệu với HTML bằng Biểu thức .
AngularJS là một khung JavaScript
AngularJS là một khung JavaScript được 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://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>AngularJS mở rộng HTML
AngularJS mở rộng HTML bằng ng-directives .
Lệnh ng-app xác định ứng dụng AngularJS.
Lệnh ng-model liên kết giá trị của các điều khiển HTML (đầu vào, chọn, vùng văn bản) với dữ liệu ứng dụng.
Lệnh ng-bind liên kết dữ liệu ứng dụng với chế độ xem HTML.
Ví dụ về AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/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>
Hãy tự mình thử »Ví dụ giải thích:
AngularJS tự động khởi động khi trang web được tải.
Lệnh ng-app cho AngularJS biết rằng phần tử <div> là "chủ sở hữu" của ứng dụng AngularJS.
Lệnh ng-model liên kết giá trị của trường đầu vào với tên biến ứng dụng.
Lệnh ng-bind liên kết nội dung của phần tử <p> với tên biến ứng dụng.
Chỉ thị AngularJS
Như bạn đã thấy, các lệnh AngularJS là các thuộc tính HTML có tiền tố ng .
Lệnh ng-init khởi tạo các biến ứng dụng AngularJS.
Ví dụ về AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Hãy tự mình thử »Ngoài ra với HTML hợp lệ:
Ví dụ về AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Hãy tự mình thử »Bạn có thể sử dụng data-ng- , thay vì ng- , nếu bạn muốn làm cho trang HTML của mình hợp lệ.
Bạn sẽ học được nhiều điều hơn về các chỉ thị ở phần sau của hướng dẫn này.
Biểu thức AngularJS
Biểu thức AngularJS được viết bên trong dấu ngoặc kép: {{ biểu thức }} .
AngularJS sẽ "xuất" dữ liệu chính xác nơi biểu thức được viết:
Ví dụ về AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Hãy tự mình thử »Các biểu thức AngularJS liên kết dữ liệu AngularJS với HTML giống như lệnh ng-bind .
Ví dụ về AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/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>
Hãy tự mình thử »Bạn sẽ tìm hiểu thêm về các biểu thức sau trong hướng dẫn này.
Ứng dụng AngularJS
Các mô-đun AngularJS xác định các ứng dụng AngularJS.
Bộ điều khiển AngularJS kiểm soát các ứng dụng AngularJS.
Lệnh ng-app xác định ứng dụng, lệnh ng-controller xác định bộ điều khiển.
Ví dụ về AngularJS
<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>
Hãy tự mình thử »Các mô-đun AngularJS xác định các ứng dụng:
Mô-đun AngularJS
var app = angular.module('myApp', []);
Bộ điều khiển AngularJS điều khiển các ứng dụng:
Bộ điều khiển AngularJS
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Bạn sẽ tìm hiểu thêm về các mô-đun và bộ điều khiển sau trong hướng dẫn này.
