Angular2 : MVC, MVVM 또는 MV *

Angular2 : MVC, MVVM 또는 MV *?

---

Angular는 양방향 데이터 바인딩 기능으로 인해 MVV * 디자인 원칙을 어느 정도 따르고있었습니다.

Angular2는 React 개발자에게 익숙한 개념 인 컴포넌트 기반 UI를 채택하고 있습니다. 어떤 의미에서 Angular 1.x 컨트롤러 및 지시문은 새로운 Angular 2 구성 요소로 흐려집니다.

즉, Angular 2에는 컨트롤러와 지시문이 없습니다. 대신 구성 요소에는 구성 요소가 나타낼 html 태그에 해당하는 선택기와 구성 요소가 채울 HTML 템플릿을 지정하는 @View가 있습니다.

Angular2는 여전히 양방향 데이터 바인딩을 구현하지만 예를 들어 @Component기사 목록을 표시하는 a와 class기사 객체를 정의하는 a 가있는 경우 모델로 구성되지 않습니다 .

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가 아닙니다 (하지만 평행선을 그릴 수 있다고 가정합니다). 구성 요소 기반입니다. 설명하겠습니다.

Angular 1은 MVC 및 MVVM (MV *)입니다. Angular 1은 여러 가지 이유로 획기적 이었지만 주된 이유 중 하나는 Dependency Injection을 사용했기 때문입니다. 이것은 Backbone 및 Knockout과 같은 다른 JS 프레임 워크에 비해 새로운 개념이었습니다.

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

Angular 2 (및 Angular 1.5.x)는 React의 접근 방식을 채택하고 Component Based Architecture를 사용하기로 결정했습니다. 그러나 MVC, MVVM 및 Angular 2간에 약간의 유사점을 그릴 수 있으므로 약간 혼란 스러울 수 있습니다.

이렇게 말했지만 Angular 2에는 컨트롤러 또는 ViewModel이 없습니다 (손으로 제작하지 않는 한). 대신 템플릿 (뷰와 같은), 클래스 및 메타 데이터 (데코레이터)로 구성된 구성 요소가 있습니다.

예를 들어, 모델은 데이터를 보유하는 클래스입니다 (예 : @ angular / http를 사용하여 http 서비스에서 반환 된 데이터를 보유하는 데이터 계약). 메서드와 속성 (로직)을 추가하는 새 클래스를 만든 다음 Model과 Class를 병합 할 수 있습니다. 이것은 ViewModel과 같은 것을 만듭니다. 그런 다음 컴포넌트 내에서이 ViewModel을 사용할 수 있습니다.

그러나 구성 요소의 클래스 또는 서비스를 호출하는 것은 ViewModel 또는 Controller가 실제로 올바르지 않습니다. 구성 요소에는 템플릿과 클래스가 포함됩니다. IMO는 Liskov의 이론과 비슷합니다. 오리는 오리가 아닙니다. MVC 또는 MVVM 패턴을 구성 요소에 강제로 넣으려고하지 마십시오. Angular 2를 구성 요소로 생각하십시오. 그러나 사람들이 초기 이해를 돕기 위해 평행선을 그리는 이유를 알 수 있습니다.

Angular는 향후 JavaScript (ECMAScript 6) 버전의 일부인 모듈도 사용합니다. JavaScript는 항상 네임 스페이스 및 코드 구성에 문제가 있었기 때문에 이것은 매우 강력합니다. 여기에서 컴포넌트로 가져 오기와 내보내기가 들어옵니다.

유용한 링크:

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

angular2는 mvc입니까?

---

Angular 1과 Angular 2는 모두 MVC (Model, View, Controller) 패턴을 따릅니다.

Angular 1에서 HTML 마크 업은 뷰, 컨트롤러는 컨트롤러, 서비스 (데이터 검색에 사용되는 경우)는 모델입니다.

Angular 2에서 템플릿은 뷰이고 클래스는 컨트롤러이고 서비스 (데이터 검색에 사용되는 경우)는 모델입니다.

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

---

나는 M ** 표기법을 사용하는 데 너무 열중하지 않습니다. 어쨌든 제 생각에 가장 간단하고 효과적인 방법은 Angular2에 있습니다.

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

컴포넌트는 뷰 (템플릿에서)와 컨트롤러 (타입 스크립트 로직)를 병합합니다.

도움이 되길 바랍니다

---

AngularJS를 사용한 MVC 및 MVVM

MVC 디자인 패턴

우선, MVC 디자인 패턴은 AngularJS에만 국한되지 않습니다. 다른 많은 프로그래밍 언어에서이 패턴을 보거나 구현 했어야합니다.

MVC 디자인 패턴은 AngularJS에서 볼 수 있지만 들어가기 전에 MVC 디자인 패턴에 포함 된 내용을 살펴 보겠습니다.

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

MVC에서 뷰를 변경하면 모델에서 업데이트되지 않습니다. 그러나 AngularJS에는 2-way 바인딩이라는 것이 있고이 2-way 바인딩은 MVVM 디자인 패턴을 가능하게한다고 들었습니다.

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

Model View View Model Controller is actually replaced by View Model in MMVM design pattern. View Model is nothing but a JavaScript function which is again like a controller and is responsible for maintaining relationship between view and model, but the difference here is, if we update anything in view, it gets updated in model, change anything in model, it shows up in view, which is what we call 2-way binding.

This is why we say AngularJS follows MVVM design pattern.

---

In my humble opinion you can develop in Angular 2 using MVVM if you want to using some conventions:

1. A component contains the view (the template) and the viewmodel (the class).
2. You only miss the model and you can create it as a normal TypeScript class and pass it to the viewmodel as a constructor parameter.

The technology is pretty similar to the one available in PRISM and WPF and there you develop everything using MVVM (if you want to).

---

In Angular(excluding version 2 and above) we are using data binding feature. This data binding feature enforces MVVM pattern in ng application because controller in this case causing binding between V&M (changes to view causes change in model and vice versa) So in MVC terminology we can replace 'C' with 'VM' which give 'MVVM'

ReferenceURL : https://stackoverflow.com/questions/36950582/angular2-mvc-mvvm-or-mv