Angular와 ASP.NET MVC / Web API를 함께 사용합니까?

87

ASP.NET MVC / Web API를 사용하여 왔으며 이제 Angular를 사용하기 시작했지만 적절한 혼합 방법이 명확하지 않습니다.

Angular를 사용하면 MVC 서버 측 개념이 여전히 가치를 제공합니까? 아니면 순전히 각 HTTP 호출에 대한 데이터를 얻기 위해 웹 API를 엄격하게 사용해야합니까?

Angular로 전환하는 ASP.NET MVC 사람에 대한 모든 팁이 도움이 될 것입니다.

asp.net-mvc  angularjs  asp.net-mvc-4 
— user2256870
소스
4
상황에 따라 다르 겠지만 "순전히 각 HTTP 호출에 대한 데이터를 얻기 위해 웹 API를 엄격하게 사용해야 하는가"가 올바른 방법이라고 생각합니다.
— MikeSmithDev
다음은 ASP.NET Core Web API 백엔드를 사용하여 Angular 앱을 빌드하기위한 자습서입니다.-> medium.com/@levifuller/…
— Levi Fuller

답변:

113

순수 웹 API

저는 ASP.NET MVC로 꽤 하드 코어했지만 Angular를 만났기 때문에 서버 측 콘텐츠 생성 프레임 워크를 사용 하는 이유가 하나도 없습니다 . Pure Angular / REST (WebApi)는 더 풍부하고 부드러운 결과를 제공합니다. 훨씬 더 빠르고 펑키 한 해킹없이 데스크톱 애플리케이션에 매우 가까운 웹 사이트를 구축 할 수 있습니다.

Angular에는 약간의 학습 곡선이 있지만 팀이이를 마스터하면 더 짧은 시간에 훨씬 더 나은 웹 사이트를 구축 할 수 있습니다. 주로 이것은 더 이상 이러한 모든 상태 (적은) 문제가 없다는 사실과 관련이 있습니다.

예를 들어 기존의 서버 측 프레임 워크가 있는 마법사 양식 을 상상해보십시오 . 각 페이지는 별도로 확인하고 제출해야합니다. 페이지의 내용이 이전 페이지의 값에 따라 달라질 수 있습니다. 사용자가 뒤로 버튼을 눌러 이전 양식을 다시 제출하고있을 수 있습니다. 클라이언트의 상태를 어디에 저장합니까? Angular 및 REST를 사용할 때 이러한 모든 합병증은 존재하지 않습니다.

그러니 .. 어두운면으로 오세요. 우리는 쿠키를 가지고 있습니다.

비슷한 질문

— 없는
소스
저는 Angular를 통한 앱 개발의 속도와 부드러움에 동의합니다. MVC 또는 WebForms (ugh)에서는 이번에 마크 업을 뱉어내는 데 시간을 소비 한 다음 클라이언트 코드를 추가하는 몇 번의 패스를 수행해야합니다.이 작업은 이상하고 노동 집약적이며 연결이 끊어진 특성으로 인해 간단한 일을하는 데 많은 시간이 걸립니다.
— moribvndvs 2014 년
3
@Narayana; 이것은 SEO 사랑을 제공합니다.
— null
5
특정 모델의 속성 이름을 바꿀 때 AngularJS를 "마법의 문자열"로 파헤칠 필요가 없기 때문입니까? Angular는 좋지만 .net의 엄격한 유형 안전 세계에서 더 긴밀한 통합을 통해 서버 측에서 유형 안전을 활용할 수 있습니다.
— Sleeper Smith
6
@Sleeper Smith : 팀원들과 여러 번이 논쟁을 해왔지만, 결국 코드 규칙 , 단위 테스트 및 우려 분리 는 세상의 모든 유형 안전성 보다 훨씬 더 많은 것을 제공합니다 . 나도 JS 가 C # 과 같은 것으로 대체되는 것을 보고 싶지만 실제로는 그렇지 않습니다. 중요한 것은 달성 할 수있는 결과입니다. 귀하의 고객은 아마도 귀하의 코딩 선호도에 관심이 없을 것입니다. 그들은 멋지고 부드러운 성능의 웹 사이트를 원하며 빠른 속도를 원합니다. Angular 는 그 일을 완료합니다.
— 널
1
예를 들어 KnockoutJS를 사용할 때 일반적인 ASP.NET MVC 앱을 만드는 데 사용했으며 각 뷰는 MVC 컨트롤러에서 모델 데이터를 수신했습니다. 그런 다음 서버의이 데이터는 JSON으로 직렬화되고 KnockoutJS는이를 관찰 가능한 데이터로 변환하므로 양방향 데이터 바인딩을 얻을 수 있습니다. 그리고 그것은 훌륭했습니다! 하지만 AngularJS가 자체 라우팅 시스템을 가지고 있기 때문에 우리는 무엇을할까요? MVC 라우팅은 어떻게됩니까? 우리는 그것을 전혀 사용합니까? 이제 "_Layout"뷰와 @RenderBody ()는 어떻게됩니까?
— AlexRebula
43

AngularJS는 단일 페이지 애플리케이션 패러다임과 더 관련되어 있으므로 마크 업을 렌더링하는 서버 측 기술의 이점을 많이 얻지 못합니다. 함께 사용하는 것을 방해하는 기술적 이유는 없지만 실제적으로는 왜 그렇게 하시겠습니까?

SPA는 필요한 자산 (JS, CSS 및 HTML보기)을 검색하고 자체적으로 실행되며 데이터를 보내거나 검색하기 위해 서비스와 다시 통신합니다. 따라서 이러한 서비스 (인증 등의 다른 수단 포함)를 제공하려면 서버 측 기술이 여전히 필요하지만 MVC가 수행하는 작업을 제외하고는 노력의 중복이기 때문에 렌더링 부분은 크게 관련이없고 특히 유용하지 않습니다. 서버 측에서 Angular는 클라이언트에서 수행합니다. Angular를 사용하는 경우 최상의 결과를 위해 클라이언트에서 사용하고 싶습니다. Angular 포스트 HTML 양식을 만들고 MVC 작업에서 부분보기를 검색 할 수 있지만 Angular의 가장 좋고 쉬운 기능을 놓치고 삶을 더 어렵게 만듭니다.

MVC는 매우 유연하며 SPA 응용 프로그램의 서비스 호출에 사용할 수 있습니다. 그러나 WebAPI는 이러한 서비스에 대해 더 세밀하게 조정되고 사용하기가 조금 더 쉽습니다.

기존 WebForms 및 MVC 응용 프로그램에서 마이그레이션 한 몇 가지를 포함하여 여러 AngularJS 응용 프로그램을 작성했으며 ASP.NET 측면은 AngularJS 응용 프로그램을 실제 클라이언트로 제공하고 응용 프로그램 계층을 호스팅하기위한 플랫폼으로 발전합니다. 클라이언트는 REST를 통해 통신합니다 (WebAPI 사용). MVC는 훌륭한 프레임 워크이지만 일반적으로 이러한 종류의 응용 프로그램에서 작업없이 자신을 찾습니다.

ASP.NET 응용 프로그램은 인프라의 또 다른 계층이되어 책임이 다음으로 제한됩니다.

  • 종속성 컨테이너를 호스팅합니다.
  • 비즈니스 로직 구현을 컨테이너에 연결합니다.
  • JS 및 CSS 용 자산 번들을 설정합니다.
  • WebAPI 서비스를 호스팅합니다.
  • 보안을 강화하고 로깅 및 진단을 수행합니다.
  • 성능을 위해 애플리케이션 캐시와 상호 작용합니다.

SPA의 또 다른 장점은 팀의 대역폭을 늘릴 수 있다는 것입니다. 한 그룹은 서비스를 폭발시킬 수 있고 다른 그룹은 클라이언트 앱에 배치 할 수 있습니다. REST 서비스를 쉽게 스텁 또는 모의 처리 할 수 ​​있으므로 모의 서비스에서 완전히 작동하는 클라이언트 앱을 사용할 수 있고 완료되면 실제 서비스로 교체 할 수 있습니다.

Angular에 미리 투자해야하지만 큰 성과를 거두었습니다. 이미 MVC에 익숙하기 때문에 몇 가지 핵심 개념에 대해 잘 알고 있습니다.

— moribvndvs
소스
좋아, 그래서 나는 Angular를 사용하고 API, Entity Framework, 보안 등으로 생산성을 유지하기 위해 .NET 백엔드를 갖고 싶습니다. 내 페이지에 여전히 서버 측 마스터-자식 구성 / 레이아웃이 필요합니까? WebForms (아니요-viewstate를 얻음), MVC, ASP.NET 웹 페이지 또는 다른 것을 위해 무엇을 사용해야합니까?
— Sean
1
기술적으로는 서버 페이지, 레이아웃 페이지 등이 필요하지 않습니다. 단순한 HTML 만 있으면됩니다. 그러나 애플리케이션의 크기와 복잡성에 따라 기능별로 Angular 앱을 여러 개의 개별 애플리케이션으로 나누고 싶을 수 있습니다 (일반 탐색 등을 사용하여 한 앱에서 다른 앱으로 연결할 수 있음). 이 경우 레이아웃 페이지를 사용하여 일을 건조하고 일관되게 유지할 수 있습니다. 또한 CSS 또는 스크립트에 자산 번들을 사용하고 있으며 Razor 또는 이러한 것들을 잘 결합하는 루트 페이지를 가지고있을 것입니다.
— moribvndvs
1
저는 3 년 동안 ASP.NET MVC를 최소 8 개의 큰 프로젝트에서 사용해 왔으며이 훌륭하고 성숙한 서버 측 프레임 워크에 익숙해졌습니다. 그러나 저는 SPA의 중요성을 알고 Angular를 좋아합니다. 그래서 지금은 미구엘 카스트로가 불렀던 것처럼 미니 SPA 나 하이브리드 앱 또는 "SPA 사일로"를 선택했습니다. 제 질문은-인증 및 인증은 어떻습니까? ASP.NET MVC가이 작업을 아주 쉽게 처리 할 수 ​​있다는 것을 알고 있습니다. ASP.NET MVC없이 어떻게 수행됩니까?
— AlexRebula
1
@AlexRebula WebApi와 MVC에서 인증을 수행하려는 방법에 대한 질문이 더 많다고 생각합니다. 일반적으로 쿠키 (WebApi와 함께 FormsAuth 또는 ASP.NET ID 쿠키를 사용할 수도 있음) 또는 헤더 (OAuth 등)를 사용합니다. 두 방법 모두 Web API와 Angular에서 완전히 지원되지만 구현에 대한 선택을해야합니다. 당신이하고있는 일과 구체적인 목표가 무엇인지에 대한 자세한 정보 없이는 더 정확한 답을 제공하기가 어렵습니다.
— moribvndvs
@HackedByChinese 이해합니다. 그리고 지금 나는 ... 웹 API 더 파고 더 많은 시간이 있다면 정말 좋을 것 같아요
— AlexRebula
6

작업중인 프로젝트에 따라 다릅니다.

angularJS가 당신에게 새로운 것이 있다면 나는 시작하기 위해 작은 위험 / 압력 프로젝트를 선택하고 올바른 방식으로 일하는 방법을 배우고 싶습니다 (압박, 기한 때문에 Angularjs를 사용하는 많은 프로젝트를 잘못 보았습니다 ... 예를 들어 JQuery를 사용하거나 컨트롤러 내부의 DOM에 액세스하는 등 적절한 방법으로 학습 할 시간이 부족합니다.

프로젝트가 그린 필드이고 AngularJS에 대한 경험이 있다면 ASP.net MVC를 포기하고 서버 측에서 순수한 REST / WebAPI를 사용하는 것이 좋습니다.

기존 프로젝트 인 경우 복잡한 기능 하위 집합을 선택하고 해당 페이지를 별도의 angularJS 앱으로 빌드 할 수 있습니다 (예 : 앱은 표준 단순 / 중간 복잡성 Razor 기반 페이지의 큰 무리로 구성되지만 필요한 고급 편집기 / AngularJS로 빌드 할 대상이 될 수 있습니다.)

— Braulio
소스
1
나는 당신의 대답을 좋아하고 당신이 말한 대부분에 동의합니다. 그러나 나를 괴롭히는 한 가지가 있습니다. ASP.NET MVC는 인증 및 권한 부여와 같은 훌륭한 기본 제공 기능을 갖춘 매우 훌륭하고 성숙한 서버 측 웹 프레임 워크입니다. 순수한 REST / WebAPI를 사용하기 위해 ASP.NET MVC를 포기할 수 있다고 썼습니다. 이제 궁금합니다. 인증 및 권한 부여가 ASP.NET MVC 에서처럼 쉽게 수행 할 수 있습니까? Google 등을위한 OAuth를 구현하는 것이 얼마나 쉬운지는 말할 것도 없습니다. 제 질문은 REST / WebAPI로 이러한 모든 작업을 수행하는 것이 얼마나 쉬운 지입니다. 그래서 나는 미니 스파를 고려할 것입니다.
— AlexRebula
우리의 경우에는 모든 http 요청 (http 기본 단일 위치에서 추가)에 토큰을 설정하고 ASP .net MVC / web api AuthorizeAttribute를 사용하여 토큰 및 권한을 확인합니다. 웹 API 메서드 내에서 해당 토큰을 가져와 수행 할 수 있습니다. 더 세밀하게 조정 된 보안 검사. OAuth가 필요한 경우 각도 측면에도 라이브러리가 있습니다.
— Braulio
0

Angular 프레임 워크를 프런트 엔드 개발, 즉 뷰 구성에 사용할 수 있습니다. 강력한 아키텍처를 제공하며 일단 학습하면 Asp.net MVC의 면도기보기 엔진에 비해 이점이 있음을 알게됩니다. 데이터를 가져 오려면 WebAPI를 사용해야하며 이제 ASP.Net MVC 프로젝트는 즉시 WebAPI 및 MVC 컨트롤러를 모두 지원합니다. Angular 및 ASP.Net MVC 응용 프로그램 개발로 아래 링크 시작을 참조 할 수 있습니다.

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

현재 각도 응용 프로그램 용 UI 구성 요소를 개발하는 데 사용할 수있는 두 가지 프레임 워크가 있습니다. 저는 제가 작업 한 앵귤러 프로젝트 중 하나에서이 두 프레임 워크를 모두 사용했습니다.

재질 https://material.angular.io/

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

— Rinoy
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.