AngularJs часто рассматривается как жизнеспособное решение для создания полнофункциональных одностраничных веб-приложений. Хотя это хороший вариант использования Angular, в этой статье мы рассмотрим, как можно также использовать инфраструктуру для постепенного добавления функциональности на любую веб-страницу в целом, в некоторых случаях практически не требуется Javascript ( пример ).
Начальное намерение Angular
До того, как Angular стал средой с открытым исходным кодом, он задумывался как инструмент разработки, ориентированный в основном на веб-дизайнеров. Инфраструктура позволила бы дизайнерам улучшить HTML-страницы и дать им возможность проверять и сохранять формы прозрачным способом (см. Ссылку здесь ).
Первоначальная идея состояла в том, чтобы позволить дизайнерам использовать некоторые дополнительные HTML-теги или атрибуты для добавления динамических возможностей на веб-страницу без необходимости писать какой-либо Javascript вообще.
Использование Angular постепенно в существующих приложениях
В настоящее время Angular, вероятно, будет использоваться в качестве основной инфраструктуры MVC для веб-приложений со средними и большими масштабами. Но Angular также можно использовать для постепенного добавления функциональности к существующим веб-приложениям способом, очень похожим на то, как он изначально предназначался для использования.
Давайте приведем один конкретный пример: проверка формы.
Пример: использование Angular для проверки формы
В сжатых и сжатых 44 КБ Angular упаковывает много интересных функций для динамической проверки формы.
Возьмите, например, следующую форму для создания пользователя, она делает следующее (попробуйте jsfiddle ):
- мелирование поле ошибки динамически , как мы печатаем
- предоставлять встроенные сообщения, пока пользователь печатает в поле
- отключите кнопку отправки, пока все необходимые данные не будут доступны и флажок условий и положений не установлен
Для рабочей версии этой формы, реализующей вышеуказанную функциональность, проверьте следующий репозиторий github (или jsfiddle ) .
Обратите внимание, что в приведенном выше примере требуется только одна строка кода Javascript , необходимая для импорта ng-messagesмодуля:
angular.module('DemoApp', ['ngMessages']);
Кроме того, вся функциональность основана на встроенных директивах Angular и ng-messages.
Угловая форма директивы
Когда Angular компилирует DOM внутри ng-app, он применяет к тегам формы встроенную директиву формы. В случае вышеупомянутой формы это означает, что начальный HTML формы будет выглядеть примерно так:
<form class="ng-pristine ng-invalid ng-invalid-required" name="frm"> </form>
Обратите внимание на странный вид ng-pristineи ng-invalidклассы, которые Angular автоматически добавляет в зависимости от состояния формы.
Как работают эти встроенные классы состояния?
Эти классы применяются как к форме, так и к отдельным полям ввода, и их можно использовать для стилизации формы. Angular предоставляет следующие состояния:
- ng-нетронутый: это означает, что форма или ввод находится в исходном состоянии: нет полей ввода, где они были затронуты или отредактированы
- ng-touch: элемент управления или форма были нажаты пользователем, но не обязательно отредактированы
- ng-dirty: элемент управления вводом отредактировал пользователь
- ng-invalid: элемент управления формы был отредактирован, но содержит недопустимое значение
- ng-valid: элемент управления вводом был отредактирован пользователем и содержит допустимое значение
Например, ng-invalidсостояние может быть использовано для рисования красной границы вокруг полей по ошибке.
Угловые встроенные директивы проверки
Проверки каждого поля могут быть объявлены непосредственно в HTML. Например, поле пароля имеет следующие проверки:
- поле является обязательным
- минимальная длина 6 символов
- максимальная длина 10 символов
Эти проверки объявляются с использованием директив required, ng-minlengthand
ng-maxlength:
<input name="password" ng-model="user.password" type="password" placeholder="Password" required ng-minlength="6" ng-maxlength="10">
Смотрите здесь полный список встроенных директив, которые могут быть применены к вводу формы. Также возможно создать наши собственные директивы валидации.
Улучшенная проверка формы с помощью сообщений ng
Пока пользователь вводит данные, полезно показать сообщение, информирующее его о следующем шаге в процессе проверки, например:
- сначала покажите, что поле обязательно для заполнения
- когда пользователь начинает печатать, показать сообщение с указанием минимальной длины
Вот как должна выглядеть форма с несколькими ее компонентами, грязными и недопустимыми:
Эта функциональность может быть реализована с использованием директивы ng-messages :
<div class="pure-control-group">
<label>Password</label>
<input name="password" ng-model="user.password"
type="password" placeholder="Password"
required ng-minlength="6" ng-maxlength="10">
<div class="field-message"
ng-messages="frm.password.$error"
ng-if='frm.password.$dirty' ng-cloak>
<div ng-message="required">Password is required</div>
<div ng-message="minlength">
Password must have minimum 6 characters
</div>
<div ng-message="maxlength">
Password must have maximum 10 characters
</div>
</div>
</div>
Управление состоянием кнопки отправки
Кнопка отправки может быть включена / отключена в соответствии с действительностью формы и флажком условия, используя ng-disabledдирективу:
<button type="submit" class="pure-button pure-button-primary" ng-disabled="frm.$invalid || !conditions">Submit</button>
Выводы
Используя встроенные директивы Angular и некоторые дополнительные модули, можно добавить множество функций в существующее веб-приложение.
В конкретном случае проверки формы это можно сделать практически без использования Javascript (см. Приведенный выше пример ) и с минимальными затратами (сжатые и сжатые 44 КБ) аналогично другим альтернативам.
Но проверка формы — это всего лишь пример того, как Angular также может использоваться за пределами контекста одностраничного веб-приложения.
Любое существующее приложение может использовать его для небольших улучшений, таких как проверка формы или реализация определенного виджета.
Рекомендации
Подробное описание проверки формы Angular можно найти в этом скринкасте (pre-ngMessages).