Прежде чем мы начнем с создания реального приложения HelloWorld с помощью AngularJS, давайте посмотрим, каковы фактические части приложения AngularJS. Приложение AngularJS состоит из следующих трех важных частей:
- Ng-app - эта директива определяет и связывает приложение AngularJS с HTML.
- Ng-model - эта директива связывает значения данных приложения AngularJS с элементами управления вводами HTML.
- Ng-bind - эта директива связывает данные приложения AngularJS с тегами HTML.
Внимание!!!
Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!
Opera
![]()
Google Chrome
![]()
Mozilla Firefox
![]()
Yandex
![]()
Шаги по созданию приложения AngularJS
Шаг 1 - Структура загрузки
Будучи чистой платформой JavaScript, ее можно добавить с помощью тега
<$cript>
.Шаг 2 - Определите приложение AngularJS, используя директиву ng-app
Шаг 3 - Определите имя модели, используя директиву ng-model
Шаг 3 - Привяжите значение выше модели, определенной с помощью директивы ng-bind.
Шаги для запуска приложения AngularJS
Используйте вышеупомянутые три шага на странице HTML.
Вывод
Откройте textAngularJS.htm в веб-браузере. Введите свое имя и посмотрите результат.
Enter your Name:
Hello !
Как AngularJS интегрируется с HTML
- Директива ng-app указывает начало приложения AngularJS.
- Директива ng-model затем создает модельную переменную с именем "name", которая может использоваться с html-страницей и внутри div, имеющей директиву ng-app.
- Ng-bind затем использует модель имени для отображения в теге html span всякий раз, когда пользователь вводит что-то в текстовое поле.
- Закрывающий тег div обозначает окончание AngularJS приложения.
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
- AngularJS - Службы - 21/07/2018 20:07
- AngularJS - Интернализация - 20/07/2018 17:18
- AngularJS - Пользовательские директивы - 20/07/2018 17:17
- AngularJS - инъекция зависимостей - 20/07/2018 17:14
- AngularJS - Области - 20/07/2018 17:13
- AngularJS - View - 20/07/2018 17:09
- AngularJS - Ajax - 20/07/2018 17:08
- AngularJS - Подключение вебстраниц - 20/07/2018 17:06
- AngularJS - Формы - 20/07/2018 17:02
- AngularJS - Модули - 20/07/2018 16:34
- AngularJS - HTML DOM - 20/07/2018 16:30
- AngularJS - Таблицы - 20/07/2018 16:26
- AngularJS - Фильтры - 20/07/2018 16:13
- AngularJS - Контроллеры - 20/07/2018 16:09
- AngularJS - Выражения - 20/07/2018 16:03
- AngularJS - Директивы - 20/07/2018 16:02