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 với Directives và liên kết dữ liệu với HTML bằng Expressions .
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 với các chỉ thị ng .
Chỉ thị ng-app định nghĩa một ứng dụng AngularJS.
Lệnh ng-model liên kết giá trị của các điều khiển HTML (input, select, textarea) với dữ liệu ứng dụng.
Chỉ thị ng-bind liên kết dữ liệu ứng dụng với dạng 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>
Ví dụ được giải thích:
AngularJS tự động khởi động khi trang web đã tải xong.
Chỉ thị ng-app cho AngularJS biết rằng phần tử <div> là "chủ sở hữu" của một ứng dụng AngularJS .
Chỉ thị ng-model liên kết giá trị của trường đầu vào với tên biến ứng dụng .
Chỉ thị ng-bind liên kết nội dung của phần tử <p> với tên biến ứng dụng .
Hướng dẫn AngularJS
Như bạn đã thấy, các chỉ thị AngularJS là các thuộc tính HTML có tiền tố ng .
Chỉ thị 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>
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>
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ẽ tìm hiểu thêm rất nhiều 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>
Biểu thức AngularJS liên kết dữ liệu AngularJS với HTML giống như cách với chỉ thị 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>
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 định nghĩa các ứng dụng AngularJS.
Bộ điều khiển AngularJS điều khiển các ứng dụng AngularJS.
Chỉ thị ng-app xác định ứng dụng, chỉ thị 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>
Các mô-đun AngularJS xác định các ứng dụng:
Mô-đun AngularJS
var app = angular.module('myApp', []);
Các ứng dụng điều khiển bộ điều khiển AngularJS:
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 ở phần sau của hướng dẫn này.