Примечание.
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
Шаблон Breeze/Angular MVC был написан Уорд Белл
AngularJS — это библиотека с открытым кодом из Google для создания одностраничных приложений (SPAs). Она предлагает привязку данных, внедрение зависимостей и управление экранами. Объедините его с BreezeJS, другой библиотекой с открытым кодом для моделирования данных и управления данными, и у вас есть необходимые ингредиенты для отличного клиентского приложения HTML/JavaScript.
Шаблон Breeze/Angular SPA является вариантом шаблона Spa KnockoutJS , включенного в обновление ASP.NET и веб-инструментов 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. Изучите приложение как пользователь ... но с взглядом разработчика. Используйте средства разработчика в браузере для записи сетевого трафика. (В Internet Explorer: нажмите клавишу F12, выберите вкладку "Сеть " и нажмите кнопку "Начать запись".) Теперь попробуйте следующее:
- Добавьте новый элемент Todo.
- Щелкните метку и измените название элемента Todo
- Установите флажок, чтобы отметить элемент как выполненный. Обратите внимание, что текстовое поле отключено, поэтому заголовок больше не редактируется.
- Щелкните "x" справа от метки. Элемент исчезает и удаляется из базы данных.
- Выберите другой элемент и очистите его название. Вы получите ошибку валидации, указывающую на необходимость заголовка. После краткой паузы предыдущий заголовок восстанавливается.
- Введите смешно длинный заголовок. Вы получите другую ошибку проверки — заголовок слишком длинный.
- Нажмите кнопку "Добавить список задач". Новый список отображается слева от предыдущего списка.
- Экспериментируйте с заголовком TodoList, активируя проверки на соответствие требованиям и длину.
- Щелкните в текстовом поле заголовка, чтобы очистить сообщение об ошибке.
- Щелкните "x" в кружке в правом верхнем углу, чтобы удалить TodoList и его задачи.
- Щелкните ссылку "О" в правом верхнем углу, чтобы просмотреть журнал этих действий.
Логика проверки осуществляется на стороне клиента с использованием 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. Однако реализация гораздо проще: DTOs были удалены, и большинство деталей Entity Framework были переданы Breeze.NET.
Дальнейшие шаги
Мы рекомендуем изучить код, руководствуясь обширным обсуждением как клиента, так и стека серверов на веб-сайте Breeze.
Вы можете попробовать играть с клиентским запросом Breeze; добавьте некоторые фильтры и сортировки. Вы можете добавить дополнительные свойства модели и больше сущностей, чтобы лучше понять комплексную разработку SPA. Когда вы уверены в дизайне, вы можете удалить функционал Todo и заменить его собственным.
Удачного программирования!