Hướng dẫn AngularJS
AngularJS mở rộng HTML với các thuộc tính mới.
AngularJS hoàn hảo cho các Ứng dụng Trang Đơn (SPA).
AngularJS rất dễ học.Bắt đầu học AngularJS ngay bây giờ »
Hướng dẫn này
Hướng dẫn này được thiết kế đặc biệt để giúp bạn học AngularJS một cách nhanh chóng và hiệu quả nhất có thể.
Đầu tiên, bạn sẽ học những điều cơ bản về AngularJS: chỉ thị, biểu thức, bộ lọc, mô-đun và bộ điều khiển.
Sau đó, bạn sẽ tìm hiểu mọi thứ khác mà bạn cần biết về AngularJS:
Sự kiện, DOM, Biểu mẫu, Đầu vào, Xác thực, Http, v.v.
Hãy tự mình thử các ví dụ trong mỗi chương
Trong mỗi chương, bạn có thể chỉnh sửa các ví dụ trực tuyến và nhấp vào một nút để xem kết quả.
Ví dụ về AngularJS
<!DOCTYPE html>
<html lang=”en-US”>
<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>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>Hãy tự mình thử »
Những gì bạn nên biết
Trước khi học AngularJS, bạn nên hiểu cơ bản về:
Lịch sử AngularJS
AngularJS phiên bản 1.0 được phát hành vào năm 2012.
Miško Hevery, một nhân viên của Google, bắt đầu làm việc với AngularJS vào năm 2009.
Ý tưởng này đã trở nên rất tốt và dự án hiện đã được hỗ trợ chính thức bởi Google.
Ví dụ về AngularJS
Hướng dẫn AngularJS của W3Schools chứa rất nhiều ví dụ về AngularJS!
Tham khảo AngularJS
Tham chiếu AngularJS chứa tất cả các lệnh và bộ lọc được sử dụng trong hướng dẫn này.
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 .
Các ng ứng dụng chỉ thị định nghĩa một ứng dụng AngularJS.
Các ng mô hình chỉ thị liên kết với các giá trị của các điều khiển HTML (đầu vào, lựa chọn, textarea) để dữ liệu ứng dụng.
Các ng-ràng buộc ứng dụng dữ liệu với phím tắt chỉ thị 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ử »
Giải thích ví dụ:
AngularJS tự động khởi động khi trang web đã tải xong.
Các ng ứng dụng chỉ thị nói AngularJS rằng <div> yếu tố là “chủ sở hữu” của một AngularJS ứng dụng .
Các ng mô hình chỉ thị liên kết giá trị của lĩnh vực đầu vào cho các biến ứng dụng tên .
Các ng-ràng buộc với phím tắt chỉ thị nội dung của <p> yếu tố để biến ứng dụng tên .
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 .
Các ng-init khởi chỉ thị AngularJS biến ứng dụng.
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ẽ 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>
Hãy tự mình thử »
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>
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 đị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.
Các ng ứng dụng chỉ thị xác định các ứng dụng, ng-điều khiển chỉ thị 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.