Перед тем как мы начнем создание первого HelloWorld приложения использующего AngularJS мы посмотрим на основные части нашего приложения. AngularJS приложение содержит три основных части:

  • ng-app – Директива определяет и привязывает AngularJS приложение к HTML.
  • ng-model – Директива связывает значения AngularJS с управляющими элементами (input, select, button) HTML страницы.
  • ng-bind – Директива связывает данные AngularJS с HTML тегами.

 

Шаги для создания приложения на AngularJS

Шаг 1 – Загружаем фреймворк

 

Шаг 2 – Определяем корневой элемент приложения

Шаг 3 — Определяем модель используя директиву ng-model

 

Шаг 4 – Связываем значения модели с тегами

 

Шаги для запуска AngularJS приложения

Используем простую HTML страницу testAngularJS.htm.

 

Вывод

Откройте файл testAngularJS.htm в браузере. Введите имя и посмотрите что произойдет.

e1ff17a3b0

Как AngularJS интегрируется в HTML

  • ng-app – директива определяет где начинается приложение AngularJS
  • ng-model – директива которая создает модель переменной с названием «name» которая может быть использована в html странице вместе с блоком div с директивой ng-app
  • ng-bind – далее, используется имя модели для отображения текста с инпута в span элементе.
  • Закрывающийся </div> говорит о конце приложения AngularJS
Первое одностраничное приложение с AngularJS

Отключите, пожалуйста, AdBlock / uBlock. Поддержите наш проект! Сайт не переполнен рекламными блоками, поп-андерами и другими видами рекламы.