Bạn muốn 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 khối xây dựng để 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 quy mô. Angular giúp nhà phát triển tạo các ứng dụng chạy trên web, thiết bị di động hoặc máy tính.
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 số 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 ứng dụng của bạn có thể được tìm thấy đối với công cụ tìm kiếm và bot trên mạng xã hội 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ủ
- Tạo ứng dụng có thể cài đặt để mang lại trải nghiệm người dùng tương tự như ứng dụng iOS/Android
Mỗi bài đăng trong bộ sưu tập này sẽ mô tả các 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.
Nội dung không có trong bộ sưu tập này là gì?
Bộ sưu tập này giả định rằng bạn đã quen thuộc với Angular và TypeScript. Nếu bạn chưa tự tin về các tính năng 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 này cho biết cách thêm các tính năng nâng cao hơn như hỗ trợ triển khai và kết xuất 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 các tệp ban đầu và cấu trúc thư mục cho ứng dụng của bạn, đồng thời cài đặt các mô-đun nút cần thiết.
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
Giờ đây, 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 bộ sưu tập này, bạn sẽ tìm hiểu cách cải thiện hiệu suất và SEO của ứng dụng Angular. Sau đây là nội dung được đề cập:
- Chia tách mã cấp tuyến đường trong Angular
- Ngân sách hiệu suất bằng Angular CLI
- Chiến lược tìm nạp trước tuyến đường trong Angular
- Tối ưu hoá tính năng phát hiện thay đổi trong Angular
- Số hoá danh sách lớn bằng Angular CDK
- Lưu trước vào bộ nhớ đệm bằng Trình chạy dịch vụ Angular
- Kết xuất trước các tuyến đường 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