Việc sử dụng AngularJS để lập trình JavaScript dễ dàng hơn bao giờ hết!
Giới thiệu về AngularJS
AngularJS là một thư viện giúp làm việc với JavaScript trở nên dễ dàng hơn, đặc biệt là đối với trang web có tính toán phức tạp và nghiệp vụ phức tạp. Nó rất được ưa chuộng và sử dụng bởi rất nhiều lập trình viên.
AngularJs có hai phiên bản khác nhau, đó là AngularJS 1.x (còn được gọi là AngularJS) và Angular 2,3,4,5,6,7,8 (còn được gọi là Angular). AngularJS dễ học hơn và phù hợp cho người mới bắt đầu.
Các khái niệm cơ bản trong AngularJS
- Application: ứng dụng AngularJS. Trong mỗi trang web, bạn chỉ được tạo một ứng dụng.
- Controller: Mỗi Controller là một khu vực riêng trong trang web, được điều khiển để thực hiện một chức năng cụ thể, thường là hiển thị dữ liệu. Ví dụ: vùng hiển thị danh sách người dùng, vùng thêm người dùng... Mỗi vùng có một controller riêng.
- Scope: là một đối tượng liên kết với một controller, scope chứa các biến của controller.
- Data-binding: là cơ chế tự động đồng bộ dữ liệu giữa model và view. Khi một biến được gán trong hàm xử lý, ngay lập tức nó sẽ hiển thị tại các vị trí được bind.
Cách nhúng AngularJS vào trang
Để nhúng AngularJS vào trang của bạn, bạn có thể nhúng trực tiếp từ đường dẫn trên internet hoặc tải xuống từ trang web chính thức.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>Hoặc bạn có thể tải xuống phiên bản AngularJS từ https://angularjs.org/, sau đó đưa vào trang web và nhúng vào bằng thẻ script.
Ví dụ chương trình AngularJS đầu tiên
Trong một trang web sử dụng AngularJS, bạn cần thực hiện các bước sau:
- Nhúng thư viện AngularJS.
- Tạo ứng dụng AngularJS trong một thẻ nào đó sử dụng chỉ thị
ng-app. - Tạo một controller sử dụng chỉ thị
ng-controller. - Khai báo hàm xử lý cho controller để tính toán dữ liệu.
- Hiển thị các biến/biểu thức trong các thẻ HTML.
a. Coding chương trình AngularJS đầu tiên
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<body ng-app="myapp">
<div ng-controller="myctrl">
<h1>{{welcome}}</h1>
</div>
</body>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", myfunc);
function myfunc($scope) {
$scope.welcome = "Chào mừng đến với AngularJS";
}
</script>b. Giải thích các thành phần
- ng-app: được sử dụng để khai báo ứng dụng AngularJS.
- ng-controller: được sử dụng để khai báo một controller.
- {{welcome}}: hiển thị biến
welcome.
Các chỉ thị cơ bản trong AngularJS
Các chỉ thị của AngularJS thường bắt đầu bằng ng-, được sử dụng trong thuộc tính của các thẻ HTML. Dưới đây là một số chỉ thị cơ bản:
- ng-app: Khai báo ứng dụng AngularJS.
- ng-controller: Khai báo một controller.
- ng-bind: Buộc dữ liệu vào một thẻ HTML thay cho biểu thức
{{ }}. - ng-if: Thực hiện khi biểu thức có giá trị là
true. - ng-repeat: Lặp qua các phần tử của mảng.
- ng-model: Buộc dữ liệu hai chiều giữa control trong form và biến trong
$scope.
Chỉ thị ng-if
<body ng-app="myapp">
<div ng-controller="myctrl">
<p>Họ tên: {{name}}</p>
<p>Giới tính: <span ng-if="gender==true">Nam</span> <span ng-if="gender==false">Nữ</span></p>
<p>Xếp loại: <span ng-if="mark<5">Yếu/kém</span> <span ng-if="mark>=5 && mark<8">Trung bình</span> <span ng-if="mark>=8">Giỏi</span></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
$scope.name = "Đào Kho Báu";
$scope.mark = 9;
$scope.gender = true;
});
</script>
</body>Chỉ thị ng-repeat
<body ng-app="myapp" ng-controller="myctrl">
<p ng-repeat="sv in students">{{$index}}. {{sv}}</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
$scope.students = ["Tuấn", "Cường", "Hương", "Trang", "Sơn"];
});
</script>
</body>Kiểm tra lỗi trong form
Kiểm tra lỗi trong form là việc kiểm tra dữ liệu trong form xem người dùng đã nhập đúng như mong muốn hay chưa. Bạn có thể sử dụng các thuộc tính của HTML5 hoặc các thuộc tính có sẵn trong AngularJS để kiểm tra lỗi dễ dàng hơn.
Các thuộc tính trong HTML5 giúp kiểm tra dữ liệu
Trong HTML5, bạn có thể sử dụng các thuộc tính sau để kiểm tra dữ liệu trong form:
requiredtype="email"type="number"min: giá trị nhỏ nhấtmax: giá trị lớn nhấtminlength: số ký tự tối thiểumaxlength: số ký tự tối đa
Các thuộc tính trong AngularJS cho biết trạng thái lỗi của control trong form
AngularJS cung cấp nhiều thuộc tính (bắt đầu bằng dấu $) giúp bạn biết được trạng thái lỗi của các control trong form, như $dirty, $pristine...
Ví dụ: Báo lỗi thân thiện
<body ng-app="myapp" ng-controller="f" class="text-center">
<form class="col-5 mx-auto border border-primary rounded p-3" name="frm1">
<div class="form-group">
<label>Họ tên</label>
<input name="hoten" class="form-control" ng-model="ht" required minlength="3">
<span ng-if="frm1.hoten.$invalid" class="text-danger h5">Nhập họ tên từ 3 ký tự trở lên nhé</span>
</div>
<div class="form-group">
<label>Email</label>
<input name="mail" class="form-control" ng-model="email" required type="email">
<span ng-if="frm1.mail.$invalid" class="text-danger h5">Nhập đúng email nhé</span>
</div>
<button class="btn btn-warning" type="submit">Xử lý</button>
</form>
</body>
<script>
var app = angular.module("myapp", []);
app.controller("f", function($scope) {});
</script>Với các ví dụ khác và phần giải thích chi tiết về các thuộc tính và cách kiểm tra lỗi trong form trong AngularJS, bạn có thể tham khảo bài viết gốc tại đây.
Qua bài viết này, bạn đã bước đầu tập tành sử dụng AngularJS và nhận thấy rằng có những thư viện JavaScript đã được tạo ra để giúp bạn lập trình JavaScript dễ dàng và tiết kiệm thời gian hơn. Trong tương lai, bạn còn nhiều điều thú vị khác để khám phá như jQuery, VueJS, ReactJS...
