Angularjs là gì? Tính năng, thành phần và ưu điểm của Angularjs
AngularJS vốn là một ngôn ngữ lập trình phát triển hoàn toàn dựa trên HTML và JavaScript, thuật ngữ này không phải ai cũng hiểu rõ. Vì vậy, bài viết dưới đây Bizfly Cloud sẽ chia sẻ cho bạn đọc hiểu thêm về tính năng, thành phần Angularjs?
Angularjs là gì?
AngularJS là một client side JavaScript MVC framework nhằm mục đích phát triển ứng dụng web động (dynamic web application). AngularJS ban đầu được bắt đầu như một dự án trong Google còn hiện tại, nó là open source framework.
AngularJS hoàn toàn dựa trên HTML và JavaScript, vì vậy chúng ta không cần phải học một cú pháp hoặc một ngôn ngữ nào khác.
AngularJS thay đổi HTML tĩnh thành HTML động. Nó mở rộng khả năng của HTML bằng cách thêm các thuộc tính và thành phần tích hợp, cung cấp khả năng tạo các thuộc tính tùy chỉnh bằng cách sử dụng JavaScript đơn giản.
AngularJS website: https://angularjs.org
Trong trang web angularjs.org ở trên, bạn có thể tải xuống thư viện AngularJS 1 bằng cách nhấp vào liên kết Download AngularJS. AngularJS 2 hiện đang là phiên bản beta. Hướng dẫn này sử dụng AngularJS 1.
Ví dụ về AngularJS
Sau đây là một ví dụ AngularJS đơn giản: thay đổi label bằng cách nhập vào textbox.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
</script>
</head>
<body ng-app>
Enter Your Name: <input type="text" ng-model="name" /> <br />
Hello <label ng-bind="name"></label>
</body>
</html>
Kết quả:
Enter Your Name:
Hello
Ví dụ trên là mã HTML đơn giản với một vài lệnh (thuộc tính) của AngularJS như ng-app, ng-model và ng-bind.
Nhiệm vụ tương tự có thể được thực hiện bằng cách sử dụng jQuery với nhiều dòng mã hơn, như sau.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
</head>
<body>
Enter Your Name: <input type="text" id="txtName" /> <br />
Hello <label id="lblName"></label>
<script>
$(document).ready( function () {
$('#txtName').keyup(function () {
$('#lblName').text($('#txtName').val());
});
});
</script>
</body>
</html>
Kết quả:
Enter Your Name:
Hello
Có thể thấy AngularJS bao gồm các thuộc tính tích hợp sử dụng giúp chúng ta có thể tăng năng suất làm việc lên khá nhiều.
>> Tham khảo thêm: jQuery là gì? Các ví dụ minh họa
Ưu điểm của AngularJS
Open source JavaScript MVC framework.
Được hỗ trợ bởi Google.
Không cần phải học scripting language khác, chỉ cần JavaScript và HTML thuần túy.
Hỗ trợ phân tách các mối quan tâm bằng cách sử dụng mẫu thiết kế MVC.
Các thuộc tính tích hợp (chỉ thị) làm cho HTML động.
Dễ dàng mở rộng và tùy chỉnh.
Hỗ trợ ứng dụng trang đơn (Single Page Application).
Sử dụng Dependency Injection.
Dễ dàng thực hiện unit test.
REST thân thiện.
Các thành phần của AngularJS
AngularJS framework có thể được chia thành ba phần chính sau:
ng-app: directive này định nghĩa và liên kết một ứng dụng AngularJS tới HTML.
ng-model: directive này gắn kết giá trị của dữ liệu ứng dụng AngularJS đến các điều khiển đầu vào HTML.
ng-bind: directive này gắn kết dữ liệu ứng dụng AngularJS đến các thẻ HTML.
Các tính năng cốt lõi của AngularJS
Data-binding: Nó tự động đồng bộ hóa dữ liệu giữa thành phần model và view.
Scope: Là những đối tượng hướng đến model, nó hoạt động như là cầu nối giữa controller và view.
Controller: Đây là những tính năng của AngularJS mà được giới hạn tới một scope cụ thể.
Service: AngularJS hoạt động với một vài dịch vụ (service) có sẵn , ví dụ $http để tạo XMLHttpRequests. Nó là các singleton object mà được khởi tạo duy nhất một lần trong ứng dụng.
Filter: Nó lựa chọn (hay là lọc) các tập con từ tập item trong các mảng và trả về các mảng mới.
Directive: Directive là các marker trong các phần tử DOM (như các phần tử, thuộc tính, css và nhiều hơn thế). Nó có thể dùng để tạo các thẻ HTML riêng phục vụ những mục đích riêng. AngularJS có những directive có sẵn như ngBind, ngModel…
Template:Là các rendered view với các thông tin từ controller và model. Nó có thể được sử dụng trong các file riêng rẽ (ví dụ như index.jsp) hoặc nhiều view với một trang sử dụng "partials".
Routing: Là khái niệm của sự chuyển dịch qua lại các view.
Model View Whatever: MVC là một mô hình thiết kế để phân chia các ứng dụng thành nhiều phần khác nhau (gọi là Model, View và Controller), một phần sử dụng với một nhiệm vụ nhất định. AngularJS không triển khai MVC theo cách truyền thống, mà gắn liền hơn với Model-View-ViewModel. Nhóm phát triển AngularJS đã đặt tên vui cho mô hình này là Model View Whatever.
Deep Linking: Cho phép bạn mã hóa trạng thái các ứng dụng trên địa chỉ URL để nó có thể được bookmark. Các ứng dụng có thể được phục hồi lại từ các địa chỉ URL với cùng một trạng thái.
Dependency Injection: AngularJS có sẵn một hệ thống con dependency injection để giúp các lập trình viên tạo ra các ứng dụng dễ phát triển, dễ hiểu và kiểm tra.
>> Tìm hiểu thêm: Dependency injection là gì? 3 điều cần biết về DI
Thiết lập AngularJS Development Environment
Chúng ta cần các công cụ sau để thiết lập môi trường phát triển cho AngularJS:
- AngularJS Library
- Editor/IDE
- Browser
- Web server
AngularJS Library
Để tải xuống thư viện AngularJS, hãy truy cập angularjs.org -> nhấp vào nút tải xuống, bạn sẽ thấy xuất hiện cửa sổ sau.
Chọn phiên bản bắt buộc và nhấp vào nút tải xuống trong cửa sổ bật lên.
Editor/IDE
AngularJS là mã HTML và JavaScript. Vì vậy, bạn có thể cài đặt bất kỳ editor/IDE nào theo mong muốn.
Các editor sau đây được khuyên dùng:
- Aptana Studio 3
- Ultra Edit
- Eclipse
- Visual Studio
Online Editor
Bạn cũng có thể sử dụng các online editer sau đây cho mục đích nghiên cứu của mình.
plnkr.co
jsbin.com
Web server
Sử dụng bất kỳ web server nào như IIS, apache,... cho mục đích phát triển.
>> Xem thêm: Tất tật kiến thức cơ bản về Web Server bạn phải biết
Trình duyệt
Bạn có thể cài đặt bất kỳ trình duyệt nào theo nhu cầu, vì AngularJS hỗ trợ tương thích trình duyệt chéo. Tuy nhiên, nên sử dụng Google Chrome trong quá trình phát triển ứng dụng.
Angular Seed
Sử dụng dự án Angular seed để bắt đầu ứng dụng AngularJS nhanh chóng. Angular-seed là khung xương sống cho AngularJS web application điển hình. Bạn có thể sử dụng nó để nhanh chóng khởi động các dự án angular webapp và môi trường phát triển cho dự án.
Tải xuống angular-seed từ GitHub (https://github.com/angular/angular-seed).
Hãy thiết lập dự án Angular trong Visual Studio 2013 cho web.
Cài đặt AngularJS Project trong Visual Studio
Bạn có thể tạo ứng dụng AngularJS trong bất kỳ phiên bản Visual Studio nào. Tại đây, chúng ta sẽ sử dụng Visual Studio 2013 cho web.
Đầu tiên, tạo dự án mới bằng cách nhấp vào liên kết New Project trên trang bắt đầu. Sau đó New Project dialog box sẽ mở ra như dưới đây.
Chọn Web ở khung bên trái và ASP.NET Web Application ở khung giữa rồi bấm OK.
Trong hộp thoại New ASP.NET Project, chọn Empty template rồi bấm OK.
Điều này sẽ tạo ra một dự án trang web trống trong Visual Studio.
Bây giờ, cài đặt AngularJS library từ trình quản lý gói NuGet. Nhấp chuột phải vào dự án trong Solution Explorer và chọn Manage NuGet Packages…
Tìm kiếm "angular" trong hộp thoại Manage NuGet Packages và cài đặt AngularJS Core.
Điều này sẽ thêm các tệp AngularJS vào Scripts folder như angular.js, angular.min.js và angular-mocks.js, như sau.
Bây giờ, bạn có thể bắt đầu viết ứng dụng web AngularJS.
Theo tutorialsteacher.com
>> Có thể bạn quan tâm: Tìm hiểu Node js là gì? Các tính năng và ứng dụng Node js nổi bật
