Is Angular 2+ MVVM?

Lukas Marx
December 06, 2016

Angular

W różnych miejscach czytałem teraz o tym: „Angular to MVVM” albo „Angular to MVC”. Huh, czyżby? I don’t think so.

Actually the question can not be answered with a plain yes or no. Po pierwsze, angular 2+ nie jest MVC! Szczerze mówiąc, nie wiem, jak ludzie wymyślają takie rzeczy, czasami.

To jest link partnerski. Możemy otrzymać prowizję za zakupy dokonane za pośrednictwem tego linku.

Zamiast tego, podąża za architekturą zorientowaną na komponenty. Więc to nie jest MVVM ani. Jednak kątowy implementuje wiele z koncepcji MVVM. Więc jeśli potrzebujesz, możesz powiedzieć, że kątowy podąża za zasadą MVVM. Aby zobaczyć podobieństwa, przyjrzymy się bliżej tej zasadzie w kontekście komponentów kątowych.

„Bardzo ładnie… ale co to jest MVVM?”

MVVM to skrót od Model, View, ViewModel. Jest to wzorzec projektowania oprogramowania i ma na celu zwiększenie czytelności i łatwości w utrzymaniu kodu źródłowego, poprzez podzielenie kodu na 3 sekcje wspomniane wcześniej. Więc jak to wygląda w angular?

Model

Model jest kontenerem definiującym strukturę podmiotu, zgodnie z zasadą obiektową. Jest on definiowany przez twoją zawartość. Jeśli więc chcesz użyć Modelu dla Użytkownika, może on wyglądać tak.

class User { name:string; email:string; address:string;}

W angular, zazwyczaj używamy klas Typescript lub interfejsów do definiowania modelu. Jednak modele są po prostu zwykłymi obiektami Javascript.

View

Widok to warstwa wizualna aplikacji, zawierająca wszystkie elementy wizualne wyświetlane na ekranie użytkownika. W przypadku Angular 2 widok jest zdefiniowany w szablonie. Szablony te są napisane w HTML i CSS, ale zawierają również specyficzne dla Angulara elementy. Szablony te są połączone z ViewModelem poprzez wiązanie danych. Szablony są zawsze częścią komponentu.

ViewModel

WidokModel jest abstrakcyjną częścią widoku, zarządzającą modelami i właściwościami, które mają być wyświetlane na ekranie. Zawiera on całą logikę dla strony. Widok i ViewModel są często połączone poprzez wiązanie danych. Oznacza to, że zmiany w ViewModelu, np. dotyczące właściwości, są natychmiastowo aplikowane do widoku, zmieniając np. tekst wyświetlany na ekranie. W angular, ViewModel jest reprezentowany przez część typcriptową komponentu.

Więc dowiedzieliśmy się, że komponent angular składa się z dwóch części. Szablonu (View) i klasy (ViewModel). Oto przegląd komponentów kątowych.

Komponenty kątowe

Podstawowy komponent w kątowym składa się z dwóch części. Pierwsza część to definicja komponentu. Jest ona otoczona przez @Component({}). Wewnątrz tej definicji możemy określić właściwości tego komponentu jak np. selektor, który pozwoli nam umieścić nasz komponent poprzez HTML.

W tym bloku definiujemy również widok. Można to zrobić poprzez dodanie html inline lub użyć dodatkowego pliku. Ja zazwyczaj preferuję drugą opcję ze względu na lepszą czytelność i wyraźne oddzielenie tych dwóch elementów. Tak więc tak mogłaby wyglądać ta część:

@Component({ selector:"nav-bar", templateUrl:"./component.html", styleUrls: })

Druga część to odpowiednia klasa implementująca logikę. Klasa ta jest umieszczona w tym samym pliku zaraz pod definicją. Jest to w zasadzie zwykła klasa typecriptowa, więc można w niej robić co się chce.

export class NavBar{}

Aby pokazać nasz komponent na ekranie musimy dołączyć go do widoku html, który jest już wyświetlany. Punktem wyjścia jest plik app.component.html. Tak więc pisząc

<nav-bar></nav-bar>

nasz komponent zostaje dodany do widoku. W Angularze komponenty nie mogą istnieć same w sobie, ale zawsze muszą być dodane do jakiegoś modułu. Aby to zrobić, wystarczy dodać nasz komponent do sekcji deklaracji modułu nadrzędnego. Moduł nadrzędny znajduje się wewnątrz pliku app.module.ts

@NgModule({ declarations: })

Wszystko co zostało zdefiniowane w pliku html komponentów zostanie umieszczone wewnątrz selector-tag komponentu i dlatego będzie widoczne na ekranie.

To jest link afiliacyjny. Możemy otrzymać prowizję za zakupy dokonane za pośrednictwem tego linku.

Aby dowiedzieć się więcej o komponentach, sprawdź mój dogłębny przewodnik o komponentach w Angular.