1. Giới thiệu Angular
1.1 Lịch sử hình thành và phát triển của Angular
Dân ta phải biết sử ta cái gì ko biết thì tra Google. Trước khi học Angular thì cũng nên biết chút chút về nó chứ nhỉ. Dưới đây là một số thông tin mình đã cóp nhặt sau khi search Google.
Angular ra đời năm 2010 bởi hai kỹ sư Google, Misko Hevery và Adam Abrons. Ban đầu, Angular được gọi là “AngularJS”, và nó là một bộ thư viện JavaScript rất nhỏ, chỉ tầm 10KB. Thế nhưng, dần dần AngularJS phát triển và trở thành một trong những framework front-end phổ biến nhất.
Tuy nhiên, những phiên bản sau này của Angular không chỉ là những cải tiến từ AngularJS, mà chúng thực sự là những bản xây dựng lại hoàn toàn mới. Vì vậy, người ta thường gọi chúng là “Angular” thay vì “AngularJS”.
1.2 Tổng quan về Angular
Vậy Angular là gì? Angular chính là một nền tảng và framework để xây dựng các ứng dụng web phía máy khách (client-side) dựa trên JavaScript và TypeScript. Angular giúp các lập trình viên triển khai các ứng dụng Single Page Application (SPA) một cách dễ dàng và nhanh chóng, với nhiều tính năng hiện đại như two-way data binding, modularization, AJAX, và dependency injection.
2. Lợi ích khi sử dụng Angular
2.1 Hiệu quả trong việc xây dựng ứng dụng Single Page Application (SPA)
Đối với những bạn chưa biết, Single Page Application (SPA) là một loại ứng dụng web mà chỉ có một trang HTML duy nhất. Các trang khác sẽ được tải lên mà không cần tải lại toàn bộ trang web. Điều này mang lại trải nghiệm người dùng mượt mà hơn và tăng tốc độ tải trang. Và Angular chính là công cụ tuyệt vời để xây dựng các ứng dụng SPA như thế.
2.2 Sự linh hoạt và tiện lợi của Two-Way Data Binding
Đây là một trong những tính năng mà các bạn sẽ yêu thích ở Angular. Two-Way Data Binding có nghĩa là bất kỳ thay đổi nào trong dữ liệu của mô hình (Model) sẽ cập nhật ngay lập tức lên giao diện (View), và ngược lại. Với tính năng này, các bạn không cần phải viết code dài dòng để đồng bộ hóa dữ liệu giữa mô hình và giao diện, Angular sẽ lo giúp bạn.
2.3 Module và Dependency Injection trong Angular
Angular chia ứng dụng thành các module nhỏ, giúp tổ chức code dễ dàng hơn và tăng khả năng tái sử dụng code. Mỗi module có thể chứa các component, directive, service, và các module khác.
Đối với Dependency Injection, Angular giúp giảm thiểu sự phụ thuộc giữa các phần của ứng dụng, giúp code dễ dàng bảo dưỡng và kiểm tra (test).
3. Các tính năng nổi bật của Angular
3.1 Components trong Angular
Angular xây dựng ứng dụng dựa trên “components”. Mỗi component đều có giao diện riêng (template) và các hành vi riêng (class). Chúng hoạt động như một khối riêng biệt và có thể dễ dàng tái sử dụng trong toàn bộ ứng dụng.
Ví dụ, mình muốn tạo một component hiển thị thông tin người dùng. Mình sẽ tạo ra một component có tên là “UserComponent”. Bên trong component này, mình sẽ có một template HTML để hiển thị thông tin và một class TypeScript để xử lý dữ liệu. Khi cần hiển thị thông tin người dùng ở đâu đó trong ứng dụng, mình chỉ cần gọi “UserComponent” là xong.
3.2 Services và Dependency Injection
Services trong Angular giúp chia sẻ logic hoặc dữ liệu giữa các component. Thay vì phải viết lại cùng một code ở nhiều component khác nhau, bạn có thể tạo một service và inject (tiêm) nó vào các component cần sử dụng.
Dependency Injection (DI) là một pattern phổ biến trong lập trình, giúp làm giảm sự phụ thuộc giữa các phần của code. Angular có một hệ thống DI mạnh mẽ, giúp bạn dễ dàng inject services và các thành phần khác vào nhau.
3.3 Directives
Directives là một tính năng mạnh mẽ của Angular, giúp bạn tùy chỉnh cách HTML được hiển thị và xử lý. Angular cung cấp một số directives sẵn có như ngIf, ngFor và ngSwitch, nhưng bạn cũng có thể tạo directives riêng của mình.
3.4 Pipes
Pipes trong Angular giúp bạn biến đổi dữ liệu trước khi hiển thị lên giao diện. Ví dụ, bạn có thể sử dụng pipe date để định dạng ngày tháng, hoặc pipe uppercase để biến đổi chuỗi sang chữ hoa.
3.5 Routing và Navigation
Angular cung cấp một hệ thống routing mạnh mẽ, giúp bạn xây dựng ứng dụng Single Page Application (SPA) một cách dễ dàng. Bạn có thể xác định các route, điều hướng giữa các trang, và thậm chí xử lý việc lazy loading cho các phần của ứng dụng.
4. Cách cài đặt và sử dụng Angular
4.1 Cài đặt Angular
Trước hết, bạn cần cài đặt Node.js và npm (Node Package Manager) trên máy tính của bạn. Bạn có thể tải Node.js và npm từ trang chính thức của Node.js tại https://nodejs.org/.
Sau khi đã cài đặt xong Node.js và npm, bạn có thể cài đặt Angular CLI (Command Line Interface) bằng cách mở Terminal hoặc Command Prompt và gõ lệnh sau:
1 2 | <span class="token function">npm</span> <span class="token function">install</span> -g @angular/cli |
Lệnh trên sẽ cài đặt Angular CLI toàn cục (global) trên máy tính của bạn. Angular CLI là một công cụ mạnh mẽ giúp bạn khởi tạo, phát triển, và quản lý các ứng dụng Angular.
4.2 Tạo một ứng dụng Angular mới
Để tạo một ứng dụng Angular mới, bạn có thể sử dụng lệnh ng new của Angular CLI. Ví dụ, để tạo một ứng dụng có tên là “my-app”, bạn gõ lệnh sau:
1 2 | ng new my-app |
Lệnh trên sẽ tạo ra một thư mục mới có tên là “my-app”, với toàn bộ cấu trúc và các file cần thiết cho một ứng dụng Angular.
4.3 Chạy ứng dụng Angular
Để chạy ứng dụng Angular, bạn di chuyển vào thư mục của ứng dụng và gõ lệnh ng serve. Ví dụ:
1 2 3 | <span class="token builtin class-name">cd</span> my-app ng serve |
Sau khi chạy lệnh trên, bạn có thể truy cập vào ứng dụng Angular của mình tại địa chỉ http://localhost:4200 trong trình duyệt.
5. Hướng dẫn cơ bản về cách sử dụng Angular
5.1 Tạo Component
Component là những khối xây dựng cơ bản của một ứng dụng Angular. Để tạo một component mới, bạn sử dụng lệnh ng generate component (hoặc ng g c ngắn gọn) theo sau là tên của component:
1 2 | ng generate component my-component |
Điều này sẽ tạo ra một thư mục mới có tên là “my-component” với 4 file: my-component.component.css (cho CSS hoặc là SCSS tùy theo option bạn đã chọn lúc new app), my-component.component.html (cho template), my-component.component.spec.ts (cho testing), và my-component.component.ts (cho class).
5.2 Sử dụng Services
Services trong Angular giúp chia sẻ code và dữ liệu giữa các component. Để tạo một service mới, bạn sử dụng lệnh ng generate service (hoặc ng g s ngắn gọn):
1 2 | ng generate <span class="token function">service</span> my-service |
Lệnh này sẽ tạo ra hai file mới: my-service.service.spec.ts (cho testing) và my-service.service.ts (cho class). Bạn có thể thêm logic hoặc dữ liệu vào class service và sau đó inject (tiêm) service vào các component cần sử dụng.
5.3 Sử dụng Directives
Directives cho phép bạn tùy chỉnh cách HTML được hiển thị và xử lý. Ví dụ, bạn có thể sử dụng directive có sẵn chẳng hạn như ngIf để hiển thị hoặc ẩn một phần của HTML dựa trên điều kiện (Hoặc tự tạo cho riêng mình trong những bài sau hình sẽ hướng dẫn cụ thể):
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">*ngIf</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isLoggedIn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Welcome back!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Trong ví dụ trên, dòng chào sẽ chỉ được hiển thị nếu isLoggedIn là true.
5.4 Sử dụng Pipes
Pipes giúp bạn biến đổi dữ liệu trước khi hiển thị nó lên giao diện. Ví dụ, bạn có thể sử dụng pipe date để định dạng ngày tháng:
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Today is: {{ today | date }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Trong ví dụ trên, today sẽ được biến đổi thành một chuỗi ngày tháng trước khi được hiển thị lên giao diện.
6. Củng cố kiến thức với 1 project đơn giản
Giờ mình cùng thực hành tạo một ứng dụng web đơn giản với Angular nha.
6.1 Tạo Project mới
Đầu tiên, mình sẽ tạo một project mới với tên gọi “angular-practice”. Dùng lệnh sau nhé:
1 2 | ng new angular-practice |
6.2 Tạo Component
Tiếp theo, mình sẽ tạo một component mới tên là “hello-world”. Mở terminal trong thư mục project và gõ lệnh:
1 2 | ng g c hello-world |
Sau khi chạy lệnh này, Angular CLI sẽ tạo ra một thư mục mới tên là “hello-world” chứa 4 file là hello-world.component.css, hello-world.component.html, hello-world.component.spec.ts, và hello-world.component.ts.
6.3 Viết Code cho Component
Mở file hello-world.component.ts và thay đổi nội dung thành:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span> <span class="token decorator"><span class="token at operator">@</span><span class="token function">Component</span></span><span class="token punctuation">(</span><span class="token punctuation">{</span> selector<span class="token operator">:</span> <span class="token string">'app-hello-world'</span><span class="token punctuation">,</span> templateUrl<span class="token operator">:</span> <span class="token string">'./hello-world.component.html'</span><span class="token punctuation">,</span> styleUrls<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'./hello-world.component.css'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">HelloWorldComponent</span> <span class="token punctuation">{</span> message <span class="token operator">=</span> <span class="token string">'Xin chào các bạn!'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Mình đã tạo một biến message và gán giá trị là ‘Xin chào các bạn!’.
Tiếp theo, mở file hello-world.component.html và thay đổi nội dung thành:
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> |
Đây là cú pháp binding data của Angular. Angular sẽ lấy giá trị của biến message và hiển thị lên giao diện.
6.4 Hiển thị Component
Để hiển thị component “hello-world”, bạn cần thêm nó vào template của một component khác. Thông thường, bạn sẽ thêm nó vào component “app” (component mặc định của Angular).
Mở file app.component.html và thay đổi nội dung thành:
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>app-hello-world</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>app-hello-world</span><span class="token punctuation">></span></span> |
Tag <app-hello-world> chính là selector của component “hello-world” mà bạn đã định nghĩa trước đó.
6.5 Chạy ứng dụng
Để chạy ứng dụng, mở terminal và gõ lệnh:
1 2 | ng serve |
Mở trình duyệt và truy cập vào địa chỉ http://localhost:4200. Bạn sẽ thấy dòng chữ ‘Xin chào các bạn!’ hiển thị lên màn hình.
Vậy là bạn đã hoàn thành xong ứng dụng đầu tiên với Angular rồi đấy!
7. Kết luận
Ngôn ngữ lập trình không phải lúc nào cũng dễ hiểu, nhưng Angular là một ngoại lệ (Dễ hiểu – dễ đọc code <> dễ học nhé). Nó đem đến một sự thống nhất, mạch lạc trong việc xây dựng các ứng dụng web phía client. Được hỗ trợ mạnh mẽ bởi Google và cộng đồng lập trình viên rộng lớn, Angular đứng vững trước nhiều thách thức từ các framework khác.
Với khả năng mạnh mẽ của Angular, các bạn có thể xây dựng những ứng dụng phức tạp nhưng vẫn giữ được tính modular, dễ quản lý. Angular cung cấp cho bạn một framework hoàn chỉnh để bạn tập trung vào việc phát triển chức năng cho ứng dụng của mình mà không phải lo lắng về các vấn đề phức tạp khác.
Tuy nhiên, như mọi công cụ khác, Angular không phải lúc nào cũng là sự lựa chọn tốt nhất. Đối với những ứng dụng nhẹ nhàng, đơn giản thì có thể sử dụng React hoặc Vue.js sẽ tiết kiệm thời gian hơn. Nhưng đối với những ứng dụng lớn, cần quản lý state phức tạp thì Angular chính là lựa chọn hàng đầu.
Vậy nên, nếu bạn đang muốn tìm hiểu một framework JavaScript mạnh mẽ, đa năng và có sức mạnh tuyệt vời trong việc xây dựng ứng dụng single-page, thì đừng ngần ngại, hãy bắt đầu với Angular ngay hôm nay.
8. Các câu hỏi phổ biến về Angular do mình tự nghĩ ra
1 Angular có khó học không?
Điều này phụ thuộc vào kiến thức và kinh nghiệm của bạn về JavaScript và lập trình web. Nếu bạn đã quen với JavaScript, HTML, CSS và hiểu biết cơ bản về MVC (Model-View-Controller) thì việc học Angular sẽ dễ dàng hơn. Nếu bạn mới bắt đầu, có thể bạn sẽ gặp khó khăn một chút, nhưng đừng lo, vì cộng đồng lập trình Angular rất lớn và hỗ trợ nhiệt tình.
2 Tại sao tôi nên chọn Angular thay vì React hoặc Vue.js?
Angular là một framework hoàn chỉnh, cung cấp cho bạn mọi thứ bạn cần để xây dựng một ứng dụng front-end, từ routing, forms, đến http requests. Trong khi đó, React và Vue.js thường chỉ tập trung vào việc xây dựng giao diện, và bạn sẽ cần phải thêm các thư viện bên ngoài để xây dựng các chức năng khác.
3 Angular có thể sử dụng với ngôn ngữ lập trình nào khác không?
Angular được xây dựng với TypeScript, nhưng bạn cũng có thể sử dụng JavaScript ES5 hoặc ES6. Tuy nhiên, để tận dụng hết tính năng mạnh mẽ của Angular, bạn nên sử dụng TypeScript.
4 Angular có hỗ trợ server-side rendering (SSR) không?
Có, Angular hỗ trợ SSR thông qua Angular Universal. SSR có thể giúp cải thiện performance và SEO cho ứng dụng của bạn.
5 Angular có phù hợp để xây dựng ứng dụng mobile không?
Angular không phải là công cụ lý tưởng nhất để xây dựng ứng dụng mobile, nhưng bạn có thể sử dụng Ionic, một framework dựa trên Angular, để xây dựng ứng dụng mobile.