Trộn Angular và ASP.NET MVC / Web api?


87

Tôi bắt đầu sử dụng ASP.NET MVC / Web API và bây giờ tôi đang bắt đầu sử dụng Angular nhưng tôi không rõ về cách thích hợp để kết hợp chúng.

Khi tôi đang sử dụng Angular, các khái niệm phía máy chủ MVC có còn cung cấp bất kỳ giá trị nào không? Hay tôi nên hoàn toàn sử dụng API Web để lấy dữ liệu cho các lệnh gọi HTTP góc cạnh?

Bất kỳ lời khuyên nào bạn có để một anh chàng ASP.NET MVC chuyển sang Angular sẽ hữu ích


4
Nó sẽ phụ thuộc, nhưng tôi nghĩ rằng "tôi có nên sử dụng Web API hoàn toàn để lấy dữ liệu cho các lệnh gọi HTTP góc cạnh" là cách chính xác để làm điều đó.
MikeSmithDev

Dưới đây là một hướng dẫn để xây dựng một ứng dụng kiễu góc với một API backend ASP.NET Lõi Web -> medium.com/@levifuller/...
Levi Fuller

Câu trả lời:


113

API web thuần túy

Tôi đã từng khá khó tính với ASP.NET MVC nhưng kể từ khi tôi gặp Angular, tôi không hiểu lý do tại sao tôi lại sử dụng bất kỳ khung tạo nội dung phía máy chủ nào . Pure Angular / REST (WebApi) cho kết quả phong phú và mượt mà hơn. Nó nhanh hơn nhiều và cho phép bạn xây dựng các trang web khá gần với các ứng dụng dành cho máy tính để bàn mà không gặp phải bất kỳ vụ hack nào.

Angular thực sự có một chút đường cong học tập, nhưng một khi nhóm của bạn đã thành thạo nó, bạn sẽ xây dựng các trang web tốt hơn nhiều trong thời gian ngắn hơn. Chủ yếu điều này liên quan đến thực tế là bạn không còn gặp phải tất cả các vấn đề trạng thái (ít) này nữa.

Ví dụ, hãy tưởng tượng một biểu mẫu trình hướng dẫn với bất kỳ khuôn khổ phía máy chủ truyền thống nào. Mỗi trang cần được xác nhận và gửi riêng. Có thể nội dung của trang phụ thuộc vào các giá trị từ trang trước đó. Có thể người dùng đã nhấn nút quay lại và đang gửi lại biểu mẫu trước đó. Chúng tôi lưu trữ trạng thái của máy khách ở đâu? Tất cả những biến chứng này không tồn tại khi sử dụng Angular và REST.

Vì vậy ... hãy đến với mặt tối ... chúng ta có bánh quy.

Câu hỏi tương tự


Tôi đồng ý lại: tốc độ và sự mượt mà của việc phát triển ứng dụng thông qua Angular. Trong MVC hoặc WebForms (ugh), bạn dành thời gian này để nó lấy ra đánh dấu, và sau đó phải thực hiện một vài thao tác gắn mã khách hàng vào nó, điều này cảm thấy kỳ lạ, tốn nhiều công sức và do tính chất không kết nối, lãng phí nhiều thời gian làm những việc đơn giản.
moribvndvs

3
@Narayana; Điều này cung cấp một số tình yêu SEO.
null

5
Bởi vì khi tôi đổi tên một thuộc tính trên một mô hình cụ thể, tôi không phải tìm hiểu về AngularJS để tìm "chuỗi ma thuật"? Angular là tốt, nhưng trong một thế giới an toàn kiểu nghiêm ngặt của .net, tích hợp chặt chẽ hơn cho phép bạn tận dụng an toàn kiểu từ phía máy chủ.
Sleeper Smith,

6
@Sleeper Smith: Tôi đã tranh luận điều này nhiều lần với những người trong nhóm của mình, nhưng cuối cùng thì các quy ước về mã , kiểm tra đơn vịtách các mối quan tâm cung cấp nhiều hơn tất cả các loại an toàn trên thế giới. Tôi cũng rất muốn thấy JS được thay thế bằng một thứ như C # , nhưng thực tế thì không phải vậy. Tất cả những gì quan trọng là kết quả bạn có thể đạt được. Khách hàng của bạn có thể không quan tâm đến sở thích viết mã của bạn, họ muốn một trang web bắt mắt, hoạt động mượt mà và họ muốn nó nhanh chóng. Angular hoàn thành công việc đó.
null

1
Ví dụ: khi sử dụng KnockoutJS, tôi đã từng tạo một ứng dụng ASP.NET MVC bình thường và mỗi chế độ xem sẽ nhận dữ liệu mô hình từ Bộ điều khiển MVC. Sau đó, dữ liệu này từ máy chủ sẽ được tuần tự hóa thành JSON và từ đó KnockoutJS sẽ chuyển đổi nó thành dữ liệu có thể quan sát được, vì vậy tôi sẽ nhận được ràng buộc dữ liệu hai chiều. Và điều đó thật tuyệt! Nhưng chúng ta phải làm gì bây giờ, vì AngularJS có hệ thống định tuyến của riêng nó? Điều gì xảy ra với định tuyến MVC? Chúng tôi có sử dụng nó ở tất cả? Điều gì sẽ xảy ra với chế độ xem "_Layout" và @RenderBody ()?
AlexRebula

43

AngularJS được liên kết nhiều hơn với mô hình ứng dụng trang đơn và như vậy, không được hưởng lợi nhiều từ các công nghệ phía máy chủ hiển thị đánh dấu. Không có lý do kỹ thuật nào ngăn cản việc bạn sử dụng chúng cùng nhau, nhưng theo nghĩa thực tế, tại sao bạn lại như vậy?

SPA truy xuất các tài sản mà nó cần (các chế độ xem JS, CSS và HTML) và tự chạy, liên lạc lại với các dịch vụ để gửi hoặc truy xuất dữ liệu. Vì vậy, công nghệ phía máy chủ vẫn cần thiết để cung cấp các dịch vụ đó (cũng như các phương tiện khác như xác thực và lượt thích), nhưng các phần kết xuất phần lớn không liên quan và không đặc biệt hữu ích vì đó là sự trùng lặp của các nỗ lực, ngoại trừ MVC thì không. ở phía máy chủ và Angular thực hiện nó trên máy khách. Nếu bạn đang sử dụng Angular, bạn muốn nó trên máy khách để có kết quả tốt nhất. Bạn có thể tạo các biểu mẫu Angular post HTML và truy xuất các chế độ xem một phần từ các hành động MVC, nhưng bạn sẽ bỏ lỡ các tính năng tốt nhất và dễ dàng nhất của Angular và khiến cuộc sống của bạn trở nên khó khăn hơn.

MVC khá linh hoạt và bạn có thể sử dụng nó để phục vụ các cuộc gọi từ ứng dụng SPA. Tuy nhiên, WebAPI được tinh chỉnh nhiều hơn và dễ sử dụng hơn một chút cho các dịch vụ như vậy.

Tôi đã viết một số ứng dụng AngularJS, bao gồm một số ứng dụng được di chuyển từ các ứng dụng WebForms và MVC đã có từ trước, và khía cạnh ASP.NET phát triển theo hướng nền tảng để cung cấp ứng dụng AngularJS làm ứng dụng khách thực tế và để lưu trữ lớp ứng dụng khách hàng giao tiếp với thông qua REST (sử dụng WebAPI). MVC là một khuôn khổ tốt, nhưng nó thường không có việc làm trong các loại ứng dụng này.

Ứng dụng ASP.NET trở thành một lớp khác đối với cơ sở hạ tầng, nơi trách nhiệm của nó được giới hạn ở:

  • Lưu trữ vùng chứa phụ thuộc.
  • Đưa các triển khai logic nghiệp vụ vào vùng chứa.
  • Thiết lập gói nội dung cho JS và CSS.
  • Lưu trữ các dịch vụ WebAPI.
  • Thực thi bảo mật, thực hiện ghi nhật ký và chẩn đoán.
  • Giao diện với bộ đệm ứng dụng để tăng hiệu suất.

Một điều tuyệt vời khác về SPA là nó có thể tăng băng thông cho nhóm của bạn. Một nhóm có thể tung ra các dịch vụ trong khi nhóm kia nằm trong ứng dụng khách. Vì bạn có thể dễ dàng khai thác hoặc mô phỏng các dịch vụ REST, bạn có thể có một ứng dụng khách hoạt động hoàn toàn trên các dịch vụ giả và hoán đổi lấy các dịch vụ thực khi chúng hoàn thành.

Bạn phải đầu tư trước vào Angular, nhưng nó sẽ mang lại kết quả lớn. Vì bạn đã quen thuộc với MVC, bạn đã có một số khái niệm cốt lõi.


Được rồi, vì vậy tôi muốn sử dụng Angular và có phần mềm hỗ trợ .NET để duy trì năng suất của mình với API, Entity Framework, bảo mật, v.v. Các trang của tôi vẫn cần cấu hình / bố cục chính-con phía máy chủ chứ? Tôi sử dụng để làm gì - WebForms (nope - sau đó tôi nhận được viewstate), MVC, ASP.NET Web Pages, hoặc thứ gì khác?
Sean

1
Về mặt kỹ thuật, bạn không cần bất kỳ trang máy chủ, trang bố cục, v.v. Chỉ cần HTML đơn giản là được. Tuy nhiên, tùy thuộc vào kích thước và độ phức tạp của ứng dụng, bạn có thể muốn chia ứng dụng Angular của mình thành một số ứng dụng riêng biệt theo chức năng (và bạn có thể liên kết từ ứng dụng này sang ứng dụng khác bằng cách sử dụng một điều hướng chung hoặc bất cứ thứ gì). Trong trường hợp đó, bạn có thể sử dụng trang bố cục để giữ cho mọi thứ KHÔ và nhất quán. Hơn nữa, có thể bạn đang sử dụng các gói nội dung cho CSS hoặc tập lệnh và có các trang gốc là Razor hoặc bất cứ thứ gì sẽ kết hợp tốt những thứ đó lại với nhau.
moribvndvs

1
Tôi đã sử dụng ASP.NET MVC được ba năm cho ít nhất 8 dự án lớn và tôi đã quen với khung công tác phía máy chủ tốt, thuần thục này. Tuy nhiên, tôi biết tầm quan trọng của các SPA và tôi yêu thích Angular, vì vậy bây giờ tôi quyết định sử dụng các SPA mini hoặc các ứng dụng kết hợp ... hoặc "SPA silos" như Miguel Castro đã gọi chúng. Câu hỏi của tôi là - Còn về ủy quyền và xác thực? Tôi biết ASP.NET MVC giảm bớt nhiệm vụ này một cách đáng kể. Làm thế nào điều này được thực hiện mà không có ASP.NET MVC?
AlexRebula,

1
@AlexRebula Tôi nghĩ câu hỏi là câu hỏi về cách bạn muốn thực hiện xác thực trong WebApi và MVC. Thông thường, đó là với cookie (thậm chí bạn có thể sử dụng cookie FormsAuth hoặc ASP.NET Identity với WebApi) hoặc tiêu đề (OAuth, v.v.). Cả hai phương pháp đều được hỗ trợ đầy đủ bởi cả Web API và Angular, nhưng yêu cầu bạn phải lựa chọn cách triển khai. Thật khó để cung cấp cho bạn câu trả lời chính xác hơn nếu không có thêm chi tiết về những gì bạn đang làm và mục tiêu cụ thể của bạn là gì.
moribvndvs

@HackedByChinese Tôi hiểu. Và bây giờ tôi nghĩ rằng nó sẽ thực sự tuyệt vời nếu tôi có thêm thời gian để thâm nhập vào Web API hơn ...
AlexRebula

6

Nó phụ thuộc vào dự án bạn đang làm việc.

Nếu angleJS là thứ gì đó mới mẻ đối với bạn, tôi thà chọn một dự án nhỏ có rủi ro / áp lực thấp để bắt đầu và đảm bảo bạn học cách làm mọi thứ theo đúng cách (Tôi đã thấy nhiều dự án sử dụng Angularjs sai vì áp lực, thời hạn ... thiếu thời gian để tìm hiểu nó một cách thích hợp, ví dụ như sử dụng JQuery hoặc tích lũy DOM bên trong bộ điều khiển, v.v.).

Nếu dự án là một lĩnh vực xanh và bạn đã có một số kinh nghiệm về AngularJS, bạn nên từ bỏ ASP.net MVC và ở phía máy chủ, hãy chuyển sang REST / WebAPI thuần túy.

Nếu đó là một dự án hiện có, bạn có thể chọn một tập hợp con chức năng phức tạp và xây dựng trang đó dưới dạng một ứng dụng angleJS riêng biệt (ví dụ: ứng dụng của bạn bao gồm một loạt các trang dựa trên Razor đơn giản / phức tạp trung bình tiêu chuẩn nhưng bạn cần và trình chỉnh sửa nâng cao / , đó có thể là phần mục tiêu để xây dựng với AngularJS).


1
Tôi thích câu trả lời của bạn và đồng ý với hầu hết những gì bạn nói. Tuy nhiên có một điều làm tôi khó chịu. ASP.NET MVC là một khung công tác web phía máy chủ rất đẹp và hoàn thiện với các tính năng tích hợp tuyệt vời như xác thực và ủy quyền. Bạn đã viết rằng người ta có thể từ bỏ ASP.NET MVC để chuyển sang REST / WebAPI thuần túy. Bây giờ tôi tự hỏi: Liệu xác thực và ủy quyền có dễ thực hiện như trong ASP.NET MVC không? Chưa kể đến việc triển khai OAuth cho Google có dễ dàng như thế nào không, v.v. Vì vậy, câu hỏi của tôi là, làm thế nào để hoàn thành tất cả những điều đó bằng REST / WebAPI dễ dàng như thế nào. Vì vậy, tôi sẽ xem xét để có một SPA mini.
AlexRebula,

Trong trường hợp của chúng tôi, chúng tôi thiết lập mã thông báo trong mỗi yêu cầu http (http mặc định một nơi duy nhất để thêm nó) sử dụng ASP .net MVC / web api AuthorizeAttribute để kiểm tra mã thông báo và quyền, bạn cũng có thể bên trong phương thức api web lấy mã thông báo đó và thực hiện kiểm tra bảo mật được tinh chỉnh hơn. Nếu bạn cần OAuth, cũng có các thư viện ở bên cạnh để giúp bạn điều đó.
Braulio

0

Bạn có thể sử dụng khung công tác Angular để phát triển giao diện người dùng, tức là để xây dựng các khung nhìn. Nó cung cấp cho bạn một kiến ​​trúc mạnh mẽ và một khi bạn tìm hiểu, bạn sẽ thấy nó có lợi thế hơn công cụ xem dao cạo của Asp.net MVC. Để tìm nạp dữ liệu, bạn phải sử dụng WebAPI và hiện tại dự án ASP.Net MVC hỗ trợ cả bộ điều khiển WebAPI và MVC. Bạn có thể tham khảo link dưới đây để bắt đầu phát triển ứng dụng Angular và ASP.Net MVC.

http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/

Có hai khung công tác hiện có sẵn để phát triển các thành phần giao diện người dùng cho các ứng dụng góc cạnh. Tôi đã sử dụng cả hai khuôn khổ này trong một trong những dự án góc cạnh mà tôi đã làm việc.

Chất liệu https://material.angular.io/

PrimeNG https://www.primefaces.org/primeng/#/

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.