Từ các trang mạng xã hội đến chăm sóc sức khỏe, từ các trang thương mại điện tử đến online banking, hàng tỷ người trên khắp thế giới đang hàng ngày sử dụng web và mobile cho mọi công việc. Quả thật, những ứng dụng này đã trở thành một phần không thể thiếu trong cuộc sống của chúng ta, cung cấp những trải nghiệm người dùng và các giao diện mượt mà.
Vậy bạn có từng tự hỏi làm thế nào để có thể phát triển những ứng dụng tuyệt vời đến như vậy ? Công lớn một phần là nhờ có các framework được sử dụng phổ biến như Angular, khiến việc tạo ra các ứng dụng mạnh mẽ và đáng tin cậy trở nên dễ dàng hơn rất nhiều.
Hẳn là bạn sẽ rất tò mò muốn biết về Angular rồi. Vậy sau đây chúng ta sẽ cùng đi tìm hiểu về framework này nhé
Nội dung
1.Angular là gì ?
Angular là một JavaScript framework mã nguồn mở được viết bằng TypeScript được duy trì bởi Google với chức năng chính là phát triển các ứng dụng đơn trang. Angular được ra mắt vào năm 2010, là một framework sử dụng kiến trúc Model-View-Controller (MVC), bao gồm có:
Model: Thành phần nhận các input từ Controller và quản lý dữ liệu. Hãy coi nó là một bộ khung.
View: Thành phần trình bày các dữ liệu nhận được. Hãy coi nó là code HTML.
Controller: Thành phần phản hồi lại với các input và gửi dữ liệu từ input đến Model. Hãy coi nó là Javascript
2.Đôi nét về lịch sử phát triển của Angular
Câu chuyện về Angular bắt đầu vào năm 2009, khi Miško Hevery và Adam Abrons đang làm việc với dự án phụ của họ, một công cụ phát triển web end-to-end cung cấp dịch vu kho lưu trữ JSON trực tuyến và một thư viện phía máy khách để xây dựng các ứng dụng web. Để công bố dự án, họ đã lấy tên miền GetAngular.com.
Trong thời gian đó, Hevery, lúc này đang làm việc tại Google, được phân công vào dự án Google Feedback với 2 lập trình viên khác: họ đã cùng viết hơn 17000 dòng code trong suốt 6 tháng và dần dần gặp phải nhiều vấn đề khó khăn như phình code (code bloat) và các trục trặc về kiểm thử.
Trong hoàn cảnh đó, Hevery đã đề xuất với quản lý của anh để viết lại ứng dụng bằng GetAngular, cá rằng mình có thể hoàn thành trong vòng 2 tuần: quản lý của anh đồng ý; và ngay sau đó Hevery đã thua cuộc, bởi công việc mất đến 3 tuần để hoàn thành thay vì 2. Tuy nhiên, ứng dụng mới chỉ có 1500 dòng code thay vì 17000. Điều này là đủ để Google chú ý đến framework mới, và nó được đặt tên là AngularJs không lâu sau đó.
3.Các phiên bản của Angular
AngularJS
Phiên bản ổn định đầu tiên của AngularJS (Phiên bản 0.9.0, có tên khác là dragon-breath) được ra mắt trên GitHub vào Tháng 10 Năm 2012 với giấy phép của MIT; sau đó là Angular 1.0.0 (tên khác là temporal-domination) ra mắt vào Tháng 6 năm 2012, lúc này thì framework đã trở nên rất nổi tiếng trong cộng đồng phát triển web trên toàn thế giới.
Angular 2
Phiên bản mới của AngularJS, ra mắt vào ngày 14/9/2016 và được biết đến với tên gọi Angular 2, được viết lại toàn bộ từ phiên bản trước, hoàn toàn dựa trên các thông số của ECMAScript version 6 (tên chính thức là ECMAScript 2015). Cũng như phiên bản viết lại ASP.NET Core, “cuộc cách mạng” mang đến một số những thay đổi đột phá ở mức độ kiến trúc, bao gồm: thao tác với các đường ống HTML, vòng đời ứng dụng, quản lý state, port code cũ sang code mới – việc mà trước đây gần như là không thể. Mặc dù vẫn giữ cái tên cũ, phiên bản Angular này là một framework mới tinh, khác biệt hẳn với phiên bản trước.
Angular 4
Ngày 23/3/2017, Google cho ra mắt Angular 4, số 3 bị bỏ qua hoàn toàn để thống nhất tất cả các phiên bản chính của nhiều thành phần Angular được phát triển độc lập đến thời điểm đó - chẳng hạn như Angular Router, mà đã ở phiên bản 3.x. Bắt đầu từ Angular 4, toàn bộ Angular Framework được thống nhất thành hình mẫu MAJOR.MINOR.PATCH.
Angular 5
Ra mắt vào Ngày 1/11/2017, Angular 5 hỗ trợ TypeScript 2.3, có một vài cải thiện về hiệu năng, độ ổn định và một vài chức năng khác.
Angular 6
Ra mắt vào Tháng 4 Năm 2018, Angular 6 chủ yếu là một phiên bản bảo trì, tập trung vào cải thiện độ ổn định của framework và các chuỗi công cụ hơn là bổ sung thêm các tính năng mới. Ngoài ra thì không có thay đổi lớn nào.
Angular 7
Angular 7 ra mắt vào Tháng 10 Năm 2018 và là một phiên bản có nhiều thay đổi lớn. Stephen Fluin – Trưởng nhóm Quan hệ Lập trình viên tại Google và là người phát ngôn của Angular – viết trong blog phát triển chính thức của Angular như sau:
“Đây là một phiên bản lớn trải rộng trên toàn bộ nền tảng, kể cả framework cốt lõi, Angular Material, và CLI đồng bộ với các phiên bản chính. Phiên bản lần này bao gồm các tính năng mới cho chuỗi công cụ và đã tạo điều kiện cho các dự án liên kết lớn.”
Angular 8
Tiếp theo là Angular 8, được ra mắt vào ngày 29/5/2019. Phiên bản này chủ yếu về Ivy-trình biên dịch/runtime mới được trông đợi từ rất lâu của Angular, là một dự án đã kéo dài từ Angular 5, thì đến Angular 8 mới là phiên bản đầu tiên chính thức cung cấp một runtime có tùy chọn sử dụng Ivy – là runtime mặc định kể từ Angular 9.
Angular 9
Ra mắt ngày 6/2/2020, Angular 9 mặc định chuyển tất cả các ứng dụng sang sử dụng trình biên dịch và runtime Ivy. Angular cũng được cập nhật để có thể hoạt động với TypeScript 3.6 và 3.7. Và cùng với đó là hàng trăm bản vá lỗi.
Angular 10
Angular 10, phiên bản lớn gần đây nhất của Angular được ra mắt vào Tháng 6 Năm 2020, chỉ sau Angular 9 4 tháng, bao gồm các tính năng mới: Bổ sung các thành phần Angular Material mới, hỗ trợ TypeScript 3.9, TSLib làm mới sang v2.0 và chức năng tùy chỉnh trình duyệt mặc định mới.
Angular 11
Ra mắt vào ngày 11/11/2020.
Angular 12
Ra mắt vào ngày 12/5/2021.
4.Các concept cơ bản của Angular
Thành phần (Components)
Một thành phần Angular là một class Typescript tương tác với một view. Một view bao gồm một thành phần và một template. Một template là HTML kết hợp vơi cú pháp liên kết dữ liệu của Angular. Một thành phần có các trường (fields) và các phương thức (methods) hỗ trợ cho một view. View sau đó sẽ được cập nhật bằng các đặc tính và phương thức này. Angular tạo và hủy tất cả các thành phần khi người dùng di chuyển trong ứng dụng.
Liên kết dữ liệu (Data binding)
Liên kết dữ liệu là một cải thiện lớn của Angular. Nó cho phép dữ liệu truyền qua giữa các thành phần và template của bạn. Nếu không có liên kết dữ liệu, các lập trình viên Angular sẽ phải viết code để đẩy dữ liệu vào giữa các thành phần và template. Liên kết dữ liệu không giới hạn ở giao tiếp giữa một template cha và thành phần, nó còn có thể chuyển dữ liệu giữa một thành phần cha với một thành phần con. Angular có 4 kiểu liên kết dữ liệu bao gồm:
- Nội suy: Được biểu diễn là {{value}} như hình dưới, nó chèn dữ liệu từ thành phần vào template
- Liên kết đặc tính (property): Tương tự như nội suy nhưng sâu hơn, nó lấy đặc tính trong mảng từ template HTML và đặt giá trị.
- Liên kết sự kiện: Cho phép các sự kiện trong trong HTML/DOM kích hoạt các hàm từ thành phần.
- Liên kết hai chiều: Cho phép liên kết đặc tính và liên kết sự kiện trong cùng một câu lệnh
Modules
Angular có các module được dựng sẵn để hỗ trợ các lập trình viên, các module này được gọi là NgModules. Các NgModule luôn luôn được đánh dấu bằng chú thích @NgModule trong Angular. Một số module thường gặp là Forms Module, RouterModule, HttpClientModule, và module thiết kế tư liệu Angular.
Ý tưởng về module đến từ nguyên tắc trách nhiệm đơn. Trong khi một module có thể làm nhiều việc thì ở cấp độ cao hơn, nó sẽ chỉ tập trung vào một công việc cụ thể như forms hoặc định tuyến. Điều này ngăn việc phình ứng dụng (application bloating) và sắp xếp các ứng dụng thành các khối chức năng ngắn gọn. Lazy loading có thể giúp cải thiện thời gian tải và tốc độ ứng dụng của bạn.
Services
Là từ chỉ chung cho bất kỳ đoạn code nào phục vụ một mục đích cụ thể cho ứng dụng. Đây là một khái niệm khá rộng nhưng sẽ có vài chỉ dẫn mà một service nên tuân theo. Một Angular service phải tái sử dụng được và tuân theo nguyên tắc trách nhiệm đơn đó là làm một công việc và phải làm tốt công việc đó. Khi một thành phần làm việc với view thì một service sẽ xử lý tất cả những gì không liên quan đến view đó.
Chẳng hạn như những công việc lặp lại bao gồm logic nghiệp vụ, lấy dữ liệu hay xác thực input, những công việc thiết yếu cho ứng dụng nhưng không liên quan đến thị giác sẽ thuộc về phần service. Bằng cách định nghĩa logic này trong service, bạn có thể sẵn sàng inject nó vào bất cứ đâu trong ứng dụng, cung cấp cho bạn khả năng tái sử dụng vô hạn. Tuy nhiên Angular cũng không bắt buộc bạn phải thực hiện bất kỳ điều gì kể trên. Một service phức tạp không phải là hiếm thấy, nhưng một service tốt sẽ tuân theo các quy tắc trên.
5.Các tính năng nổi bật của Angular
Là một phần thiết yếu của hệ sinh thái Javascript, Angular là công cụ lập trình web front-end phổ biến nhất hiện nay. Mỗi phiên bản Angular đều có rất nhiều tính năng và được thường xuyên nâng cấp để trở nên thông minh hơn.
Chúng ta hãy cùng tìm hiểu về các tính năng nổi bật của Angular:
Các tính năng chung
- Liên nền tảng (Cross-platform): Với Angular bạn có thể phát triển các ứng dụng web cấp tiến (Progressive Web Applications – PWA). PWA cũng cung cấp trải nghiệm như ứng dụng (app-like) cho người dùng sử dụng các công nghệ web tân tiến. Tùy theo nhu cầu thì bạn có thể triển khai một ứng dụng gốc cũng như cấp tiến. Bộ công cụ phát triển phần mềm kết hợp được gọi là Ionic có thể đưa ứng dụng của bạn lên app store hoặc triển khai nó lên mobile web như một PWA.Bạn cũng có thể phát triển ứng dụng máy tính bằng Angular.
- Tốc độ cao và tối ưu hiệu năng: Angular định nghĩa lại máy ảo JavaScipt hiện đại bằng cách chuyển các template thành code. Bởi vây, code viểt tay của bạn cũng có thể được tận dụng trong framework này. Điều tuyệt vời nhất của Angular đó là bạn có thể render code thành HTML & CSS và có cái nhìn đầu tiên về ứng dụng trên các nền tảng khác như Node.js, .NET, PHP,..v..v..
Thời gian tải của Angular nhanh hơn bất kỳ front-end framework nào ở thời điểm hiện tại. Angular tải cực kì nhanh với bất kỳ router thành phần mới nào. Hơn nữa, code sẽ tự động được chia ra đối với mỗi khi người dùng load và yêu cầu render.
- Các ứng dụng Angular dành cho mọi người: Angular là một nền tảng front-end kì diệu không chỉ cho phép lập trình các ứng dụng ấn tượng, mà nó còn có thể tạo ra các hoạt ảnh cao cấp để nâng cao trải nghiệm người dùng, Các API của Angular linh hoạt đến mức các lập trình viên có thể phát triển các bố trí giao diện phức tạp cũng như các hoạt ảnh với sử dụng ít code.
Hơn nữa, với các framework kiểm thử đơn vị thông minh như Jasmine và Karma, bạn có thể sửa lại code bất kỳ lúc nào, Angular có hơn 11 module kiểm thử được tích hợp sẵn để đảm bảo code không dính lỗi.
>>> xem thêm: Khóa học php
Các tính năng kỹ thuật
- Kiến trúc MVC: Kiến trúc này đã được đề cập đến trong phần đầu của bài viết. Dữ liệu của ứng dụng sẽ được quản lý bởi Model, View quản lý phần hiển thị dữ liệu. Controller sẽ đóng vai trò là bộ nối giữa lớp View và lớp Model. Thông thường trong kiến trúc MVC, bạn có thể chia nhỏ ứng dụng một cách tùy ý và viết code để nối nó lại với nhau. Tuy nhiên trong Angular, lập trình viên chỉ cần chia nhỏ ứng dụng thành các phần của MVC và framework sẽ tự làm những công việc còn lại. Điều này sẽ tiết kiệm một cách đáng kể thời gian code.
- Liên kết dữ liệu hai chiều: Một trong những tính năng hiệu quả nhất của Angular đó là hệ thống liên kết dữ liệu hai chiều. Lớp View thể hiện chính xác lớp Model và hai lớp này sẽ phối hợp đồng bộ với nhau một cách hoàn hảo. Nếu bạn thay đổi bất kỳ cái gì trong Model, người dùng có thể thấy rõ thay đổi đó trong View.
- Framework ít code: Angular là một framework ít code so với các công nghệ front-end khác. Bạn không cần phải viết code riêng để kết nối các lớp MVC. Và bạn cũng không cần đến các code cụ thể để xem một cách thủ công. Các chỉ thị được tách biệt với code ứng dụng. Tất cả sẽ tiết kiệm công sức và thời gian cần thiết để phát triển ứng dụng.
- Angular CLI (Giao diện dòng lệnh): Angular CLI tuân theo các nguyên tắc làm việc tổt nhất của lập trình front-end với các tính năng hỗ trợ SASS/SCSS (Chương trình tiền xử lý CSS - CSS preprocessor) và định tuyến. Hơn nữa Angular CLI thông thường như ng-new hay ng-add hỗ trợ các lập trình viên dễ dàng khám phá các tính năng có sẵn. Các phần cơ bản của CLI bao gồm:
-
ng New: Là lệnh đầu tiên và cơ bản nhất. Bạn cũng có thể tạo workplace mới với lệnh này.
-
ng Generate: Cho phép bạn tạo các thành phần, service, tuyến, và các đường ống mới. Bạn cũng có thể tạo các test shell đơn giản với Ng Generate.
-
ng Serve: Cho phép bạn kiểm thử ứng dụng Angular trên một máy chủ cục bộ.
-
Test, Lint: Hoàn thiện code của bạn với và các phép kiểm thử đơn vị và end-to-end. Và ng lint cũng giúp chạy các chương trình để phân tích code và tìm ra các lỗi tiềm ẩn.
- CDK và Angular Material: Angular nâng cấp Bộ công cụ phát triển thành phần (Component Development Kit – CDK) theo mỗi phiên bản mới. Làm mới (Refreshing) và cuộn ảo (virtual scrolling) là các tính năng tiêu biểu nhất của Angular CDK. Nó cũng hỗ trợ cho việc tải động cũng như dỡ tải DOM để tạo ra một danh sách lớn các dữ liệu hiệu năng cao. Bạn có thể import ScrollingModule hay DragDropModule vào ứng dụng.
Một số chức năng chính của DragDropModule bao gồm sắp xếp trong một danh sách, kéo thả tự do, xem trước, và các phần giữ chỗ. Thêm nữa, nó còn có thể sắp xếp lại thứ tự danh sách (moveItemInArray) và chuyển các vật thể qua lại giữa các danh sách (transferArrayItem).
- Cuộn ảo: Tính năng cuộn ảo của Angular giúp code phản ứng với các sự kiện cuộn. Ngoài việc tải và dỡ tải các phần tử DOM có thể thấy được, cuộn ảo còn cung cấp chức năng giả lập vật thể.
- TypeScript: Với TypeScript, Angular cung cấp một trải nghiệm liền mạch cho các lập trình viên. Nó rất hiệu quả trong việc phát hiện lỗi. TypeScript cũng tự động gắn các thiết lập của tệp root dể biên dịch dễ dàng hơn. So với JavaScript, TypeScript có các kiểu liệt kê, giao diện, các lớp generic, các kiểu kết hợp, các kiểu union/intersection, các bộ điều chỉnh truy cập đặc sắc hơn.
- Inject các phần phụ thuộc: Chức năng inject phần phụ thuộc có sẵn sẽ giảm tải công việc lập trình ứng dụng đi rất nhiều. Nó giúp chúng ta có thể nhúng service vào các component hoặc các service với nhau tùy theo nhu cầu của lập trình viên và của ứng dụng.
- Các chỉ thị ( Directives): Chỉ thị là tính năng mang tính thử thách nhất của Angular. Bạn có thể tạo ra các thẻ HTML tùy biến với vai trò là các widget tùy biến với các chỉ thị. Bạn cũng có thể tùy ý thao tác với các thuộc tính DOM bằng các chỉ thị.
- Trình biên dịch/runtime Ivy: Là trình biên dịch/run time và render engine thế hệ mới của Angular. Kể từ Angular 9 trở đi, Ivy trở thành trình biên dịch mặc định cho tất cả các ứng dụng. Ivy cung cấp một loạt các cải thiện về tính năng và hiệu năng như sau:
-
Kích cỡ bunlde nhỏ hơn
-
Kiểm thử nhanh hơn
-
Gỡ lỗi tốt hơn
-
Cải thiện liên kết lớp CSS và liên kết style
-
Cải thiện kiểm tra kiểu
-
Cải thiện thông báo lỗi
-
Cải thiện thời gian biên dịch
-
Cải thiện quốc tế hóa
6.Cộng đồng
Kể từ khi ra mắt, Angular đã trở thành framework ưa thích của cộng đồng lập trình viên và kỹ sư bởi các tính năng và tiện ích của nó. Với một nguồn tài nguyên vô cùng dồi dào các học liệu, tài liệu tham khảo, chủ đề giải đáp các câu hỏi thường gặp và còn nhiều nữa, Angular rất dễ sử dụng đối với những ai muốn vận dụng nó một cách triệt để.
Các cộng đồng Angular lớn và hoạt động tích cực:
-
Dev.to
-
Stackoverflow
-
AngularAir
7.Ứng dụng của Angular
Angular với vai trò là một gói phần mềm đầy đủ thì công dụng của nó là cực kì lớn. Nó cho phép các lập trình viên xây dựng nhiều ứng dụng mà không tốn nhiều công sức. Sau đây là các ứng dụng phổ biến của Angular:
Các ứng dụng stream video trực tiếp như Youtube trên Playstation 3
Bất cứ ai yêu thích các trò chơi điện tử cũng sẽ nhớ phiên bản Youtube trên PlayStation 3. Do Youtube là một ứng dụng cực kì nổi tiếng, nó sẽ cần đến một framework.
Bởi Google sở hữu Angular, họ đã sử dụng nó để ra mắt một phiên bản Youtube hoàn toàn mới trên PS3. Sự linh hoạt của framework đã giúp Google thiết kế lại trải nghiệm trên PS3 bằng cách thay thế các phương thức hoạt động thông thường bằng các phương thức hiện đại hơn. Họ thay thế việc di chuột bằng các tổ hợp phím. Angular cũng đóng góp một phần lớn vào việc tạo ra trải nghiệm cuộn trang và video playback mượt mà trên Youtube PS3. Đây là một trong những trải nghiệm tối tân và cao cấp mà Angular đã đem lại cho các gamer
Các ứng dụng thương mại điện tử như T-Mobile
T-Mobile khám phá ra rằng các khách hàng của họ phải đợi tải các nội dung khi kết nối đến ứng dụng. Để giải quyết vấn đề rắc rối này, họ đã phải dùng tới Angular để giảm thiểu thời gian render phía máy chủ.
Hơn nữa, với Angular họ có thể sử dụng phân giải HTML cho các mục đích liên quan đến công cụ tìm kiếm. Họ cũng có thể cập nhật trang tự động và dễ dàng thiết đặt các thành phần động của trang.
Công ty viễn thông hàng đầu này đã thành công rực rỡ với ứng dụng thương mại điện tử của họ và đã nhận được lượng truy cập ấn tượng từ các công cụ tìm kiếm. Với Angular, họ đã sửa sang lại layout và biến nó thành một ứng dụng hoạt động trơn tru và mượt mà.
Các ứng dụng dữ liệu thời gian thực như weather.com
Một trong những website thời tiết cập nhật theo thời gian thực nổi tiếng là weather.com. Thành công của nó có được là nhờ có sự linh hoạt của các module và thư mục cho phép nó tải trên các thiết bị máy tính và điện thoại di động dưới dạng các tiện ích nhỏ. Framework cho phép các lập trình viên tạo ra các tiện ích linh hoạt dựa trên các nhu cầu của khách hàng với thiết bị. Việc thu thập dữ liệu theo thời gian thực và và trình bày nó một cách sinh động cũng là nhờ các công nghệ của Angular.
Các website tin tức và nội dung như The Guardian
Trang The Guardian có một lượng thông tin cực kỳ phong phú và được cập nhật liên tục. Tẩ cả là nhờ có công nghệ của Angular với việc ứng dụng các tiện ích mở rộng RxJS. Nó cho phép các lập trình viên có thể tạo ra cuộn trang vô hạn với các kết quả tìm kiếm. Kể cả với lượng thông tin khổng lồ của The Guardian, ứng dụng vẫn chạy mượt mà với Angular backend.
Kết luận
Trên đây bài viết đã cung cấp cho bạn cái nhìn tổng quan về Angular, về khái niệm, các tính năng cũng như ứng dụng thực tế của Angular. Không phải ngẫu nhiên mà Angular lại được các lập trình viên front-end ưa chuộng bởi cấu trúc code, liên kết dữ liêu 2 chiều và khả năng tái sử dụng code một cách linh hoạt. Vậy bạn còn chần chừ gì nữa mà hãy bắt tay vào việc với Angular ngay đi thôi!
> Chờ chút: Nếu bạn đang tự học Angular và muốn đi làm nhanh về lĩnh vực này thì hãy tham gia ngay KHÓA HỌC ANGULAR cùng chuyên gia doanh nghiệp. Đào tạo từ số 0 cho người mới bắt đầu. Hỗ trợ giới thiệu thực tập / Việc làm sau khóa học.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python