Angular2: MVC, MVVM или MV*?
Angular более или менее следовал принципу разработки MVV* из-за его двусторонней функциональности привязки данных.
Angular2 принимает основанный на компонентах пользовательский интерфейс, концепция, которая может быть знакома разработчикам React. В некотором смысле контроллеры и директивы Angular 1.x размываются в новом Angular 2 Component.
Это означает, что в Angular 2 нет контроллеров и директив. Вместо этого у компонента есть селектор, который соответствует тегу html, который будет представлен компонентом, и @View, чтобы указать шаблон HTML для заполнения компонента.
Angular2 по-прежнему реализует двустороннюю привязку данных, но не состоит из моделей, например, если у меня есть @Component который отображает список статей и 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 следовать за ближайшим?
6 ответов
Angular 2 на самом деле не MVC (но я полагаю, вы можете провести параллели). Это на основе компонентов. Позволь мне объяснить:
Угловой 1 является MVC и MVVM (MV*). Angular 1 был новаторским по нескольким причинам, но одна из главных причин заключалась в том, что он использовал Dependency Injection. Это была новая концепция по сравнению с другими JS Frameworks, такими как Backbone и Knockout.
Затем появился React и полностью преобразился интерфейс архитектуры. Это заставило Front End больше думать о других вариантах, кроме MVC и MVVM. Вместо этого он создал идею архитектуры на основе компонентов. Это можно рассматривать как одно из наиболее значительных преобразований интерфейсной архитектуры со времен HTML и JavaScript.
Angular 2 (и Angular 1.5.x) решили использовать подход React и использовать архитектуру на основе компонентов. Тем не менее, вы можете провести небольшие параллели между MVC, MVVM и Angular 2, поэтому я думаю, что это может немного сбить с толку.
Сказав это, в Angular 2 нет контроллеров или моделей моделей (если вы не создадите их вручную). Вместо этого есть компоненты, которые состоят из шаблона (например, представления), классов и метаданных (декораторов).
Например, Модели - это классы, в которых хранятся данные (например, контракт на данные для хранения данных, возвращаемых службой http с использованием @angular/http). Мы можем создать новый класс, который добавляет методы и свойства (логику), а затем объединить модель и класс. Это создает что-то вроде ViewModel. Затем мы могли бы использовать эту ViewModel в нашем Компоненте.
Но называть класс или сервис компонента компонентом ViewModel или контроллером не совсем правильно. Компонент содержит шаблон и класс. IMO, это немного похоже на теорию Лискова - утка - не утка - не пытайтесь навязать шаблон MVC или MVVM компонентам, поскольку они разные. Думайте об Angular 2 как о компонентах. Но я понимаю, почему люди проводят параллели, чтобы помочь их первоначальному пониманию.
Angular также использует модули, которые являются частью будущей версии JavaScript (ECMAScript 6). Это очень мощно, потому что у JavaScript всегда были проблемы с пространствами имен и организацией кода. Это где импорт и экспорт входят в компоненты.
Полезные ссылки:
https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c
И Angular 1, и Angular 2 следуют шаблону MVC (Модель, Вид, Контроллер).
В Angular 1 разметка HTML - это представление, контроллер - это контроллер, а служба (когда она используется для извлечения данных) - модель.
В Angular 2 шаблон - это View, класс - это Controller, а Service (когда он используется для извлечения данных) - это модель.
Поскольку Angular является клиентской средой, шаблон MVC, который следует Angular, может называться MVVC (Model, View, View Controller).
Я не слишком заинтересован в использовании обозначений М ** (отчасти оскорбленный и туманный). В любом случае, на мой взгляд, самый простой и эффективный способ выразить это в Angular2:
класс (статья в вашем случае) представляет модель
Компонент объединяет представление (в шаблоне) и контроллер (логика Typescript)
Я надеюсь, что это помогает
MVC и MVVM с AngularJS
MVC Design Pattern
Начнем с того, что шаблон проектирования MVC не является специфичным для AngularJS, вы, должно быть, видели / реализовали этот шаблон во многих других языках программирования.
Шаблон проектирования MVC можно увидеть в AngularJS, но прежде чем углубляться в это, давайте посмотрим, что включает в себя шаблон проектирования MVC:
Модель: Модель - это не что иное, как данные. Представление: представление представляет эти данные. Контроллер: Контроллер является посредником между ними.
В MVC, если мы вносим какие-либо изменения в представление, оно не обновляется в модели. Но в AngularJS мы слышали, что есть нечто, называемое двухсторонним связыванием, и это двухстороннее связывание включает шаблон проектирования MVVM.
MVVM в основном включает в себя 3 вещи:
Представление модели Представление Контроллер модели фактически заменено представлением Модель в шаблоне проектирования MMVM. View Model - это не что иное, как функция JavaScript, которая снова похожа на контроллер и отвечает за поддержание отношений между представлением и моделью, но разница здесь в том, что если мы обновляем что-либо в представлении, оно обновляется в модели, что-то меняется в модели, это появляется в виду, что мы называем двухсторонней привязкой.
Вот почему мы говорим, что AngularJS следует схеме проектирования MVVM.
По моему скромному мнению, вы можете разрабатывать в Angular 2 с использованием MVVM, если хотите использовать некоторые соглашения:
- Компонент содержит представление (шаблон) и модель представления (класс).
- Вы пропускаете только модель, и вы можете создать ее как обычный класс TypeScript и передать ее в viewmodel в качестве параметра конструктора.
Технология очень похожа на ту, что доступна в PRISM и WPF, и там вы разрабатываете все, используя MVVM (если хотите).
В Angular(за исключением версии 2 и выше) мы используем функцию привязки данных. Эта функция привязки данных обеспечивает применение шаблона MVVM в приложении ng, потому что контроллер в этом случае вызывает привязку между V&M (изменения в представлении вызывают изменения в модели и наоборот). Таким образом, в терминологии MVC мы можем заменить "C" на "VM", что дает "MVVM"