2016-04-30 9 views
30

Kątowy był mniej więcej zgodny z zasadą projektowania MVV * z powodu dwukierunkowej funkcji powiązania danych.Angular2: MVC, MVVM lub MV *?

Angular2 przyjmuje interfejs oparty na komponentach, koncepcję, która może być znana programistom React. W pewnym sensie kontrolery i dyrektywy Angular 1.x zacierają się w nowym składniku Angular 2.

Oznacza to, że w Angular 2 nie ma sterowników ani dyrektyw. Zamiast tego składnik ma selektor odpowiadający znacznikowi html, który będzie reprezentował komponent, oraz @View, aby określić szablon HTML komponentu do wypełnienia.

Angular2 nadal realizuje dwukierunkowe wiązania danych, ale nie składa się z modeli na przykład jeśli mam @Component który wyświetla listę artykułów i class, który określa przedmiot artykułu:

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; 
} 

to, w modelu MVC będzie uważany za model.

Biorąc to pod uwagę, jaki wzorzec projektowania robi Angular podążać za najbliższym?

Odpowiedz

6

Nie jestem zbyt entuzjastą używania notacji M ** (rodzaj nadużyty i mglisty). Anyways moim zdaniem najprostszym i najbardziej skutecznym sposobem, aby umieścić go to, że w Angular2:

klasa (artykuł w Twoim przypadku) reprezentuje model

Component łączy się widok (w szablonie) i regulator (logika Typescript)

mam nadzieję, że to pomaga

16

Zarówno kątowa 1 & kątowa 2 są następujące MVC (model, View, Controller) wzorzec.

W ustawieniu kątowym 1 znacznikiem HTML jest widok, kontrolerem jest kontroler & Usługa (gdy używana do pobierania danych) jest modelem.

W Angular 2, szablon jest widokiem, klasa jest kontrolerem & Usługa (kiedy była używana do pobierania danych) jest modelem.

Ponieważ Angular jest szkieletem po stronie klienta, wzór MVC Angular może być nazywany MVVC (Model, Widok, Widok kontroler).

+0

Czy można wyjaśnić nieco więcej, dlaczego 'MVVC'? Dziękuję Ci. – Anatoly

+4

Usługa nie jest modelem. Model jest modelem. Zwykle w frameworkach związanych z MVC faktycznie masz 2 typy modeli (1) Model domeny (2) Model, który dostosowuje model domeny do widoku (czasami nazywany ViewModel). – gusgorman

+2

Nie ukrywam, dlaczego ma tak wiele upiorów. Jest po prostu źle na wielu poziomach i jest bezpośrednio w sprzeczności z powyższą odpowiedzią, która jest o wiele dokładniejsza. –

24

Angular 2 nie jest tak naprawdę MVC (ale przypuszczam, że można narysować podobieństwa). Jest oparty na składnikach. Pozwól mi wyjaśnić:

Kątowe 1 to MVC i MVVM (MV *). Angular 1 był przełomowy z kilku powodów, ale jednym z głównych powodów był fakt, że używał Dependency Injection. To była nowa koncepcja w porównaniu z innymi frameworkami JS, takimi jak Backbone i Knockout.

Następnie React wyszedł i całkowicie przekształcił architekturę front-end. Dzięki temu Front End pomyślał o innych opcjach poza MVC i MVVM. Zamiast tego stworzył ideę architektury opartej na komponentach. Można to uznać za jedną z najbardziej znaczących zmian w architekturze front-endowej od HTML-a w postaci kodu JavaScript &.

Angular 2 (i Angular 1.5.x) postanowił zastosować podejście React i korzystać z architektury opartej na komponentach.Możesz jednak narysować niewielkie podobieństwa między MVC, MVVM i Angular 2, dlatego myślę, że może to być nieco mylące.

Po tym, nie ma żadnych kontrolerów ani ViewModels w Angular 2 (chyba, że ​​je spreparujesz). Zamiast tego są komponenty, które składają się z szablonu (jak widok), klas i metadanych (dekoratorów).

Na przykład Modele to klasy przechowujące dane (np. Kontrakt danych do przechowywania danych zwracanych przez usługę http za pomocą @ kątowego/http). Możemy stworzyć nową klasę, która dodaje metody i właściwości (logikę), a następnie łączy Model i Klasę. Tworzy to coś jak ViewModel. Możemy wtedy użyć tego ViewModel w naszym Komponencie.

Ale aby wywołać klasę komponentu lub usługę, model ViewModel lub kontroler nie jest prawdziwy. Komponent zawiera szablon i klasę. IMO to trochę jak teoria Liskova - kaczka nie jest kaczką - nie próbuj narzucać MVC lub MVVM na Komponenty, ponieważ są różne. Pomyśl o Angular 2 jako składnikach. Ale widzę, dlaczego ludzie rysują podobieństwa, aby pomóc im w zrozumieniu.

Angular używa także modułów, które są częścią nadchodzącej wersji JavaScript (ECMAScript 6). Jest to bardzo potężne, ponieważ JavaScript zawsze miał problemy z obszarami nazw i organizacją kodu. To tutaj importują się i eksportują komponenty.

Przydatne linki:

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

Is angular2 mvc?

http://malcoded.com/angular-2-components-and-mvvm

0

kątowej (z wyłączeniem wersji 2 i wyżej) używamy danych funkcji wiążące. Ta funkcja wiązania danych wymusza wzorzec MVVM w aplikacji ng, ponieważ kontroler w tym przypadku powoduje wiązanie między V & M (zmiany w widoku powodują zmianę w modelu i odwrotnie) Tak więc w terminologii MVC możemy zastąpić "C" przez "VM", która daje " MVVM”

0

moim skromnym zdaniem można rozwijać w Kątowymi 2 przy użyciu MVVM jeśli chcesz korzystać z niektórych konwencje:

  1. komponent zawiera view (szablon) i ViewModel (klasy).
  2. Tęsknisz za modelem i możesz go utworzyć jako normalną klasę TypeScript i przekazać go do viewmodel jako parametr konstruktora.

Technologia jest podobna do tej dostępnej w PRISM i WPF, a tam wszystko rozwija się za pomocą MVVM (jeśli chcesz).