Angular. 2. Основные понятия, директивы

AngularJS это популярный фреймворк JavaScript, и, он написан, как это не странно, на JavaScript. Распространяется фреймворк как JS файл, поэтому подключить его довольно просто, добавьте в тег head следующий код:

Версия может меняться. Кстати, получить эту строку можно из CDN Google или с сайта AngularJS.

AngularJS расширяет HTML

Помните, как в курсе HTML вам говорили, что писать CSS стили в элементы некрасиво? Или что JS нужно выносить в отдельный файл? Что HTML – только для разметки? Забудьте!

AngularJS расширяет HTML с помощью атрибутов ng-directives (директив). А слово ng – сокращение от angular. Мы использовали несколько директив:

  • ng-app директива определяет приложение AngularJS. Внутри блока, который определен как приложение ангулар может работать. Часто эту директиву вешают на тег body.
  • ng-model связывает значения получаемые из управляющих элементов (input, select, textarea) с блоком данных. Для начала можно представить себе глобальный массив, куда Angular кладет данные из полей ввода под тем именем, которое указано в ng-model.
  • ng-bind – показывает куда выводить данные, которые мы положили с помощью ng-model. Директива ng-bind, указывает место вывода данных на страницы. Вывод происходит автоматически при изменении данных. Кстати, в предыдущем уроке мы вместо ng-bind использовали фигурные скобочки {{}}.

В следующем примере мы связываем данные из полей ввода с выводом в параграфы:

Для тех, кто изучал JS: ng-model задает имя переменной, в данном случае name, куда кладется значение из input. Причем событие добавлять не нужно. Директива ng-bind беред данные из указанной переменной name и пишет внутрь тега p.

Задаем значение переменных на старте

Для задания переменных на запуске используетcя директива ng-init. Кстати, обратите внимание на чередование кавычек – это важно.

See the Pen Angular2 by Alex (@luschenko) on CodePen.

Валидный код

А как же валидация? Вы задали очень правильный вопрос! Атрибуты ng-init и им подобные не пройдут валидацию. Для правильной валидации добавьте им префикс data-

See the Pen Angular 2_1 by Alex (@luschenko) on CodePen.

И все работает!

Angular. 2. Основные понятия, директивы: 1 комментарий

  1. geomineral.ru

    AngularJS создан для тех разработчиков, которые считают, что декларативный стиль лучше подходит для создания UI, а императивный — для написания бизнес-логики.

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

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