Шаблон Breeze/Angular
Шаблон Breeze/Angular MVC был написан Уорд Белл
AngularJS — это библиотека открытый код от Google для создания одностраничных приложений (SPA). Он обеспечивает привязку данных, внедрение зависимостей и управление экранами. Объедините его с BreezeJS, еще одной библиотекой открытый код для моделирования данных и управления данными, и у вас есть необходимые компоненты для отличного клиентского приложения HTML/JavaScript.
Шаблон Spa Breeze/Angular — это разновидность шаблона SPA KnockoutJS, включенного в обновление ASP.NET and Web Tools 2012.2. Если у вас есть Visual Studio, у вас будет пример SPA, который будет запущен менее чем за 60 секунд.
Внешне приложение очень похоже на шаблон SPA KnockoutJS. Но это совсем другое под капотом. Шаблон KnockoutJS использует Knockout для привязки данных и необработанный AJAX для доступа к данным. Шаблон Breeze/Angular использует Angular для привязки данных и Breeze для доступа к данным. Эти библиотеки обеспечивают дополнительные возможности, включая навигацию по страницам и журнал.
На странице О программе приложения отображается журнал выполнения событий во время текущего сеанса пользователя, в том числе:
- Подкачки. Обратите внимание на создание контроллера todo.
- Удаленные запросы и запросы локального кэша.
- Сохранение новых и измененных сущностей.
- Изменения проверяются на клиенте, поэтому пользователь может исправлять ошибки перед фиксацией изменений в базе данных.
В этом шаблоне есть дополнительные сведения, в том числе:
- Динамическая загрузка шаблонов представлений HTML.
- Настраиваемая привязка данных с помощью Angular "директив".
- Модульность и внедрение зависимостей.
- Фильтрация запросов, сортировка, разбиение по страницам, проекции и включение связанных сущностей.
- Совместное использование данных на нескольких экранах.
- Сохранение нескольких изменений в виде одной транзакции.
- Правила проверки автоматически распространяются с сервера на клиент JavaScript.
Итак, начнем.
Создание проекта шаблона Breeze/Angular
Скачайте и установите шаблон, нажав кнопку Скачать выше. Шаблон упаковается в виде файла расширения Visual Studio (VSIX). Возможно, потребуется перезапустить Visual Studio.
В области Шаблоны выберите Установленные шаблоны и разверните узел Visual C# . В разделе Visual C# выберите Интернет. В списке шаблонов проектов выберите ASP.NET веб-приложение MVC 4. Задайте для проекта имя и щелкните ОК.
В мастере создания проекта выберите Breeze Angular SPA.
Нажмите клавиши CTRL+F5, чтобы выполнить сборку и запуск приложения без отладки, или клавишу F5 для запуска с отладкой.
При первом запуске приложения отображается экран входа. Щелкните ссылку "Регистрация", и отобразится новая страница, где можно ввести имя пользователя и пароль. (Страницы входа и регистрации создаются с помощью ASP.NET MVC.) При отправке формы регистрации сервер создает список TodoList с двумя элементами для вашей учетной записи. Затем он представляет их вам на желтой ноте.
Теперь вы находитесь в стране SPA. Все, что вы видите и испытываете при работе с Todos, отрисовывается и управляется на клиенте с помощью Knockout и Breeze. Изучите приложение в качестве пользователя ... но с глазом разработчика. Используйте средства разработчика в браузере, чтобы записать сетевой трафик. (В Интернете Обозреватель: нажмите клавишу F12, перейдите на вкладку Сеть и нажмите кнопку Начать запись.) Теперь попробуйте следующее:
- Добавьте новый элемент Списка дел.
- Щелкните метку и измените заголовок элемента списка дел.
- Установите флажок, чтобы пометить элемент как завершенный. Обратите внимание, что текстовое поле отключено, поэтому заголовок больше не может быть редактируемым.
- Щелкните x справа от метки. Элемент исчезает и удаляется из базы данных.
- Выберите другой элемент и очистите его заголовок. Вы получите ошибку проверки о том, что заголовок является обязательным. После краткой паузы предыдущий заголовок восстанавливается.
- Введите смехотворно длинный заголовок. Вы получите другую ошибку проверки, что заголовок слишком длинный.
- Нажмите кнопку "Добавить список дел". Слева от предыдущего списка появится новый список.
- Поиграйте с заголовком TodoList, активируя необходимые проверки и проверки длины.
- Щелкните текстовое поле заголовка, чтобы очистить сообщение об ошибке.
- Щелкните "x" в круге в правом верхнем углу, чтобы удалить TodoList и его todos.
- Щелкните ссылку "О программе" в правом верхнем углу, чтобы просмотреть журнал этих действий.
Логика проверки выполняется на стороне клиента с помощью Breeze. Атрибуты проверки в классах модели сервера распространяются на клиент и выполняются автоматически, прежде чем клиент обращается к серверу.
Проверьте сетевой трафик. Обратите внимание, что при обнаружении ошибки Breeze не было вызовов к серверу. Каждое допустимое изменение приводило к запросу POST к "/api/Todo/SaveChanges". Breeze объединяет изменения и отправляет их вместе в виде одного запроса к методу контроллера SaveChanges веб-API. Это отличается от шаблона SPA KnockoutJS, который делает запросы PUT, POST и DELETE для каждого элемента по отдельности.
Кроме того, обратите внимание, что при переключении между страницами TodoList и About отсутствует сетевой трафик. Это связано с тем, что запрос ограничен локальным кэшем Breeze.
Заглянуть внутрь
У этого приложения есть клиентская и серверная стороны. Клиентский стек состоит из небольшого html-кода и сочетания модулей JavaScript приложения (в папке app) и сторонних библиотек JavaScript (в папке "Скрипты").
Архитектура пользовательского интерфейса отделяет мини-приложения HTML представлений от вспомогательного кода презентации в контроллерах. Система Angular привязки данных координирует представления и контроллеры, чтобы каждый из них смог выполнять свою работу без глубокого знания другого.
Контроллер запрашивает у контекста данных получение и сохранение сущностей модели. Контекст данных делегирует большую часть работы Приложению Breeze, который создает объекты модели самостоятельного отслеживания на основе результатов запроса JSON.
Серверный стек состоит из кода разработчика и трех основных библиотек .NET: веб-API, Entity Framework и Breeze.NET.
Базовая архитектура аналогична шаблону SPA KnockoutJS. Однако реализация гораздо проще: DTO были удалены, а большинство сведений о Entity Framework были делегированы Breeze.NET.
Next Steps
Мы рекомендуем изучить код, руководствуясь подробным обсуждением стека клиента и сервера на веб-сайте Breeze.
Вы можете попытаться выполнить запрос на стороне клиента Breeze; добавьте несколько фильтров и сортировок. Вы можете добавить дополнительные свойства модели и больше сущностей, чтобы улучшить возможности комплексной разработки SPA. Если вы уверены в дизайне, вы можете вырвать функции Todo и заменить их собственными.
Удачного программирования!