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

• Trung Nguyen

• 21/03/2021

• 17 min read

Angular là gì?

Angular là một nền tảng để kiến thiết xây dựng những ứng dụng web dành cho thiết bị di động và máy tính để bàn. Nó có một hội đồng lớn với hàng triệu nhà tăng trưởng chọn Angular để thiết kế xây dựng giao diện người dùng mê hoặc .

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 xử lý nhiều thử thách phải đương đầu khi tăng trưởng những ứng dụng SPA ( Single Page Application ), đa nền tảng, hiệu suất cao. Nó trọn vẹn hoàn toàn có thể lan rộng ra và hoạt động giải trí rất tốt với những thư viện khác. Để biết thêm chi tiết cụ thể, hãy truy vấn 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 khởi đầu trong những bước tiên phong của họ trong quốc tế Angular. Với tư cách là nhà tăng trưởng, chúng tôi biết rằng việc mở màn với một công nghệ tiên tiến mới nhiều lúc hoàn toàn có thể hơi khó khăn vất vả, thế cho nên chúng tôi muốn trợ giúp bạn .Chúng ta sẽ học đủ Angular core để khởi đầu và tự tin rằng tất cả chúng ta hoàn toàn có thể thiết kế xây dựng bất kể loại ứng dụng nào với Angular. Chúng tôi sẽ trình diễn rất nhiều thông tin cơ bản ở mức độ ra mắt, ngoài những, bạn sẽ tìm thấy rất nhiều tài liệu tìm hiểu thêm về những chủ đề có chiều sâu hơn .Để giúp bạn trong suốt quy 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 vấn đáp ( Q&A ), nơi người dùng hoàn toàn có thể hỏi, vấn đáp và bỏ phiếu cho những câu hỏi. Ngoài ra, chúng tôi sẽ lý giải cách liên kết ứng dụng này với một API từ xa để giải quyết và xử lý tích hợp tài liệu. Vì vậy, trong hướng dẫn hoàn hảo này, bạn sẽ tìm hiểu và khám phá tổng thể những khái niệm thiết yếu để tạo ứng dụng Angular tiên phong của mình .

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

Chúng tôi đã khởi đầu thử nghiệm với bản phát hành tiên phong của Angular 2.0.0 – beta. 0 vào tháng 12 năm năm ngoái với kỳ vọng tìm ra một framework tốt hơn so với phiên bản nhiệm kỳ trước đó của nó ( Angular 1. x còn được gọi là AngularJS ) .Tôi sẽ trọn vẹn thành thật với bạn ở đây, chúng tôi gần như bỏ cuộc với toàn bộ sự xung đột, biến hóa phá vỡ ( breaking change ) và một loại khủng hoảng cục bộ danh tính đã xảy ra ở giữa quy trình tăng trưởng 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ãi với Universal ( kết xuất phía sever ), biên dịch trước thời hạn ( AOT ), tải chậm và thông số kỹ thuật gói vững chãi hoạt động giải trí cùng nhau một cách tuyệt vời. Trở lại những năm đó, thật không thuận tiện để tạo ra một ứng dụng Angular cho sản xuất ( production ). Nhưng nhờ có đội ngũ và hội đồng Angular, điều đó đã biến hóa .

Đượ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 hạn, nó đã không xảy ra. Bây giờ tôi hoàn toàn có thể nói với bạn rằng, Angular là một framework siêu vững chãi và không thay đổi mà bạn sẽ thích thao tác cùng. Các phiên bản hiện tại của Angular đã tăng trưởng đến mức bạn sẽ nhanh gọn 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ì tất cả chúng ta biết giờ đây là Angular 1. x. Sau đó vào năm năm nay, Angular 2 Open như một bản viết lại hoàn hảo của framework, cải tổ từ những bài học kinh nghiệm kinh nghiệm tay nghề và nâng cấp cải tiến hiệu suất đầy hứa hẹn, cũng như một framework tân tiến hơn và hoàn toàn có thể lan rộng ra 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 tiên phong 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 không thay đổi 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ả những thông tin tương quan đến những phiên bản hoàn toàn có thể được tìm thấy trên CHANGELOG .Đừng lo ngại về toàn bộ những phiên bản này. Bởi vì tổng thể những phiên bản từ Angular 2 đến Angular 10 đều là cùng một framework, chúng san sẻ cùng một lõi nhưng chúng khác nhau ở rất nhiều nâng cấp 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ố ít đổi khác lớn, nhưng hầu hết là về cấu trúc dự án Bất Động Sản với rất nhiều cơ cấu tổ chức lại làm cho framework hoạt động giải trí không thay đổi 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ữ.

tin tức thêm về những ưu điểm này hoàn toàn 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, tất cả chúng ta sẽ tìm hiểu và khám phá cách thiết lập và những nhu yếu thiết yếu để mở màn tăng trưởng ứ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 tự nhiên tăng trưởng cục bộ để bạn hoàn toàn có thể khởi đầu tăng trưởng những ứng dụng Angular .

Cài đặt NodeJS và npm

Node. js và npm là nền tảng để tăng trưởng web hiện đại bằng cách sử dụng Angular và những nền tảng khác. Node được cho phép người mua tăng trưởng và thiết kế xây dựng những công cụ. Chúng tôi sẽ sử dụng trình quản trị gói ( npm ) để setup tổng thể những nhờ vào thư viện JavaScript. Tải xuống ngay giờ đây nếu chúng chưa được setup 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à tăng trưởng hầu hết trải qua Angular CLI ( công cụ giao diện dòng lệnh ) giúp tạo dự án Bất Động Sản, thêm tệp và triển khai nhiều tác vụ tăng trưởng liên tục như thử nghiệm, đóng gói và tiến hành .Angular CLI quản trị thông số kỹ thuật và khởi tạo những thư viện khác nhau. Nó cũng giúp tất cả chúng ta thêm những component, directive, service, v.v. vào những ứ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ị chức năng ( unit testing ) và Protractor để kiểm thử đầu cuối ( end to end testing ). Nó gồm có mọi thứ bạn cần để khởi đầu viết ứng dụng Angular ngay lập tức .Để setup Angular CLI toàn cục, hãy chạy lệnh sau trên hành lang 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 tương hỗ bạn lập trình Angular thuận tiện và nhanh gọn .Tuy nhiên chúng tôi yêu cầu 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, trọn vẹn không lấy phí và được rất nhiều nhà tăng trưởng lựa chọn .Sau khi thiết lập Visual Studio Code xong, bạn mở lên và thiết lập những extension sau để tương hỗ lập trình Angular :Ngoài ra bạn cũng nên cài Debugger for Chrome để tương hỗ 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 đã setup Angular và những phụ thuộc vào của nó, tất cả chúng ta hoàn toàn có thể liên tục và mở màn kiến thiết xây dựng ứng dụng Angular tiên phong 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 thuận tiện ! Bạn mở Visual Studio Code lên, vào menu File -> Open Folder và chọn thư mục đặt dự án Bất Động Sả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 toàn bộ những thiết lập thông số kỹ thuật và phụ thuộc vào bắt buộc. Angular CLI triển khai 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 hoàn toà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 foldercd my-new-angular-app# start Angular applicationng serve

Lệnh này chạy trình biên dịch ở chính sách xem ( tìm kiếm những đổi khác trong mã và biên dịch lại nếu cần ), khởi động sever, 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 liên tục kiến thiết 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 thao tác này .Ví dụ, những tính năng của generator mới cung ứng một cách thuận tiện để tạo những 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 không thiếu tính năng thuận tiện hơn nhiều. Tôi gọi đó là một đường cong học tập thuận tiện 🙂 .Để 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 aliasng 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 và khám phá kiến trúc ứng dụng Angular, cấu trúc một dự án Bất Động Sản Angular, định tuyến và điều hướng ứng dụng Angular .

Nếu Comdy hữu ích và giúp bạn tiết kiệm thời gian làm việc

Bạn hoàn toàn có thể vui mắt đưa Comdy vào whitelist của trình chặn quảng cáo ❤ ️ để tương hỗ chúng tôi trong việc trả tiền cho dịch vụ tàng trữ web để duy trì hoạt động giải trí của website .

Source: https://laodongdongnai.vn
Category: Chia Sẻ Kiến Thức