Шаблоны бритвы, представления и angular.js

TL; DR

Каковы наилучшие методы использования представлений .NET Razor и AngularJS?

Контекст

Мы разрабатываем общедоступный веб-сайт (не приложение для интрасети) с использованием mvc4 с бритвой, и мы не очень хорошо знакомы с клиентом script, поэтому мы начали с того, что знали: jQuery. Но теперь все усложняется, и мы хотели бы переключиться на AngularJS.

В части .NET мы используем шаблоны Razor и UIHintAttribute (плюс некоторые пользовательские) для рендеринга правильного html-элемента управления. Мы также добавляем пользовательские атрибуты html, чтобы предоставить дополнительную информацию части jQuery (например, title для всплывающей подсказки....)

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

Вопросы

Поскольку у нас уже есть модели, определенные на стороне сервера, и поскольку AngularJS также использует модели, не заставит ли мы дублировать код?

Как мы имеем дело с функцией привязки данных, поскольку мы уже делаем некоторую привязывающую сторону сервера (в представлениях). Должны ли мы сделать полностью асинхронное приложение, сделав AJAX вызовы от AngularJS для загрузки данных или мы можем смешать оба?

Что еще мы должны знать при попытке использовать обе эти технологии?

Я сделал некоторые исследования в Google, но я не могу найти подробные способы смешивания просмотров и шаблонов Razor с помощью AngularJS... Возможно, это просто не очень хорошо?

Ответ 1

Мы рассматривали эту проблему в течение нескольких месяцев, когда работали с MVC плюс другая среда JavaScript (нокаут). В конечном счете, если вы собираетесь использовать клиентскую инфраструктуру MV * для визуализации вашего пользовательского интерфейса, вы обнаружите, что в основном трещотка Razor будет вашим лучшим выбором.

Большинство основных инфраструктур MV * JavaScript, включая AngularJS, предполагают, что вы будете поддерживать состояние пользовательского интерфейса и предоставлять свой пользовательский интерфейс на основе моделей JavaScript или моделей. Попытка микширования на серверном рендеринге просто не будет работать очень хорошо.

Это не означает, что для разработки приложения Angular не требуется использовать MVC. Вы все еще можете воспользоваться некоторыми замечательными функциями, такими как Объединение и минимизация ASP.NET. И иногда очень хорошо встраивать JSON прямо в страницу с использованием вида Razor или частичного, а не для создания дополнительного вызова AJAX.

Что касается моделей, вы можете взглянуть на Breeze.js. Это библиотека JavaScript для доступа к данным, которая отлично подходит для ASP.NET на стороне сервера для обмена метаданными модели.

Ответ 2

Мы написали собственный механизм привязки данных, который синхронизирует модель angular.js с моделью просмотра на стороне сервера. Модель javascript генерируется из сериализации JSON модели на стороне сервера, чтобы избежать дублирования кода, о котором вы говорили.

Мы используем SignalR для обновления модели представления клиента с сервера.

Изменения на стороне сервера свойств модели представления С# отправляются клиенту в виде пакета, содержащего путь к свойству, например. Лица [42].Address.City и само значение, например. Нью-Йорк. Модель представления наследует базовый класс, который заботится о генерации пути собственности, поэтому фактическая модель представления выглядит довольно чистой, и мы можем сосредоточиться на бизнес-логике.

Изменения в клиентской стороне свойств модели просмотра javascript отправляются на сервер таким же образом. Чтобы поймать события изменений, мы инкапсулируем все поля исходной модели javascript в свойствах get/set, когда сеттер отправляет пакет обновления на сервер.

Методы на стороне сервера модели представления можно вызвать аналогичным образом. Все объекты в модели вида имеют функцию invokeMethod, которая может быть использована следующим образом: Продукты [42].Manufacturer.invokeMethod('SendEmail', 'mailsubject', 'mailbody'). Это отправит пакет на сервер, содержащий путь метода Products [42].Manufacturer.SendEmail и аргументы как массив ['mailsubject', 'mailbody'].

В заключение, вид html (вид) привязывается к модели представления на стороне сервера, где другие системы, такие как регулярные представления Razor, могут работать на одних и тех же объектах.

Исходный код можно найти здесь: SharpAngie.