Sử dụng Angular với ASP.NET Core
Visual Studio cung cấp các project template (mẫu dự án) để tạo các ứng dụng trang đơn (SPA - Single Page App) dựa trên các công nghệ JavaScript, chẳng hạn như Angular, React, và Vue, có backend ASP.NET Core. Các template này:
- Tạo một Visual Studio solution với một dự án frontend và một dự án backend.
- Sử dụng loại dự án Visual Studio cho JavaScript và TypeScript (.esproj) cho frontend.
- Sử dụng dự án ASP.NET Core cho backend.
Các dự án được tạo bằng Visual Studio template có thể chạy từ dòng lệnh trên Windows, Linux và macOS. Để chạy ứng dụng, hãy dùng dotnet run --launch-profile https để chạy server project. Việc chạy server project sẽ tự động khởi động frontend JavaScript development server. Launch profile https hiện là bắt buộc.
Hướng dẫn Visual Studio
Để bắt đầu với dự án Angular, hãy làm theo hướng dẫn Tạo ứng dụng ASP.NET Core với Angular trong tài liệu Visual Studio.
Để biết thêm thông tin, xem JavaScript and TypeScript in Visual Studio.
ASP.NET Core SPA templates
Visual Studio bao gồm các template để xây dựng ứng dụng ASP.NET Core với frontend JavaScript hoặc TypeScript. Các template này có sẵn trong Visual Studio 2022 phiên bản 17.8 trở lên với workload ASP.NET and web development được cài đặt.
Các Visual Studio template mang lại những lợi ích sau:
- Phân tách dự án rõ ràng cho frontend và backend.
- Cập nhật với các phiên bản framework frontend mới nhất.
- Tích hợp với công cụ dòng lệnh framework frontend mới nhất, chẳng hạn như Vite.
- Template cho cả JavaScript và TypeScript (chỉ TypeScript cho Angular).
- Trải nghiệm chỉnh sửa mã JavaScript và TypeScript phong phú.
- Tích hợp JavaScript build tools với .NET build.
- Giao diện quản lý phụ thuộc npm.
- Tương thích với cấu hình gỡ lỗi và khởi chạy của Visual Studio Code.
- Chạy unit test frontend trong Test Explorer bằng cách sử dụng các framework test JavaScript.
Legacy ASP.NET Core SPA templates (Template cũ)
Các phiên bản trước của .NET SDK bao gồm những gì bây giờ là các template cũ để xây dựng ứng dụng SPA với ASP.NET Core. Để xem tài liệu về các template cũ hơn này, hãy xem phiên bản .NET 7 của SPA overview và các bài viết Angular và React.
Phiên bản .NET 6/7: ASP.NET Core với Angular project template
ASP.NET Core with Angular project template cung cấp điểm khởi đầu thuận tiện cho các ứng dụng ASP.NET Core sử dụng Angular và Angular CLI để triển khai giao diện người dùng (UI) phong phú phía client.
Project template tương đương với việc tạo cả một dự án ASP.NET Core để hoạt động như web API và một dự án Angular CLI để hoạt động như UI. Sự kết hợp dự án này cung cấp sự tiện lợi khi lưu trữ cả hai dự án trong một dự án ASP.NET Core duy nhất có thể được build và xuất bản như một đơn vị duy nhất.
Project template không dành cho server-side rendering (SSR - kết xuất phía máy chủ).
Tạo ứng dụng mới
Tạo dự án mới từ command prompt bằng lệnh dotnet new angular trong một thư mục trống. Ví dụ: các lệnh sau tạo ứng dụng trong thư mục my-new-app và chuyển đến thư mục đó:
dotnet new angular -o my-new-app cd my-new-app
Chạy ứng dụng từ Visual Studio hoặc .NET CLI:
Visual Studio: Mở tệp .csproj được tạo ra và chạy ứng dụng bình thường từ đó. Quá trình build sẽ khôi phục các phụ thuộc npm trong lần chạy đầu tiên, có thể mất vài phút. Các lần build tiếp theo sẽ nhanh hơn nhiều.
.NET CLI: Đảm bảo bạn có biến môi trường ASPNETCORE_ENVIRONMENT với giá trị Development. Trên Windows (trong non-PowerShell prompts), chạy SET ASPNETCORE_ENVIRONMENT=Development. Trên Linux hoặc macOS, chạy export ASPNETCORE_ENVIRONMENT=Development.
Chạy dotnet build để xác minh ứng dụng build thành công. Chạy dotnet run để khởi động ứng dụng.
Project template tạo ra một ứng dụng ASP.NET Core và một ứng dụng Angular. Ứng dụng ASP.NET Core được sử dụng cho truy cập dữ liệu, ủy quyền và các mối quan tâm phía máy chủ khác. Ứng dụng Angular, nằm trong thư mục con ClientApp, được sử dụng cho tất cả các mối quan tâm về UI.
Thêm trang, hình ảnh, style và module
Thư mục ClientApp chứa một ứng dụng Angular CLI tiêu chuẩn. Xem tài liệu Angular chính thức để biết thêm thông tin.
Có một số khác biệt nhỏ giữa ứng dụng Angular được tạo bởi template này và ứng dụng được tạo bởi Angular CLI (qua ng new); tuy nhiên, khả năng của ứng dụng không thay đổi. Ứng dụng được tạo bởi template chứa một layout dựa trên Bootstrap và một ví dụ routing cơ bản.
Chạy các lệnh ng
Trong command prompt, chuyển đến thư mục con ClientApp:
cd ClientApp
Nếu bạn đã cài đặt công cụ ng toàn cục, bạn có thể chạy bất kỳ lệnh nào của nó. Ví dụ: bạn có thể chạy ng lint, ng test, hoặc bất kỳ Angular CLI command nào khác. Không cần chạy ng serve vì ứng dụng ASP.NET Core của bạn xử lý việc phục vụ cả phần máy chủ và phía client của ứng dụng. Nội bộ, nó sử dụng ng serve trong quá trình phát triển.
Nếu bạn chưa cài đặt công cụ ng, hãy chạy npm run ng thay thế. Ví dụ: bạn có thể chạy npm run ng lint hoặc npm run ng test.
Cài đặt các gói npm
Để cài đặt các gói npm của bên thứ ba, hãy sử dụng command prompt trong thư mục con ClientApp. Ví dụ:
cd ClientApp npm install <package_name>
Xuất bản và triển khai (Publish and deploy)
Trong quá trình phát triển, ứng dụng chạy ở chế độ được tối ưu hóa cho sự tiện lợi của nhà phát triển. Ví dụ: các JavaScript bundle bao gồm source map (bản đồ nguồn) (để khi gỡ lỗi, bạn có thể thấy mã TypeScript gốc của mình). Ứng dụng theo dõi các thay đổi tệp TypeScript, HTML và CSS trên đĩa và tự động biên dịch và tải lại khi thấy các tệp đó thay đổi.
Trong môi trường production, phục vụ phiên bản ứng dụng được tối ưu hóa cho hiệu suất. Điều này được cấu hình tự động. Khi bạn xuất bản, cấu hình build tạo ra một bản build client-side được thu nhỏ (minified) và biên dịch ahead-of-time (AoT). Không giống build phát triển, build production không yêu cầu Node.js được cài đặt trên máy chủ (trừ khi bạn đã bật server-side rendering (SSR)).
Bạn có thể sử dụng các phương thức hosting và deployment chuẩn của ASP.NET Core.
Chạy "ng serve" độc lập
Dự án được cấu hình để khởi động phiên bản Angular CLI server riêng trong nền khi ứng dụng ASP.NET Core khởi động ở chế độ phát triển. Điều này tiện lợi vì bạn không phải chạy một máy chủ riêng theo cách thủ công.
Nhược điểm của thiết lập mặc định này là mỗi khi bạn sửa đổi mã C# và ứng dụng ASP.NET Core cần khởi động lại, Angular CLI server cũng khởi động lại. Khoảng 10 giây là cần thiết để khởi động lại. Nếu bạn thường xuyên chỉnh sửa mã C# và không muốn chờ Angular CLI khởi động lại, hãy chạy Angular CLI server bên ngoài, độc lập với tiến trình ASP.NET Core.
Để chạy Angular CLI server bên ngoài, hãy chuyển đến thư mục con ClientApp trong command prompt và khởi chạy Angular CLI development server:
cd ClientApp npm start
Khi bạn khởi động ứng dụng ASP.NET Core, nó sẽ không khởi chạy Angular CLI server. Thay vào đó, phiên bản bạn đã khởi động thủ công được sử dụng. Điều này cho phép nó khởi động và khởi động lại nhanh hơn.
Khi proxy được khởi chạy, URL và port đích được suy ra từ các biến môi trường được đặt bởi .NET, ASPNETCORE_URLS và ASPNETCORE_HTTPS_PORTS. Để đặt URL hoặc HTTPS port, hãy sử dụng một trong các biến môi trường hoặc thay đổi giá trị trong proxy.conf.json.
Cấu hình proxy middleware cho SignalR
Để biết thêm thông tin, xem http-proxy-middleware.