Двустороннее связывание объектов и модели AngularJS.

Двунаправленное связывание объектов и модели AngularJS.. Two-way data binding.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Используемые технологии и библиотеки
  • Spring MVC 4.2.4.Release
  • AngularJS 1.5.0
  • IntelliJ IDEA 15.0.2

1. Описание задачи

Рассмотреть двунаправленное связывание в AngularJS.

2. Структура проекта

twoWayBinding

Двунаправленное связывание модели и объекта AngularJS рассматривается на странице two-way-binding.jsp.

3. Двунаправленное связывание AngularJS

Связывание данных (data-binding) — автоматическая синхронизация данных между моделью и представлением внутри фреймворка. AngularJS обрабатывает синхронизацию данных между слоями приложения. При изменении модели на это реагирует представление, верно и обратное — изменение представления может влиять на модель angular.

В AngularJS существует технология, которая помогает сократить количество кода, освобождая сервер от работы с шаблонами. Она носит название — двустороннее связывание данных (или двунаправленное) (англ. two-way data binding). В чем отличие от одностороннего связывания данных? Рассмотрим схему с сайта проекта ангуляр.

One_Way_Data_Binding

При работе с шаблонизатором статический template (шаблон) преобразуется в string и связывается с данными, а затем уже новая связанная с данными строка вставляется в нужный DOM элемент с помощью метода innerHTML. Засада кроется в том, что при каждом изменении данных нужно перерисовывать шаблон. В результате возникают проблемы с чтением данных, которые вводит пользователь, потерей из-за перезаписи, проблемой управления обновлением данных и представления. И, конечно, всё это несет понижение производительности. В ангуляре пошли другим путем.

Two_Way_Data_Binding

Особенность подхода фреймворка AngularJS позволяет создать двустороннюю связь (two-way binding) между элементами страницы и моделью. Двунаправленная связь формируется непосредственно компилятором с помощью сервиса $compile. В результате сам фреймворк генерирует DOM элементы которые потом использует.

4. Пример работы двунаправленного связывания AngularJS

Инициализируем модуль AngularJS и несколько переменных.

Созданы два метода (изменение названия переменной siteName и переключение стиля у элемента toggleId), а так же переменная, которая содержит название сайта.

Затем используем эти переменные и методы в html коде.

Вначале создан обычный p элемент, который будет менять стиль при введении данных или при срабатывании метода из контроллера angular. Далее идет выражение {{bindingValue}} и связывание элемента span с моделью данных siteName. Чуть ниже используется директива ng-change=’clickMethod()’, с помощью которой при изменении компонента input будет вызван метод clickMethod(). Таким образом при изменении вводимой в input область данных будет меняться цвет у «ПЕРЕКЛЮЧАЮЩИЙСЯ ТЕКСТ».

После этого прописана директива ng-click, которая срабатывает по клику. Остальной код аналогичен и демонстрирует изменение представление после каких-либо действий пользователя.

5. Запуск приложения

Так выглядит представление, которое демонстрирует двустороннее связывание данных в AngularJS.

twoWayBindingRun

 

Исходные коды

MVC_AngularJS_Html5 full project — полный проект Spring MVC + AngularJS + Bootstrap + HTML5.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5

 

Share Button
3
8632 Total Views 2 Views Today

Добавить комментарий