Bạn muốn làm cho trang web Angular của mình nhanh và dễ truy cập nhất có thể? Bạn đã đến đúng nơi rồi!
Angular là gì?
Angular là một khung để xây dựng giao diện người dùng. Thư viện này cung cấp các thành phần để giúp bạn nhanh chóng thiết lập một ứng dụng có thể bảo trì và mở rộng. Angular giúp các nhà phát triển tạo ra các ứng dụng chạy trên web, thiết bị di động hoặc máy tính để bàn.
Bộ sưu tập này có gì?
Bộ sưu tập này tập trung vào 5 khía cạnh chính để tối ưu hoá ứng dụng Angular:
- Cải thiện hiệu suất của ứng dụng để tăng lượt chuyển đổi và mức độ tương tác của người dùng
- Cải thiện độ tin cậy của ứng dụng trên mạng kém bằng cách lưu trước tài sản vào bộ nhớ đệm bằng trình chạy dịch vụ Angular
- Giúp các công cụ tìm kiếm và bot trên mạng xã hội dễ dàng tìm thấy ứng dụng của bạn bằng cách sử dụng tính năng kết xuất trước và kết xuất phía máy chủ
- Làm cho ứng dụng của bạn có thể cài đặt để cung cấp trải nghiệm người dùng tương tự như ứng dụng iOS/Android
- Cải thiện khả năng hỗ trợ tiếp cận của ứng dụng để mọi người dùng đều có thể sử dụng và hiểu được ứng dụng đó
Mỗi bài đăng trong bộ sưu tập này sẽ mô tả những kỹ thuật mà bạn có thể trực tiếp áp dụng cho các ứng dụng của riêng mình.
Có gì không có trong bộ sưu tập này?
Tập hợp này giả định rằng bạn đã quen thuộc với Angular và TypeScript. Nếu bạn chưa cảm thấy tự tin với các công cụ này, hãy xem tài liệu về TypeScript và hướng dẫn Bắt đầu sử dụng Angular trên angular.io.
Bắt đầu dự án
Giao diện dòng lệnh Angular (CLI) cho phép bạn nhanh chóng thiết lập một ứng dụng Angular phía máy khách đơn giản. Bài đăng này có phần giới thiệu ngắn về CLI, trong khi các bài đăng khác trong bộ sưu tập cho biết cách thêm các tính năng nâng cao hơn như hỗ trợ kết xuất và triển khai phía máy chủ.
Thiết lập CLI
Để bắt đầu, hãy cài đặt CLI trên toàn cầu và xác minh rằng bạn có phiên bản mới nhất bằng cách chạy các lệnh sau:
npm i -g @angular/cli
ng --version
Đảm bảo lệnh cuối cùng xuất ra phiên bản 8.0.3 trở lên.
Ngoài ra, nếu không muốn cài đặt CLI trên toàn cục, bạn có thể cài đặt CLI trên máy rồi chạy bằng lệnh npx:
npm i @angular/cli
npx ng --version
Tạo dự án
Cách tạo một dự án mới sẽ chạy:
ng new my-app
Lệnh này sẽ tạo tệp và cấu trúc thư mục ban đầu cho ứng dụng của bạn cũng như cài đặt các mô-đun nút mà ứng dụng cần.
Sau khi quá trình thiết lập hoàn tất, hãy khởi động ứng dụng của bạn bằng cách chạy:
cd my-app
ng serve
Bây giờ, bạn có thể truy cập vào ứng dụng của mình tại http://localhost:4200.
Tiếp theo là gì?
Trong phần còn lại của tuyển tập này, bạn sẽ tìm hiểu cách cải thiện hiệu suất, khả năng tiếp cận và quy trình tối ưu hoá cho công cụ tìm kiếm (SEO) của ứng dụng Angular. Nội dung chương trình:
- Chia tách mã cấp tuyến đường trong Angular
- Ngân sách hiệu suất thông qua Angular CLI
- Định tuyến chiến lược tìm nạp trước trong Angular
- Thay đổi tối ưu hoá tính năng phát hiện trong Angular
- Ảo hoá các danh sách lớn bằng Angular CDK
- Chuẩn bị bộ nhớ đệm bằng Angular Service Worker
- Kết xuất trước các tuyến bằng Angular CLI
- Hiển thị phía máy chủ bằng Angular Universal
- Thêm tệp kê khai ứng dụng web bằng Angular CLI
- Kiểm tra khả năng hỗ trợ tiếp cận bằng trình lập trình