Đặt ứng dụng Angular ở đâu trong giải pháp API Web ASP.NET?

Tôi đang bắt đầu một ứng dụng greenfield và tôi muốn sử dụng ASP.NET (4.6) và Angular 2. Đối với phần phụ trợ, tôi đã tạo một dự án trong Visual Studio, và bây giờ tôi đang tự hỏi nên đặt ứng dụng Angular ở đâu. Tôi thực sự muốn sử dụng npm và các công cụ nút cho giao diện người dùng, nhưng cuối cùng, nó sẽ được lưu trữ trong cùng phiên bản Dịch vụ ứng dụng Azure với ứng dụng Angular tại domain.com/và api bên dưới domain.com/api/hoặc như vậy.

Tôi nên tách các ứng dụng trong Visual Studio như thế nào? Ứng dụng Angular có nên nằm trong dự án của chính nó không? Tôi có nên có ứng dụng Angular trong cùng dự án với API không? Ngay cả khi tôi không muốn sử dụng nuget và các công cụ VS khác cho nó? (Đối với giao diện người dùng, VS sẽ ít nhiều là trình chỉnh sửa mã được tôn vinh). Tôi đã không tìm thấy bất kỳ thực hành tốt nhất cho sự kết hợp này.

Bạn có hai lựa chọn.

Tạo các dự án mywebsite.api và mywebsite.app riêng biệt trong giải pháp của bạn.

Ưu điểm

• Phân tách đúng mối quan tâm.
• Bạn có thể triển khai các bản cập nhật cho api và giao diện của bạn một cách độc lập.
• Kiến trúc của các trang web có thể được thay đổi độc lập (tức là bạn có thể cập nhật api của mình để chạy trên asp.net 5 mà không ảnh hưởng đến trang web)
• Sạch hơn

Tạo một dự án duy nhất với cả ứng dụng khách và api trong một dự án

Ưu điểm

• Dễ dàng triển khai cập nhật hơn
• Không cần cấu hình để làm việc với CORS

Làm thế nào để lưu trữ và phát triển ứng dụng tại địa phương.

Một giải pháp hiệu quả để phát triển là sử dụng máy chủ lite để chạy ứng dụng khách (Angular 2) và IIS / Casini để lưu trữ mã api web của bạn. Một ví dụ điển hình về cách sử dụng nó được đưa ra trong hướng dẫn khởi động nhanh Angular 2 (được liên kết với bên dưới). Quá trình phát triển của tôi là chạy api thông qua Visual Studio và làm việc với mã hóa trang web của khách hàng bằng cách sử dụng Visual Studio Code và lite-server (Atom là một lựa chọn tốt khác).

Từ các tài liệu máy chủ lite. Máy chủ nút chỉ phát triển nhẹ phục vụ ứng dụng web, mở nó trong trình duyệt, làm mới khi thay đổi html hoặc javascript, tiêm thay đổi CSS bằng cách sử dụng ổ cắm và có trang dự phòng khi không tìm thấy tuyến đường.

https://code.visualstudio.com/

https://angular.io/docs/js/latest/quickstart.html

https://www.youtube.com/watch?v=e_FVeYWUF3s

https://github.com/johnpapa/lite-server

Quan điểm của tôi

Không có vấn đề trong việc sử dụng Nuget / NPM trong cùng một giải pháp và điều này sẽ không thông báo cho sự lựa chọn của bạn về cấu trúc dự án.

Tôi chỉ sử dụng cách tiếp cận dự án duy nhất cho demo / bằng chứng của các ứng dụng khái niệm. Đối với các bản phát hành sản xuất, tôi sẽ luôn tách biệt mối quan tâm của mình một cách hợp lý và có một dự án api dành riêng.

Tôi đã tìm thấy dự án seeder này https://github.com/damienbod/AngularWebpackVisualStudio/ cho phép bạn phát triển và lưu trữ máy khách và máy chủ trong một dự án Visual Studio (2017).

Tôi đồng ý với ý kiến ​​của @CountZero về những lợi ích của việc sử dụng hai trang web để lưu trữ (đặc biệt là sự phân tách mối quan tâm) nhưng nhược điểm lớn đối với tôi là phải bật hỗ trợ CORS trong API của bạn khi trong hầu hết các trường hợp, người tiêu dùng API duy nhất của bạn là kết thúc khách hàng riêng. Tôi không phải là chuyên gia về CORS nhưng điều này chỉ cảm thấy như một chi phí không cần thiết và cũng đi kèm với các mối đe dọa bảo mật bổ sung.

Chà, rõ ràng bạn có thể tách chúng thành hai giải pháp, thêm một dự án khác vào giải pháp hoặc đưa chúng vào cùng một dự án. Tôi sẽ nói những gì tôi sẽ làm.

IMHO, nếu bạn muốn tận dụng các Phiên trong IIS và / hoặc ẩn quy trình xác thực trong API, hãy viết góc trong Visual Studio. VS2015 có sự tích hợp khá tốt (intellisense) với góc cạnh nếu bạn cài đặt các tiện ích mở rộng phát triển web. Tôi phải nói rằng cách này sẽ nhỏ gọn và di động hơn.

Nếu bạn định thêm các trang tài liệu về dự án phụ trợ, thì hãy tách chúng thành các dự án của riêng họ (cùng một giải pháp) và phục vụ api từ tên miền phụ hoặc thư mục con.

Nếu bạn không quan tâm đến bất kỳ điều nào ở trên và bạn cảm thấy thoải mái hơn với cách bạn đã quen, hãy thực hiện nó. Nếu bạn sắp có xác thực dựa trên mã thông báo, bạn có thể tách riêng các dự án mà không nghi ngờ gì.

Trong VS 2015, bạn có tùy chọn bắt đầu nhiều dự án trong giải pháp của mình khi gỡ lỗi miễn là bạn đặt các URL dự án khác nhau cho mỗi dự án.

Ví dụ: bạn sẽ đặt dự án ứng dụng Angular của mình để chạy http://localhost:55000/và dự án API có thể được đặt để chạy http://localhost:55000/api. Bạn đặt thuộc tính URL dự án trong hộp thoại Thuộc tính dự án trên tab Web.

Sau đó, để đặt nhiều dự án khởi động, trong hộp thoại Thuộc tính giải pháp trong Thuộc tính chung, chọn nút Dự án khởi động. Ở bên phải, bạn sẽ tìm thấy các tùy chọn cho Single startup projectvà Multiple startup projects. Chọn nút radio Nhiều dự án khởi động. Sau đó chọn Hành động thích hợp bên cạnh dự án Angular của bạn (Bắt đầu mà không cần gỡ lỗi vì đó là Angular và bạn có thể sẽ gỡ lỗi trong trình duyệt), sau đó bên cạnh dự án API của bạn, chọn Bắt đầu.

Bây giờ khi bạn nhấn chạy, ứng dụng Angular của bạn sẽ mở trong trình duyệt và API web cũng sẽ bắt đầu chạy. Bạn có thể đặt điểm dừng trong các phương thức API Web của mình và đánh chúng từ ứng dụng Angular.