AngularJS: Giới thiệu
Giải phóng thời gian, khai phóng năng lực
AngularJS framework JavaScript, nó có thể được thêm vào một trang HTML với một thẻ <script>.
AngularJS cho phép mở rộng các thuộc tính HTML bằng cách sử dụng các chỉ thị và các ràng buộc dữ liệu tới HTML bằng các biểu thức.
AngularJS mở rộng HTML
Để mở rộng HTML sử dụng AngularJS thì ta sử dụng các chỉ thị dạng ng-directive.
Chỉ thị ng-app dùng để định nghĩa một ứng dụng AngularJS.
Chỉ thị ng-model sẽ liên kết dữ liệu của các điều khiển HTML (input, select, textarea, ...) với dữ liệu ứng dụng.
Chỉ thị ng-bind sẽ liên kết dữ liệu ứng dụng với phần hiển thị HTML.
Ví dụ AngularJS
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Demo
Giải thích ví dụ:
AngularJS tự động được khởi động khi trang web được tải.
Chỉ thị ng-app sẽ chỉ cho AngularJS rằng thẻ <div> là "chủ sở hữu" của một ứng dụng AngularJS.
Chỉ thị ng-model kết hợp giá trị của trường input với biến ứng dụng name.
Chỉ thị ng-bind liên kết innerHTML của phần tử <p> với biến ứng dụng name.
Chỉ thị AngularJS
Như bạn đã thấy, các chỉ thị AngularJS là thuộc tính HTML với tiền tố ng.
Chỉ thị ng-init khởi tạo các biến ứng dụng AngularJS.
Ví dụ AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Thay thế giá trị HTML:
Ví dụ
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Ta có thể sử dụng data-ng- thay vì ng- nếu bạn muốn làm cho trang HTML trở nên có giá trị hơn.
Bạn sẽ học nhiều hơn về các chỉ thị ở những bài học phía sau.
Biểu thức trong AngularJS
Các biểu thức AngularJS được viết bên trong cặp ngoặc xoắn: {{ expression }}.
AngularJS sẽ "output" dữ liệu chính xác tại nơi viết biểu thức:
Ví dụ AngularJS
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/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 theo cách tương tự như chỉ thị ng-bind.
Ví dụ
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/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ẽ được học nhiều hơn về biểu thức ở những bài học sau.
Ứng dụng AngularJS
Các module AngularJS dùng để định nghĩa các ứng dụng AngularJS.
Các controller AngularJS sẽ điều khiển các ứng dụng AngularJS.
Chỉ thị ng-app sẽ định nghĩa ứng dụng, chỉ thị ng-controller sẽ định nghĩa trình điều khiển.
Ví dụ
<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 module AngularJS định nghĩa ứng dụng:
Module AngularJS
var app = angular.module('myApp', []);
Các controller AngularJS điều khiển các ứng dụng:
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Bạn sẽ được học sâu hơn về module và controller ở những bài học sau.
Giải phóng thời gian, khai phóng năng lực