Angular JS 1 cho người mới bắt đầu (phần 1)
Bài đăng này đã không được cập nhật trong 6 năm
Angular JS là gì?
Angular là framework javascript mạnh mẽ. Angular tăng cường HTML cho các ứng dụng web. Nó có chức năng để giảm bớt quá trình phát triển ứng dụng web. Từ nhiều năm trước,khi HTML mới bắt đầu, nó được dự định để xây dựng trang web hoặc có thể nói đó là một cách để hiển thị tài liệu tĩnh, không để xây dựng một ứng dụng web động. Bây giờ, hãy tưởng tượng nếu HTML lần đầu tiên được dùng để xây dựng các ứng dụng web động, đó là Angular. Angular là những gì HTML sẽ có được nếu nó được thiết kế để xây dựng các ứng dụng web . Lời giải thích này có thể khó hiểu nhưng khi đọc tiếp về sau bạn sẽ ngạc nhiên với những gì Angular có thể làm và sẽ hiểu ý nghĩa này
Tại sao phải sử dụng AngularJs?
Angular được đưa ra bởi Google. Tại sao điều này quan trọng để biết ? Như bạn có thể đoán, Google đã phát triển các tài năng và thiên tài như đội bóng của họ . Họ thực sự biết những tinh tế của trang web và những sự phát triển ứng dụng web . Ít nhất là thực tế này có thể cung cấp cho người dùng đảm bảo Angular xuất phát từ người chúng ta có thể tin tưởng . Ngoài ra, nếu bạn đã từng sử dụng sản phẩm của Google như Gmail hay Google Plus, bạn sẽ không ngạc nhiên với sự tương tác của chúng và cả ajax gửi liên tục mọi nơi mà không phải làm mới toàn bộ trang web và để sử dụng Angular kiến thức chủ yếu cần phải biết trước là Javascript.
AngularJs được lập trình như thế nào?
Cài đặt AngularJs
Tải AngularJS
Truy cập vào trang web https://angularjs.org và tải về bản angularjs mới nhất. Bản hiện mới nhất hiện tại là 1.6.4.
Chèn Angular vào ứng dụng.
Theo cách này thì cần phải download angularjs về máy và nhúng trực tiếp vào ứng dụng.
<script src="angular.min.js"></script>
Ngoài cách trên ra bạn cũng có thể sử dụng phiên bản nén của AngularJS có sẵn trên server của Google. Sử dụng cách này có 2 điều lợi là tiết kiệm băng thông cho trang web của bạn và AngularJS sẽ được load nhanh hơn nếu máy của người dùng đã cache AngularJS.
- Nhưng cách này không hoạt động nếu không được kết nối mạng.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
Ví dụ đơn giản
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Ví dụ AngularJS </title>
<script src="js/angular.js"></script>
</head>
<body>
<p>Hello {{'World' + '!'}}</p>
</body>
</html>
Các thành phần của AngularJs
Angular Template
Đôi lúc trong quá trình xây dựng hệ thống, file HTML trở nên phức tạp để giải quyết vấn đề này ta cần chia thành nhiều phần khác nhau, AngularJS cung cấp cho chúng ta một giải pháp hữu ích đó là template.
- Angular template là 1 đặc tả dạng declarative (khai báo), cùng với thông tin từ Model & Controller, trở thành rendered View mà User thấy trên trình duyệt. Nó là static DOM, chứa HTML, CSS, và các thành phần, thuộc tính riêng của Angular. Các thành phần Angular và các thuộc tính giúp Angular thêm các hành vi và biến đổi template DOM thành dynamic view DOM.
- Nói 1 cách đơn giản nhất thì template trong AngularJS là “HTML voi81 additional markup”. Trong Angular, chúng ta có 2 cách để tạo một template. Dùng file ngoài: Chúng ta có thể dùng thêm một file html bên ngoài để làm template cho file chính, ví dụ: message.html
<h3>Hello, {{name}}!</h3>
Dùng script Chúng ta có thể tích hợp thẳng template vào file hiện hành thông qua thẻ script với type là text/ng-template
<script type="text/ng-template" id="message.html">
<h3>Hello, {{name}}!</h3>
</script>
Modules
Trong các ứng dụng thực tế, việc phân chia ứng dụng thành các thành phần khác nhau là điều cần thiết. Dưới đây là lợi ích của việc chia nhỏ ứng dụng:
- Dễ dàng hơn cho việc quản lý và khai báo ứng dụng cũng như kiểm tra lại sau này
- Khả năng tái sử dụng cũng như tận dụng các 3rd modules
- Nạp từng phần ứng dụng sẽ nhanh hơn là buộc phải nạp toàn bộ ứng dụng vào rồi mới chạy. Trong AngularJS, module được hỗ trợ trong khai báo ng-app bên cạnh khai báo nó trong mã nguồn script, dưới đây là một template chuẩn của angular sử dụng modules:
<!doctype html>
<html ng-app="myModule">
<head>
<title>Module trong AngularJS </title>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<p>Ví dụ đơn giản về module p>
</body>
</html>
Directives
Những thứ như thuộc tính, class, tên ... của 1 DOM element gọi chung là directive. AngularJS sẽ dựa vào chúng để attach các chỉ thị hoặc các sự kiện tới DOM element đó. Bản thân AngularJS đã có rất nhiều các directive : ng-bind, ng-model, ng-click, ng-controller...Việc dùng directive sẽ giảm thiểu được số lượng thẻ HTML , code HTML nhìn sẽ gọn gàng và sáng sủa hơn. AngularJS cung cấp cho chúng ta 3 loại directive đó là :
- Directive dạng element ( là 1 thẻ HTML ) viết tắt là E.
<my-directive></my-directive>
- Directive dạng attribute ( thuộc tính của 1 thẻ HTML ) viết tắt là A, dạng này là mặc định.
<div my-directive></div>
- Directive dạng class( class CSS ) viết tắt là C.
<div class="my-directive"></div>
Ví dụ:
<!doctype html>
<html ng-app>
<head>
<title>Ví dụ AngularJS </title>
<script src="js/angular.js"></script>
</head>
<body>
<div ng-controller="myController">
<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
</div>
</body>
</html>
AngularJS
var app = angular.module('demoApp', []);
app.controller('myController', function($scope) {
$scope.customer = {
name: 'Quoc',
address: 'Le Duan, Da Nang'
};
})
.directive('myDirective', function() {
return {
restrict : 'C',
template: 'Name: {{customer.name}}
Address: {{customer.address}}'
};
});
Trong myCtrl khai báo thông tin customer với name và địa chỉ. Trong myDirective sẽ return ra 1 object còn việc hiển thị hay đổ dữ liệu vào directive như nào là việc của Angular chúng ta không cần quan tâm. Lưu ý: Tên directive phải khai báo dạng camelCase còn khi gọi thì có thể dùng dấu - để ngăn cách giữa các từ hoặc để nguyên như khi khai báo cũng được
- restrict : loại directive mặc định là E(element), C là class, A là attribute
- template: Nội dung của directive
- templateUrl: Liên kết tới 1 file template bên ngoài. Template này chứa nội dung của directive.
Name: {{customer.name}} Address: {{customer.address}}
- Nếu restrict:"A" thì <my-directive></my-directive> sẽ có dữ liệu
- Nếu restrict:"C" thì sẽ có dữ liệu
- Nếu restrict:"E" thì sẽ có dữ liệu Khi thay đổi restrict cần lưu ý infect element để xem nó đổ dữ liệu vào thẻ nào.
Ở phần 2 mình sẽ nói thêm về các thành phần còn lại của angularjs nhé!
All rights reserved
