Шаблон MVC клиента AngularJS?


до сих пор я в основном использовал Struts 2,Spring,JQuery стек технологий для создания веб-приложений. Дело в том, что упомянутый стек использует серверную сторону MVC узор. Основная роль веб-браузеров была ограничена циклом запроса / ответа (+проверка на стороне клиента). Извлечение данных, бизнес-логика, подключение и проверка были в основном обязанностями серверной стороны.

у меня есть несколько вопросов по поводу AngularJS рамки, которые были вдохновлены следующие цитаты я прочитал:


С в AngularJS учебник:

для угловых приложений, мы рекомендуем использовать модель-представление-контроллер (MVC) шаблон проектирования для разъединения кода и разделения проблем.

С Wikipedia Model-view-controller:

Model-View-Controller (MVC) - это архитектура, которая разделяет представление информации от взаимодействия пользователя с оно. Модель состоит из данных приложения и бизнес-правил, и регулятор посредничает входной сигнал, преобразовывая его к командам для модель или вид


AngularJS используется на стороне клиента MVC узор. Поэтому я думаю, что нет другого варианта, чтобы включить логику проверки также на стороне клиента в некотором роде?

что было бы лучшим способом написать надежное приложение AngularJS? MVC на стороне клиента и какой-то MC (модель, контроллер) на стороне сервера?

означает ли это, что модель и контроллер дублируются одним способом (клиент/сервер)?

Я знаю, что мой вопрос как-то странно, но я думаю, что причина в том, что я как-то привык к традиционному шаблону MVC на стороне сервера. Я уверен, что есть кто-то, кто уже сделал такой же переход.

7 72

7 ответов:

совсем не странный вопрос - я пытался продать Angular многим разработчикам java, и они спрашивают об этом. Я спросил его сам, когда я учился (я все еще учусь, кстати)

Если вы берете "обычный" java webapp, как вы описали и угловой-Изе его, вы должны сначала взять свой сервер и сделать его RESTful API. Удалите JSP и т. д. Это на самом деле трудная часть, IMO, написания углового приложения - получение REST API правильно. Ключ для меня, чтобы решить, что логика, необходимая для входа в сервер была думая о нем как о чистом api и забывая на данный момент, что он будет иметь передний конец.

этот вопрос действительно помог мне - если кто - то пытается сохранить данный ресурс, и этот ресурс не имеет действительных данных, нет переднего конца, чтобы сказать им-они попадают в API напрямую, поэтому API должен отклонить его. Таким образом, задняя часть отвечает за глубокую проверку. Это относится и к вашей бизнес-логике. Предположим, кто-то использует просто API и станет ясно, что нужно сделать вашему серверу.

сервер также должен передавать данные в формате (вероятно) json (я использую Spring MVC + Jackson), поэтому он отвечает за предоставление модели Angular и связь с базой данных.

Так что же такое MVC тогда на угловой стороне?

  • модель: данные, которые поступают из REST API. Если API является торговым JSON, то эти объекты будут уже есть объекты javascript 1-го класса.
  • посмотреть: HTML, и директивы, когда вам нужно манипулировать DOM
  • контроллер: (и пользовательские службы, которые вы учитывали из своих контроллеров..)
    • запрашивает REST API и помещает то, что необходимо для представления в $scope
    • предоставляет обратные вызовы для директив для ответа на события, которые затем могут потребовать обратных вызовов сервер.
    • проверка: обычно через обратный вызов директивы. скорее всего, перекрываются некоторые проверки, которые вы уже поставили на сервере, но вы не хотите, чтобы ваш пользователь ждал, пока сервер проверит все - клиент должен знать что-то о проверке, чтобы дать пользователю немедленную обратную связь.
    • бизнес-логика: в значительной степени та же история, что и проверка.

но почему дублирование логики на клиенте и на сервере? В основном потому, что вы не пишете одно приложение, вы пишете две независимые вещи:

  1. REST API, который должен быть надежным и удобным без интерфейса
  2. графический интерфейс, который должен дать немедленную обратную связь с пользователем и не обязательно ждать сервера.

Итак, короткий ответ-получите REST API правильно, забыв, что будет пользовательский интерфейс, и то, что входит в Angular, будет много более ясный.

Я думаю, что термин "бизнес-логика" является немного неправильно здесь. "Бизнес" клиентского приложения-это бизнес по обработке пользовательского интерфейса. Это не будут такие вещи, как правила безопасности и проприетарная логика или другая чувствительная интеллектуальная собственность.

Так что в угловой деление (в общем случае):

  • контроллер (контроллер): для управления данными (областью) за вашим пользовательским интерфейсом.
  • директивы : для настройка DOM для связи с контроллером через область видимости,и для манипулирования DOM.
  • Шаблоны (view): назначение директив элементам DOM.
  • Scope (модель или viewmodel): для переноса данных между всеми частями системы.
  • услуги: вводимые, многоразовые биты кода. Обычно для зависимостей, таких как обработка Ajax, cookies или других I / O.

Это действительно почти MVVM, а не MVC.

Что касается вашей" бизнес " логики или правил... все, что требует безопасности, всегда должно быть защищено на уровне сервера.

важно понимать, что в некоторых версиях шаблона MVC data а также логика, что управляет данные оба находятся в слое "модель" (при этом слой "контроллер" не делает ничего, кроме привязки). Однако в AngularJS данные ($scope) находятся только в слое "модель", а логика, которая управляет данными ($scope), находится в слое "контроллер".

AngularJS "MVC"

Мне нравится то, что говорит @Roy TrueLove. Но позвольте мне сказать, что это окончательный способ использования angularjs. Конечно, вы должны научиться делать свои приложения таким образом, если вы хотите получить максимальную пользу из углового. Я молюсь, чтобы быть там.

тем временем, во время вашего обучения и во время вашего перехода к полному использованию angularjs в качестве основного способа работы на стороне клиента, вы можете начать использовать его для какой-то небольшой миссии здесь и там, и постепенно привыкнуть к нему и к его образу мышления.

Я призываю постепенно охватить его и идти медленно медленно, но уверенно, я гарантирую, конечно.

Angularjs предназначен для использования этого подхода, так как он может работать с самой маленькой задачей так же хорошо, как и с самой большой. Например, в этот первый раз я использовал angular, чтобы показать имена, когда пользователь вводит идентификаторы.

Я согласен с ответами здесь. Еще несколько комментариев. Когда вы пишете приложение, вам сначала нужно сосредоточиться на проблемной области. И создать программную модель какого-то реального бизнеса. Например, если ваш проблемный домен является магазином, некоторые требования, которые вам нужно смоделировать, могут включать:

  • кредитная карта должна быть действительна.
  • при оплате кредитной картой марки X, вы получите скидку 10%.
  • тележка магазина должна содержат по крайней мере один элемент для выполнения проверки
  • товары должны иметь запас, прежде чем позволить пользователям добавлять их в корзину в магазине

реализация этих требований будет моделировать вашу проблемную область, это ваша бизнес-логика.

Angular-это фреймворк и инструментарий. Это web фронтэнд. Если вы реализуете это в веб-интерфейсе, вы пропустите возможность повторного использования вашей модели из другого интерфейса или интерфейса, как мобильное или настольное приложение. Таким образом, в идеале ваша реализация бизнес-логики должна быть отделена от любой структуры пользовательского интерфейса и также отделена от любой постоянной структуры. Затем у вас будут объекты интерфейса, которые будут решать проблемы пользовательского интерфейса и будут взаимодействовать с вашими объектами бизнес-логики. Это может быть пружинный контроллер MVC и/или угловой контроллер или сервис.

есть пример приложения вы можете взглянуть при этом выполните описанные здесь принципы.

кажется, у меня тоже есть этот вопрос, так как некоторые организации просто помешаны на новых технологиях - "я хочу облако...подождите, я хочу легкий", его трудно оправдать, заслуживает ли он перехода на более легкие рамки.

Я разрабатываю веб-приложения с использованием Spring/JBoss seam / JSF и на MVC framework все время. Большую часть времени Java-скрипты будут находиться для проверки уровня представления, а основные классы действий / сущности и бизнес-логика будут находиться в Java код. После некоторого базового практического использования Angular я начал понимать, что они подразумевали под MVC, поскольку они абстрагировали другой уровень на уровне представления, где мы можем иметь свои собственные представления и контроллеры на переднем конце. Чтобы ответить на ваш вопрос, как и все комментарии, лучший способ-это положить его на слой презентации.

Что касается точки зрения безопасности, я считаю, что тяжелые или чувствительные бизнес-правила должны находиться на стороне сервера, поскольку мы не хотим подвергать его миру. Если бизнес-логика развита слабо, можно легко найти слабое место в нашем коде и использовать его.

вот моя мысль для рамок, таких как Angular, похожа на небольшой магазин/SOHO, обрабатывающий клиента, и у них есть несколько человек и действительно эффективный и быстрый.Они поставляют еду хорошо для клиентов смотря на дело и поставку / получают товары эффективно (остальные, JSON). У них есть назначенные роли и задачи, но некоторые работники выполняют больше, чем задачи. Магазин также уязвим для вора или грабителей, как обычно они не делают акцент на усиленной безопасности.

Что касается серверной инфраструктуры, такой как Spring/Struts 2, Представьте себе современную корпорацию(уровень CMM 5) с различным уровнем управления и способную обрабатывать более крупный бизнес(пакетные задания, веб-сервисы, корпоративная шина). Они действительно обрабатывают клиентов, но не напрямую, часто проходят через брокеров или даже розничные магазины. Безопасность мудрая корпорация более надежна, и часто ценные бумаги на входной двери или важная информация защищены в безопасный (шифрование / вход в систему).

мой подход - это всегда подход снизу вверх. Начиная с проектирования базы данных, с правильно построенными / связанными таблицами, хранимыми процедурами, когда это необходимо, затем добавьте Entity Framework в решение или используйте ADO.Net если EF не является вариантом. Затем разработайте бизнес-логику и модели для ввода и вывода данных из базы данных.

с установленными моделями мы теперь можем пойти двумя маршрутами: разработка контроллера MVC и / или разработка контроллера WebAPI. Оба контроллера может иметь доступ к моделям, это просто вопрос создания экземпляров классов и вызова методов.

теперь у вас есть возможность настроить представления MVC, которые управляются контроллером MVC, или полностью отдельный набор HTML-страниц или SPA (одностраничное приложение, размещенное на NodeJS).

с полностью отдельным набором HTML-страниц вам нужно будет использовать контроллеры WebAPI с методами Get, Post, Put и Delete и обязательно включать токен туда и обратно определить, кто ваш клиент, и включить CORS (для кросс-происхождения запросу)

с представлениями MVC вы можете идентифицировать своих клиентов, используя атрибуты контроллера и / или сеансы, и вам не нужно беспокоиться о CORS, и вы даже можете сделать свои представления строго типизированными, если это необходимо. К сожалению, если у вас есть набор разработчиков пользовательского интерфейса, им придется работать над одним и тем же решением MVC.

в обоих случаях вы можете использовать AngularJS для передачи данных взад и вперед от / к контроллеры.

ИМХО понятие контроллер в AngularJS-это не то же самое с C# или контроллер в MVC веб-API на C#. Контроллер AngularJS содержит всю логику javascript, а также вызовы конечных точек через "ApiFactory", тогда как контроллеры C# - это не что иное, как конечные точки на стороне сервера, которые принимают и отвечают на запросы пользовательского интерфейса.