Hướng Dẫn Lập Trình Angular Từ đầu Từng Bước (part 1)

Hướng dẫn lập trình Angular từ đầu từng bước (part 1)

Table of Contents

Toggle

• Hướng dẫn lập trình Angular từ đầu từng bước (part 1)
  • Angular là gì?
    • Hành trình của chúng tôi với Angular
  • AngularJS vs Angular 2 vs Angular 10+
    • Có gì mới trong Angular so với AngularJS
    • Từ Angular 2 đến Angular 4
    • Từ Angular 5 đến Angular 7
    • Từ Angular 8 đến Angular 10+
  • Thiết lập môi trường để bắt đầu học Angular
    • Cài đặt NodeJS và npm
    • Angular CLI
    • Trình soạn thảo
  • Bắt đầu xây dựng ứng dụng Angular đầu tiên
  • Sử dụng Angular CLI để thêm các trang mới

Angular là gì?

Angular là một nền tảng để xây dựng các ứng dụng web dành cho thiết bị di động và máy tính để bàn. Nó có một cộng đồng lớn với hàng triệu nhà phát triển chọn Angular để xây dựng giao diện người dùng hấp dẫn.

Angular là một front-end framework mã nguồn mở viết bằng JavaScript cho ứng dụng web. Nó chủ yếu được duy trì bởi Google cùng với một cộng đồng mở gồm các nhà phát triển và các công ty.

Angular giải quyết nhiều thách thức phải đối mặt khi phát triển các ứng dụng SPA (Single Page Application), đa nền tảng, hiệu suất cao. Nó hoàn toàn có thể mở rộng và hoạt động rất tốt với các thư viện khác. Để biết thêm chi tiết, hãy truy cập trang tài liệu chính thức của Angular.

Mục tiêu của chúng tôi trong hướng dẫn ví dụvề Angular trong thế giới thực này là cung cấp một hướng dẫn đầy đủ để bạn học Angular từng bước. Chúng tôi sẽ bắt đầu giải thích lý do tại sao và các khái niệm cơ bản, sau đó tiếp tục khám phá các khái niệm nâng cao hơn.

Chúng tôi muốn giúp những người mới bắt đầu trong những bước đầu tiên của họ trong thế giới Angular. Với tư cách là nhà phát triển, chúng tôi biết rằng việc bắt đầu với một công nghệ mới đôi khi có thể hơi khó khăn, vì vậy chúng tôi muốn giúp đỡ bạn.

Chúng ta sẽ học đủ Angular core để bắt đầu và tự tin rằng chúng ta có thể xây dựng bất kỳ loại ứng dụng nào với Angular. Chúng tôi sẽ trình bày rất nhiều thông tin cơ bản ở mức độ giới thiệu, ngoài ra, bạn sẽ tìm thấy rất nhiều tài liệu tham khảo về các chủ đề có chiều sâu hơn.

Để giúp bạn trong suốt quá trình học Angular, chúng tôi đã tạo một ứng dụng Angular với định dạng câu hỏi và câu trả lời (Q&A), nơi người dùng có thể hỏi, trả lời và bỏ phiếu cho các câu hỏi. Ngoài ra, chúng tôi sẽ giải thích cách kết nối ứng dụng này với một API từ xa để xử lý tích hợp dữ liệu. Vì vậy, trong hướng dẫn hoàn chỉnh này, bạn sẽ tìm hiểu tất cả các khái niệm cần thiết để tạo ứng dụng Angular đầu tiên của mình.

Hành trình của chúng tôi với Angular

Chúng tôi đã bắt đầu thử nghiệm với bản phát hành đầu tiên của Angular 2.0.0-beta.0 vào tháng 12 năm 2015 với hy vọng tìm ra một framework tốt hơn so với phiên bản tiền nhiệm của nó (Angular 1.x còn được gọi là AngularJS).

Tôi sẽ hoàn toàn thành thật với bạn ở đây, chúng tôi gần như bỏ cuộc với tất cả sự xung đột, thay đổi phá vỡ (breaking change) và một loại khủng hoảng danh tính đã xảy ra ở giữa quá trình phát triển Angular 2+.

Đó là một chặng đường dài cho đến khi Angular đạt được một cột mốc vững chắc với Universal (kết xuất phía máy chủ), biên dịch trước thời hạn (AOT), tải chậm và cấu hình gói vững chắc hoạt động cùng nhau một cách tuyệt vời. Trở lại những năm đó, thật không dễ dàng để tạo ra một ứng dụng Angular cho sản xuất (production). Nhưng nhờ có đội ngũ và cộng đồng Angular, điều đó đã thay đổi.

Được làm việc, sử dụng và thử mọi thứ với Angular ngay từ đầu khiến chúng tôi thực sự hiểu cách nó được thiết kế và cách nó phát triển. Chúng tôi đã chứng kiến ​​những cải tiến liên tục và thấy tất cả chúng đều hướng đến một mục tiêu đơn giản nhưng quan trọng: “Tạo một ứng dụng Angular thật dễ dàng”.

Như tôi đã đề cập trước đây, trong một thời gian, nó đã không xảy ra. Bây giờ tôi có thể nói với bạn rằng, Angular là một framework siêu vững chắc và ổn định mà bạn sẽ thích làm việc cùng. Các phiên bản hiện tại của Angular đã phát triển đến mức bạn sẽ nhanh chóng bị ấn tượng.

Angular là một công cụ tuyệt vời sẽ:

• Cho phép bạn tạo phần mềm nhanh hơn và ít nỗ lực hơn.
• Dẫn đến một phần mềm dễ bảo trì hơn.
• Khuyến khích các phương pháp lập trình tốt và các mẫu thiết kế như MVC.
• Cho phép bạn cộng tác dễ dàng hơn với những người khác.
• Cho phép bạn trở nên thành thạo trong một thời gian hợp lý.
• Giải quyết các vấn đề có thể phát sinh trong kiến ​​trúc phần mềm của bạn, chẳng hạn như Dependency Injection, DRY (Don’t Repeat Yourself), v.v.

AngularJS vs Angular 2 vs Angular 10+

Trở lại năm 2010, framework này được gọi là AngularJS, và ám chỉ đến những gì chúng ta biết bây giờ là Angular 1.x. Sau đó vào năm 2016, Angular 2 xuất hiện như một bản viết lại hoàn chỉnh của framework, cải thiện từ các bài học kinh nghiệm và cải tiến hiệu suất đầy hứa hẹn, cũng như một framework hiện đại hơn và có thể mở rộng hơn.

AngularJS hoàn toàn dựa trên controller và view giao tiếp bằng cách sử dụng $scope trong khi Angular 2 là phương pháp tiếp cận dựa trên component 100%. Trong Angular 2, chúng ta không có controller và $scope. Các component là các khối xây dựng của một ứng dụng Angular 2. Chúng ta sẽ thấy những lợi ích của sự thay đổi này trong vài phút nữa.

Phiên bản đầu tiên của Angular được đặt tên là Angular 2. Sau đó, nó được đổi tên thành “Angular”. Giữa Angular 2 và Angular 10 (phiên bản ổn định mới nhất hiện tại) có Angular 4 (phát hành đầu năm 2017), Angular 5 (phát hành cuối năm 2017), Angular 6 (phát hành đầu năm 2018), Angular 7 (phát hành cuối năm 2018), Angular 8 ( phát hành giữa năm 2019), Angular 9 (phát hành đầu năm 2020). Angular 10 được phát hành vào tháng 6 năm 2020. Tất cả các thông tin liên quan đến các phiên bản có thể được tìm thấy trên CHANGELOG.

Đừng lo lắng về tất cả các phiên bản này. Bởi vì tất cả các phiên bản từ Angular 2 đến Angular 10 đều là cùng một framework, chúng chia sẻ cùng một lõi nhưng chúng khác nhau ở rất nhiều cải tiến đáng kinh ngạc!

Kể từ bây giờ, mỗi khi chúng ta sử dụng thuật ngữ Angular, chúng ta đang đề cập đến phiên bản mới nhất của framework hiện tại là Angular 10.

Có gì mới trong Angular so với AngularJS

Chúng ta hãy đi qua những điểm khác biệt chính giữa AngularJS và Angular:

• Angular là một bản viết lại hoàn chỉnh của AngularJS.
• Một ứng dụng Angular và kiến ​​trúc của nó khác với AngularJS. Các yếu tố xây dựng chính cho Angular là module, component, template, metadata, data binding, directive, service và dependency injection.
• Angular không có khái niệm “scope” hoặc controller, thay vào đó, nó sử dụng component phân cấp làm kiến ​​trúc chính của nó.
• Angular tuân theo khái niệm module. Các chức năng tương tự nhau được giữ cùng nhau bên trong các module. Điều này mang lại cho Angular một lõi nhẹ hơn được tối ưu hóa.
• Khái niệm controller trong AngularJS đã bị loại bỏ khỏi Angular 2 trở lên là giao diện người dùng dựa trên component. Điều này giúp các nhà phát triển phân chia các ứng dụng trong các component với các tính năng mong muốn. Những điều này đã giúp cải thiện tính linh hoạt và khả năng tái sử dụng so với AngularJS.
• Cú pháp biểu thức Angular tập trung vào "[ ]" cho ràng buộc thuộc tính và "( )" cho ràng buộc sự kiện.
• Với AngularJS, việc xây dựng một Ứng dụng SPA thân thiện với công cụ tìm kiếm (SEO) là một khó khăn lớn. Nhưng nút cổ chai này đã được loại bỏ với Angular 2 bằng cách cho phép kết xuất ứng dụng phía máy chủ. Những tác vụ này có thể thực hiện được nhờ vào module Angular Universal.

Angular khuyên bạn nên sử dụng ngôn ngữ TypeScript, ngôn ngữ này giới thiệu các tính năng sau:

• Kiểu dữ liệu tĩnh.
• Lập trình hướng đối tượng dựa trên các lớp.
• Hỗ trợ lập trình tương tác bằng RxJS

Ngoài các tính năng của TypeScript, Angular cũng bao gồm các lợi ích từ ES6:

• Vòng lặp For/Of.
• Cải thiện dependency injection.
• Iterator
• Reflection
• Tải động
• Biên dịch mẫu không đồng bộ
• Định tuyến đơn giản hơn

Từ Angular 2 đến Angular 4

Có một số thay đổi lớn, nhưng chủ yếu là về cấu trúc dự án với rất nhiều cơ cấu lại làm cho framework hoạt động ổn định hơn.

• Nhỏ hơn và nhanh hơn. Việc nâng cấp từ 2.0 lên 4.0 đã giảm 60% kích thước tệp đi kèm đồng thời cải thiện tốc độ ứng dụng.
• Angular 4 tương thích với các phiên bản mới hơn của TypeScript 2.1 và TypeScript 2.2.
• Angular Universal: Phần lớn mã Angular Universal đã được hợp nhất vào Angular core.
• Animation Package: Animation được lấy từ Angular core và đặt trong package riêng. Có nghĩa là nếu bạn không sử dụng animation, mã thừa sẽ không xuất hiện trong ứng dụng của bạn.

Từ Angular 5 đến Angular 7

Angular 6 là bản phát hành đầu tiên của Angular hợp nhất các phiên bản của framework là Material và CLI. Thay đổi này được thực hiện để làm rõ khả năng tương thích chéo.

Angular 7 có đầy đủ các tính năng mới, sửa lỗi, cải tiến hiệu suất và một số mã không còn được dùng nữa sẽ được loại bỏ và tái cấu trúc lại từ các phiên bản cũ.

• Tối ưu hóa tiến trình build giúp giảm kích thước ứng dụng bằng cách xóa mã không cần thiết.
• Các component của Material Design với kết xuất phía máy chủ.
• Các cải tiến Angular Universal để phân bổ mã giữa các phiên bản phía máy chủ và phía máy khách của ứng dụng.
• Rất nhiều cải tiến trong Angular CLI.
• Kích thước gói nhỏ hơn.
• Cải tiến trình biên dịch hỗ trợ biên dịch gia tăng có nghĩa là rebuild nhanh hơn.
• RxJS (thư viện lập trình phản ứng) đã được cập nhật lên phiên bản 6.x hoặc mới hơn.
• Angular hiện yêu cầu TypeScript 3.x

Từ Angular 8 đến Angular 10+

Angular 8 là một bản phát hành mở rộng toàn bộ nền tảng, bao gồm framework, Angular Material và CLI. Bản phát hành này đã cải thiện thời gian khởi động ứng dụng trên các trình duyệt hiện đại. Ngoài ra, nó đã thay đổi cấu hình định tuyến để sử dụng import động có lợi cho việc tải chậm.

Angular 9 được cộng đồng rất mong đợi vì nó đã giới thiệu trình biên dịch và thực thi Ivy. Ivy là tên của biên dịch và kết xuất thế hệ tiếp theo của Angular. Với bản phát hành này, trình biên dịch và thực thi mới được sử dụng theo mặc định thay vì trình biên dịch và thực thi cũ hơn, được gọi là View Engine.

Trình biên dịch Ivy cung cấp những ưu điểm sau:

• Kích thước gói nhỏ hơn.
• Kiểm thử nhanh hơn.
• Gỡ lỗi tốt hơn.
• Cải thiện class CSS và liên kết kiểu.
• Kiểm tra kiểu cải tiến.
• Cải thiện lỗi bản dựng.
• Cải thiện thời gian build, bật AOT theo mặc định.
• Cải thiện đa ngôn ngữ.

Thông tin thêm về những ưu điểm này có thể được tìm thấy trên ghi chú phát hành Angular 9.

Bản phát hành Angular 10 nhỏ hơn thông thường; chỉ mới 4 tháng kể từ khi phát hành Angular 9. Bạn có thể tìm thấy thêm thông tin về bản phát hành này tại đây.

Tiếp theo trong hướng dẫn Angular này, hãy thiết lập môi trường phát triển. Sau phần giới thiệu trước đó về trạng thái hiện tại của Angular Framework, bây giờ chúng ta đã sẵn sàng để bắt đầu làm việc trên ứng dụng Angular của chúng ta. Cách tốt nhất để học Angular là làm theo hướng dẫn từng bước này cho người mới bắt đầu.

Trong phần sau của hướng dẫn này, chúng ta sẽ tìm hiểu cách thiết lập và các yêu cầu cần thiết để bắt đầu phát triển ứng dụng Angular.

Thiết lập môi trường để bắt đầu học Angular

Trong phần này, chúng tôi sẽ hướng dẫn bạn cách thiết lập môi trường phát triển cục bộ để bạn có thể bắt đầu phát triển các ứng dụng Angular.

Cài đặt NodeJS và npm

Node.js và npm là nền tảng để phát triển web hiện đại bằng cách sử dụng Angular và các nền tảng khác. Node cho phép khách hàng phát triển và xây dựng các công cụ. Chúng tôi sẽ sử dụng trình quản lý gói (npm) để cài đặt tất cả các phụ thuộc thư viện JavaScript. Tải xuống ngay bây giờ nếu chúng chưa được cài đặt trên máy tính của bạn.

Lưu ý rằng bạn đang chạy phiên bản ổn định mới nhất của Node và npm.

Angular CLI

Ứng dụng Angular được tạo và phát triển chủ yếu thông qua Angular CLI (công cụ giao diện dòng lệnh) giúp tạo dự án, thêm tệp và thực hiện nhiều tác vụ phát triển liên tục như thử nghiệm, đóng gói và triển khai.

Angular CLI quản lý cấu hình và khởi tạo các thư viện khác nhau. Nó cũng giúp chúng ta thêm các component, directive, service, v.v. vào các ứng dụng Angular đã có. Cũng cần nhắc lại rằng CLI sử dụng Typecript và Webpack để đóng gói module, Karma để kiểm thử đơn vị (unit testing) và Protractor để kiểm thử đầu cuối (end to end testing). Nó bao gồm mọi thứ bạn cần để bắt đầu viết ứng dụng Angular ngay lập tức.

Để cài đặt Angular CLI toàn cục, hãy chạy lệnh sau trên cửa sổ dòng lệnh của bạn.

npm install -g @angular/cli

Lưu ý: mặc dù không được khuyến khích, bạn có thể cần thêm “sudo” vào trước các lệnh này để cài đặt các tiện ích trên toàn cục.

Lưu ý quan trọng: Nếu bạn đã cài đặt phiên bản CLI cũ hơn trong máy tính của mình, hãy đảm bảo rằng bạn cập nhật nó lên Angular CLI mới nhất đúng cách.

Trình soạn thảo

Hiện nay có rất nhiều trình soạn thảo hỗ trợ bạn lập trình Angular dễ dàng và nhanh chóng.

Tuy nhiên chúng tôi đề xuất bạn nền cài Visual Studio Code của Microsoft. Đây là trình soạn thảo rất tuyệt vời, hoàn toàn miễn phí và được rất nhiều nhà phát triển lựa chọn.

Sau khi cài đặt Visual Studio Code xong, bạn mở lên và cài đặt các extension sau để hỗ trợ lập trình Angular:

• Angular Snippets.
• Angular Language Service.
• Angular 10 Snippets.
• Angular Essentials.

Ngoài ra bạn cũng nên cài Debugger for Chrome để hỗ trợ debug cho ứng dụng Angular.

Bắt đầu xây dựng ứng dụng Angular đầu tiên

Bây giờ bạn đã cài đặt Angular và các phụ thuộc của nó, chúng ta có thể tiếp tục và bắt đầu xây dựng ứng dụng Angular đầu tiên của mình. Bắt đầu nào!

Bắt đầu một ứng dụng Angular mới với CLI thật dễ dàng! Bạn mở Visual Studio Code lên, vào menu File -> Open Folder và chọn thư mục đặt dự án. Sau đó bạn vào menu Terminal -> New Terminal (Ctrl + Shift + `) rồi chạy lệnh này:

ng new "my-new-angular-app"

Lệnh trên sẽ tạo một thư mục có tên “my-new-angular-app” và sẽ sao chép tất cả các cài đặt cấu hình và phụ thuộc bắt buộc. Angular CLI thực hiện những điều này cho bạn:

1. Tạo một thư mục mới “my-new-angular-app”.
2. Tải xuống và cài đặt thư viện Angular và bất kỳ phần phụ thuộc nào khác.
3. Cài đặt và cấu hình TypeScript.
4. Cài đặt và cấu hình Karma & Protractor (thư viện kiểm thử).

Bạn cũng có thể sử dụng lệnh ng init. Sự khác biệt giữa ng init và ng new là ng new yêu cầu bạn chỉ định tên thư mục và nó sẽ tạo một thư mục sao chép tệp trong khi ng init sẽ sao chép tệp vào thư mục hiện tại.

Bây giờ, bạn có thể vào thư mục đã tạo. Để xem trước nhanh ứng dụng của bạn bên trong trình duyệt, hãy gõ 2 lệnh sau trong terminal.

# move to Angular application folder cd my-new-angular-app # start Angular application ng serve

Lệnh này chạy trình biên dịch ở chế độ xem (tìm kiếm các thay đổi trong mã và biên dịch lại nếu cần), khởi động máy chủ, khởi chạy ứng dụng trong trình duyệt và giữ cho ứng dụng chạy trong khi chúng tôi tiếp tục xây dựng nó.

Máy chủ phát triển Webpack lắng nghe trên cổng HTTP 4200. Do đó, nếu bạn mở url, http://localhost:4200/ bạn sẽ thấy ứng dụng đang chạy. Đây là kết quả:

Sử dụng Angular CLI để thêm các trang mới

Trong Angular, có nhiều bản mẫu hơn so với AngularJS (Angular 1), nhưng đừng hoảng sợ. Angular CLI mới cũng có nhiều công cụ hơn để giúp bạn làm việc này.

Ví dụ, các chức năng của generator mới cung cấp một cách dễ dàng để tạo các trang và dịch vụ Angular cho ứng dụng của bạn. Điều này làm cho việc chuyển từ một ứng dụng cơ bản sang một ứng dụng web điều hướng đầy đủ tính năng dễ dàng hơn nhiều. Tôi gọi đó là một đường cong học tập dễ dàng :).

Để tạo một component mới, bạn có gõ lệnh sau vào terminal:

ng generate component my-new-component # or using the alias ng g component my-new-component # √ Create app/pages/my-page/my-page.html # √ Create app/pages/my-page/my-page.ts # √ Create app/pages/my-page/my-page.scss

Angular CLI sẽ tự động thêm tham chiếu đến các component, directive và đường ống trong app.module.ts.

Lưu ý: Vui lòng tham khảo tài liệu Angular CLI để biết thêm thông tin về cách thêm các component và các yếu tố khác vào ứng dụng của bạn.

Ở hướng dẫn tiếp theo, bạn sẽ tìm hiểu kiến trúc ứng dụng Angular, cấu trúc một dự án Angular, định tuyến và điều hướng ứng dụng Angular.

Hướng dẫn lập trình Angular từ đầu từng bước (part 2) Ở hướng dẫn trước, bạn đã tìm hiểu Angular là gì, so sánh các phiên bản Angular,thiết lập môi trường lập trình Angular và đã tạo ứng dụng Angular đơn giản đầutiên. Nếu bạn bỏ lỡ hướng dẫn này thì có thể xem ở bài viết sau: Hướng dẫn lập trình Angular từ đầu từng bước (part 1)Bài viết này sẽ cung … Trung NguyenComdy