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. Nền tảng 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ể duy trì và mở rộng. Angular hỗ trợ nhà phát triển tạo ứng dụng hoạt động 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 tỷ lệ 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ông cụ tìm kiếm và bot trên các kênh mạng xã hội khám phá được ứ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 để 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 sẽ mô tả các kỹ thuật mà bạn có thể áp dụng trực tiếp cho ứng dụng của riêng mình.
Bộ sưu tập này không có gì?
Bộ tài liệu 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ới các công nghệ này, hãy xem tài liệu về TypeScript và hướng dẫn Bắt đầu với Angular trên angular.io.
Bắt đầu dự án
Giao diện dòng lệnh (CLI) Angular giúp bạn nhanh chóng thiết lập một ứng dụng Angular đơn giản phía máy khách. Bài đăng này giới thiệu ngắn gọn về CLI, trong khi các bài đăng khác trong bộ sưu tập này hướng dẫn 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 hệ thống 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 hệ thống, bạn có thể cài đặt CLI trên máy và chạy bằng lệnh npx:
npm i @angular/cli
npx ng version
Tạo dự án
Cách tạo một lần chạy dự án mới:
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 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 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. Dưới đây là nội dung được đề cập:
- Tách mã ở cấp tuyến trong Angular
- Ngân sách hiệu suất với 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
- Ảo 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 bằng Angular CLI
- Kết xuất phía máy chủ bằng Angular Universal
- Thêm tệp kê khai ứng dụng web bằng Angular CLI