Giới thiệu về Framwork AngularJS
Bài đăng này đã không được cập nhật trong 9 năm
I. Giới thiệu
- AngularJS là một Framwork phát triển dựa trên Javascript để tạo các ứng dụng web phong phú
- AngularJS thường dùng để phát triển frontend (giao diện khách hàng) thông qua các API để gọi data, nó sử dụng mô hình MVC rất mạnh mẽ
- AngularJS tự động fix với các trình duyệt khác nhau nên bạn không cần phải lo vấn đề tương thích trình duyệt
Đó là các tính năng cơ bản của AngularJS
Sau đây mình xin giới thiệu các thuộc tính cơ bản mà AngularJS hay sử dụng
II. Các tính năng của AngularJS
1. Controller trong AngularJS
- Mỗi controller trong Angular dùng để thực thi một nhiệm vụ nhất định và nó thuộc phạm vi của một ứng dụng (ng-app="myApp")
- ng-app là nơi bạn muốn đánh dấu cho AngularJS biết ứng dụng sẽ bắt đầu từ đâu, thường thì nó nằm trong body tag, ngoài ra bạn cũng có thể đặt nó ở tag div cũng không sao.
- Xét 2 ví dụ bên dưới:
<div ng-app="myApp">
<div 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>
</div>
+) Khai báo 1 app là ng-app="myApp" và tạo 1 controller bên trong ng-app với tên ng-controller="myCtrl". Như vậy controller myCtrl đã nằm bên trong ng-app.
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Do";
$scope.lastName= "Vo Van";
});
</script>
- Controller thuộc một ứng dụng rỗng (ng-app="")
<div ng-app="">
<div ng-controller="myCtrl">
<h2>Hi, {{data.name}}</h2>
</div>
</div>
function myCtrl($scope){
$scope.data = {
name : 'Vo Van Do',
};
}
+) Ở trường hợp này ta sẽ xây dựng một hàm trong javascript có tên gọi giống như tên của ta khai báo trong thuộc tính app-controller.
Lưu ý: là tên tham số truyền vào hàm myCtrl bắt buộc phải tên là $scope
2. scope và rootScope trong AngularJS
- $scope và $rootScope là cầu nối giữa controller và view
1. scope
<div ng-controller="MyController">
Input name: <input type="text" value="" ng-model="username">
<button ng-click='sayHello()'>Notification!</button>
{{greeting}}
</div>
<script>
angular.module('myapp', [])
.controller('MyController', ['$scope', function($scope)
{
$scope.sayHello = function() {
$scope.greeting = 'Hi ' + $scope.username + '!';
};
}]);
</script>
+) Ở trên khai báo một action ng-click ="sayHello()" có ý nghĩa rằng khi click vào input đó thì nó sẽ gọi đến hàm sayHello() mà ta định nghĩa trong $scope ở controller. +) Trong hàm sayHello() có nhiệm vụ là đổi giá trị cho gretting, điều này có nghĩa là nó đang gán lại giá trị cho view ở biểu thức {{greeting}}
2. rootScope
Xét đoạn mã script sau:
<script>
angular.module("myapp", [])
.controller('GreetController', function ($scope, $rootScope){
$rootScope.name = 'Vo Van Do';
}).controller('ListController', function ($scope){});
</script>
+) Sự khác biệt chính là ở đoạn mã JS Controller thứ nhất có thêm tham số $rootScope, và ở đoạn Controller thứ hai thì không xử lý gì cả. +) Khi chạy đoạn mã trên nó in ra kết quả trên màn hình:
Vo Van Do
Vo Van Do
+) Dõ ràng đoạn code trên mình không truyền giá trị cho $scope ở cả 2 controller mà bên view vẫn có? Đó là vì biến $rootScope. Điều này có nghĩa là khi ứng dụng được chạy thì sẽ có một $rootScope được tự động tạo, $rootScope là bậc cao nhất nên sẽ bao quát hết các $scope bên trong nó, điêu này không giống với $scope là chỉ ảnh hưởng trong phạm vi của controller.
3. ng-model trong AngularJS
- ng-model hay còn gọi là ngModel là một Directive dùng để liên kết dữ liệu với client (hehehe)
- Nhiệm vụ của ng-model gồm có:
- Liên kết View trong model và một số directives khác như input, textarea hoặc select.
- Cung cấp các thao thác validate dữ liệu như kiểm tra kiểu dữ liệu có phải là số, là email, ...
- Kiểm soát thông tin từ client nhập vào có hợp lệ hay không và xuất thông báo lỗi
- Thiết lập các css class trong thẻ HTML (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched) và các hiệu ứng thông báo
- ng-model sẽ cố gắng liên kết với các giá trị được khai báo (ví dụ {{name}}), nếu không tồn tại thì nó sẽ được tạo ngầm và lưu vào Scope.
<html>
<head>
<title>Angular JS Model</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-app="MyForm">
<form name="testForm" ng-controller="ExampleController">
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
</form>
</body>
</html>
<script>
angular.module('MyForm', [])
.controller('ExampleController', ['$scope', function($scope) {
}]);
</script>
<style>
.my-input {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
background: transparent;
}
.my-input.ng-invalid {
color:white;
background: red;
}
</style>
+) Ở ví dụ trên bạn nhập số vào ô text sẽ ko bôi đỏ ô, nếu bạn nhập không phải là số thì ô text sẽ bị bôi đỏ.
+) Trong form HTML mình tạo một ng-model = "val", một pattern ng-pattern="/^\d+$/". khi chạy lên thì ng-model thấy có khai báo pattern nên dữ liệu nhập vào sẽ được validate bởi pattern này.
4. ng-bind - ng-bind-html - ng-bind-template trong AngularJS
1. ng-bind
<body ng-app="myApp">
<div ng-controller="bindingController">
<form name="userForm">
<h5>Input name:</h5>
<input type="text" name="userName" ng-model="name"/><br />
<h5>Result:</h5><span>{{name}}</span>
</form>
</div>
</body>
<script language="javascript">
angular.module('myApp', [])
.controller('bindingController', ['$scope', function($scope) {}]);
</script>
+) ng-bind sẽ được biên dịch ở cấp 0, nghĩa là cấp đầu tiên của ứng dung, nên sử dụng ng-bind trong trường hợp ta kết hợp với ng-model và ng-model-options +) Trong thực tế chúng ta không nên sử dụng cơ chế ng-bind một cách trực tiếp, thay vào đó sử dụng quy tắc mở hai cặp dấu ngoặc nhọn {{key}}.
2. ng-bind-html
<body ng-app="myApp">
<div ng-controller="ngCtrl">
<input type="text" ng-model="myHTML"/>
<p ng-bind-html="myHTML"></p>
</div>
</body>
<script language="javascript">
angular.module('myApp', ['ngSanitize'])
.controller('ngCtrl', ['$scope', function($scope) {}]);
</script>
+) Directive ng-bind-html sử dụng thêm một thư viện phụ có tên là sanitize nên bắt buộc a phải thêm nó vào thì chương trình mới chạy.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.js"></script>. (hoho)
+) Phải khai báo cho ứng dụng biết có sử dụng thư viện phụ này bằng cách thêm tên của nó (ngSanitize) vào trong danh sách các object có sử dụng ở hàm angular.module (cú pháp là angular.module('tenModule', [list_object]))
3. ng-bind-template
<body ng-app="myApp">
<div ng-controller="ngCtrl">
Name <input type="text" ng-model="name"><br>
Age: <input type="text" ng-model="age"><br>
<pre ng-bind-template="{{name}} {{age}}!"></pre>
</div>
</body>
<script>
angular.module('myApp', [])
.controller('ngCtrl', ['$scope', function($scope) {}]);
</script>
+) ng-bind-template sẽ xác định nội dung cần replace thông qua cú pháp biểu thức trong angular {{tenkey}}, không giống như ngBind, ngBindTemplate có thể chứa nhiều biểu thức trong nó, ví dụ như ng-bind-template="{{header}}{{foooter}}"
+) Ng-bind-template này rất cần thiết với các thẻ mà nội dung bên trong nó không thẻ chứa các thẻ HTML như (title, option, meta).
5. Directive ng-form trong AngularJS
- ng-form hay còn gọi là ngForm trong AngularJS có nhiệm vụ liên kết dữ liệu khi Form có giá trị là đúng (Valid). Trong Javascript bình thường thì để xử lý sự kiện submit ta sẽ dùng sụ kiện có sẵn của Form đó là onsubmit="function", trong AngularJS cũng vậy nhưng cú pháp nó hơi khác đó là ta sẽ dùng ng-submit="function()"
- với AngularJS thì mọi thứ được lưu trong đối tượng $scope nên function() bên trong ng-submit đó cũng phải là một hàm của $scope nhé các bạn.
Xét ví dụ:
<body ng-app="myApp">
<form ng-submit="submit()" ng-controller="ngCtrl">
Input:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Add" /> <br/>
List Result: <pre>list={{list}}</pre>
</form>
</body>
<script>
angular.module('myApp', [])
.controller('ngCtrl', ['$scope', function($scope) {
$scope.list = [];
// Click vào button Add thì Submit function này
$scope.submit = function() {
if ($scope.text) {
// nếu người dùng có nhập nội dung thì lưu nó vào list
$scope.list.push(this.text);
$scope.text = '';
}
};
}]);
</script>
+) Các bạn nhập nội dung và nhấn Enter hoặc click vào button Add thì lập tức dữ liệu được lưu vào danh sách list.
+) Ở đây trong đoạn script $scope.list.push(this.text); nó sẽ lưu tất cả các kết quả vào 1 list các dữ liệu mà bạn submit lên từ form
Trên đấy là mình giới thiệu qua các đặc tính cơ bản của AngularJS, chúc các bạn có 1 chút kiến thức về AngularJS qua bài viết này (hoho). Bài sau mình sẽ nói rõ hơi về AngularJS nhé !!!!!!!!!
III. Tổng kết
1. Ưu điển
- Angular cho phép tạo ra các ứng dụng một cách đơn giản, code sạch
- Angular sử dụng data bind giống .NET với tính năng liên kết với HTML nên giúp người dùng cảm thấy dễ chịu.
- Angular đang ở giai đoạn thử nghiệm
- Angular có thể chạy trên hầu hết các trình duyệt điện thoại thông minh.
2. Nhược điểm
- Được phát triển từ javascript nên nó không an toàn, phía máy chủ phải thường xuyên xác nhận quyền
- Nếu người dùng vô hiệu hóa javascript thì coi như đi tong
Ngồn tham khảo:
All rights reserved
