각도 설계 패턴: MVC, MVVM 또는 MV*?

각도 설계 패턴: MVC, MVVM 또는 MV*?

각도 1.x(각도)JS)는 양방향 데이터 바인딩 기능 때문에 MV* 설계 원칙을 다소 따르고 있었습니다.

Angular2는 React 개발자들에게 익숙한 개념인 구성요소 기반 UI를 채택하고 있습니다.어떤 의미에서 Angular 1.x 컨트롤러와 지침은 새로운 Angular 2 구성 요소로 모호합니다.

즉, 각도 2에는 관리자와 지시자가 없습니다.대신 구성 요소에는 구성 요소가 나타낼 HTML 태그에 해당하는 선택기와 구성 요소가 채울 HTML 템플릿을 지정하는 @View가 있습니다.

를 들어 Angular2가 .@Component과 기사를목표니다합시과록▁a▁displays▁that를 표시합니다.class아티클 개체를 정의합니다.

class Article {
title: string;
link: string;
votes: number;

constructor(title: string, link: string, votes?: number){
    this.title = title;
    this.link = link;
    this.votes = votes || 0;
}

이는 MVC 패턴에서 모델로 간주됩니다.

이 하는 은 무엇인가요?Angular가장 가까운 곳을 따라가십니까?

Angular 2는 실제로 MVC가 아닙니다(하지만 평행선을 그릴 수 있다고 생각합니다).구성요소 기반입니다.설명하겠습니다.

각도 1은 MVC 및 MVVM(MV*)입니다.Angular 1은 몇 가지 이유로 획기적이었지만, 주요 이유 중 하나는 Dependency Injection을 사용했기 때문입니다.이는 Backbone 및 Knockout과 같은 다른 JS Framework와 비교했을 때 새로운 개념이었습니다.

그런 다음 React가 출시되어 프런트 엔드 아키텍처를 완전히 혁신했습니다.그것은 프론트 엔드가 MVC와 MVVM 이외의 다른 옵션에 대해 더 많이 생각하게 만들었습니다.대신 구성요소 기반 아키텍처라는 아이디어를 만들었습니다.이것은 HTML & JavaScript 이후 프런트 엔드 아키텍처의 가장 중요한 변화 중 하나로 간주될 수 있습니다.

Angular 2(및 Angular 1.5.x)는 React의 접근 방식을 채택하고 구성요소 기반 아키텍처를 사용하기로 결정했습니다.그러나 MVC, MVVM 및 Angular 2 사이에 약간의 유사점을 그릴 수 있기 때문에 약간 혼란스러울 수 있다고 생각합니다.

그러나 Angular 2에는 컨트롤러 또는 View 모델이 없습니다(수공으로 제작하지 않는 한).대신 템플릿(보기), 클래스 및 메타데이터(데코레이터)로 구성된 구성요소가 있습니다.

예를 들어 모델은 데이터를 보유하는 클래스입니다(예: @angular/http를 사용하여 http 서비스에서 반환하는 데이터를 보유하는 데이터 계약).메서드와 속성(논리)을 추가하는 새 클래스를 만든 다음 모델과 클래스를 병합할 수 있습니다.이렇게 하면 뷰 모델과 같은 것이 만들어집니다.그런 다음 구성요소 내에서 이 View Model을 사용할 수 있습니다.

그러나 구성 요소의 클래스 또는 서비스를 View Model 또는 Controller라고 부르는 것은 정확하지 않습니다.구성요소에는 템플릿 및 클래스가 포함됩니다.IMO 이것은 Liskov의 이론과 약간 유사합니다 - 오리는 오리가 아닙니다 - MVC 또는 MVVM 패턴이 다르므로 구성요소에 강제로 넣으려고 하지 마십시오.각도 2를 성분으로 생각합니다.하지만 저는 왜 사람들이 그들의 초기 이해를 돕기 위해 유사점을 그리는지 알 수 있습니다.

Angular는 또한 다음 버전의 JavaScript(ECMAScript 6)에 포함된 모듈을 사용합니다.JavaScript는 항상 네임스페이스와 코드 구성에 문제가 있었기 때문에 매우 강력합니다.이것이 바로 수입과 수출이 구성요소로 들어오는 부분입니다.

유용한 링크:

https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c

각도 2가 mvc입니까?

Angular 1 및 Angular 2는 모두 MVC(모델, 뷰, 컨트롤러) 패턴을 따릅니다.

Angular 1에서 HTML 마크업은 View, Controller는 Controller, Service(데이터 검색에 사용되는 경우)는 모델입니다.

Angular 2에서 템플릿은 View, 클래스는 Controller, 서비스(데이터 검색에 사용된 경우)는 모델입니다.

Angular는 클라이언트 측 프레임워크이므로 Angular가 따르는 MVC 패턴을 MVVC(Model, View, View Controller)라고 할 수 있습니다.

저는 M** 표기법(약간 남용되고 안개가 낀 것)을 사용하는 것에 그다지 관심이 없습니다.어쨌든 제 생각에 가장 간단하고 효과적인 방법은 Angular2:

클래스(당신의 경우 기사)는 모델을 나타냅니다.

구성요소 병합 보기(템플릿) 및 컨트롤러(유형 스크립트 로직)

도움이 되길 바랍니다.

AngularJS를 지원하는 MVC 및 MVVM

MVC 설계 패턴

우선, MVC 디자인 패턴은 AngularJS에만 국한되지 않으며, 다른 많은 프로그래밍 언어에서 이 패턴을 보고 구현했을 것입니다.

MVC 설계 패턴은 AngularJS에서 볼 수 있지만, 그 전에 MVC 설계 패턴에 포함된 모든 것을 살펴보겠습니다.

모델: 모델은 데이터에 불과합니다.보기: 보기는 이 데이터를 나타냅니다.컨트롤러: 컨트롤러가 둘 사이를 중재합니다.

MVC에서는 뷰를 변경해도 모델에서 업데이트되지 않습니다.그러나 AngularJS에서는 2-way binding이라는 것이 있으며 이 2-way binding을 통해 MVVM 설계 패턴을 구현할 수 있다고 들었습니다.

MVVM에는 기본적으로 다음 3가지가 포함됩니다.

MMVM 설계 패턴에서 모델 뷰 모델 컨트롤러는 실제로 뷰 모델로 대체되었습니다.View Model은 다시 컨트롤러와 같은 자바스크립트 함수에 불과하며 뷰와 모델 간의 관계를 유지하는 역할을 합니다. 하지만 여기서 차이점은, 우리가 뷰를 업데이트하면, 뷰는 모델에서 업데이트되고, 모델에서 변경되고, 뷰에 표시된다는 것입니다. 이것이 바로 양방향 바인딩입니다.

이것이 우리가 Angular라고 말하는 이유입니다.JS는 MVVM 설계 패턴을 따릅니다.

내 의견으로는, 만약 당신이 다음과 같은 규약을 사용하고 싶다면 MVVM을 사용하여 Angular 2에서 개발할 수 있습니다.

1. 구성 요소에는 뷰(템플릿) 및 뷰 모델(클래스)이 포함됩니다.
2. 모델을 놓치기만 하면 모델을 일반 TypeScript 클래스로 만들고 뷰 모델에 생성자 매개 변수로 전달할 수 있습니다.

이 기술은 PRISM과 WPF에서 사용할 수 있는 기술과 매우 유사하며 MVVM을 사용하여 모든 것을 개발합니다(원하는 경우).

Angular(버전 2 이상 제외)에서는 데이터 바인딩 기능을 사용하고 있습니다.이 경우 컨트롤러가 V&M 간의 바인딩을 유발하기 때문에 이 데이터 바인딩 기능은 MVVM 패턴화 애플리케이션을 적용합니다(보기 변경으로 인해 모델이 변경되고 그 반대도 발생함). 따라서 MVC 용어에서 'C'를 'MVVM'을 제공하는 'VM'으로 바꿀 수 있습니다.

언급URL : https://stackoverflow.com/questions/36950582/angular-design-pattern-mvc-mvvm-or-mv