Обзор модели (ng-model) и связывания (ng-bind) с объектами в AngularJS

Обзор модели (директива ng-model) и связывания (директива ng-bind) с объектами в AngularJS.

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

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

Рассмотреть пример использования директив ng-model (модель) и ng-bind (связывание) в AngularJS.

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

modelBindStructure

Рассматриваемые директивы описаны в представлении ng-bind-model.jsp.

3. Понятие модели AngularJS

Модель — данные, представленные пользователю в представлении и с которым взаимодействует пользователь. Работа с моделью в AngularJS осуществляется с помощью директивы ng-model. Например в запись

связывает переменную userName с веденными в компонент input данными.

4. Связывание с моделью в AngularJS

Связать значение какой-либо переменной с компонентом DOM можно с помощью директивы ng-bind.

На этом участке html странице будет выведено значение переменной userPass зеленым цветом.

5. Пример использования модели и связывания

В начале мы задаем область действия AngularJS с помощью ng-app (можно не указывать имя модуля). Так же мы не задаем никакого контроллера, как это было в прошлой статье. Далее следует связывание модели с введенными данными в компонентах ввода имени пользователя и пароля с помощью директивы ng-model.

Значения переменных userName, userPass, email выводятся на экран двумя способами. Либо с помощью использования выражений и конструкции {{userName}} или с помощью директивы ng-bind.

modelBindStart

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

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

19. AngularJS Expressions — код для этой части

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Share Button
4
1525 Total Views 2 Views Today

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

CAPTCHA

*