AngularJS - первое приложение

: AngularJS; 30 июля 2018; 11 апреля 2026; Просмотров: 4008

AngularJS - первое приложение

Прежде чем мы начнем с создания реального приложения 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>.
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Шаг 2 - Определите приложение AngularJS, используя директиву ng-app
<div ng-app = "">
   ...
</div>
Шаг 3 - Определите имя модели, используя директиву ng-model
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
Шаг 3 - Привяжите значение выше модели, определенной с помощью директивы ng-bind.
<p>Hello <span ng-bind = "name"></span>!</p>
Шаги для запуска приложения AngularJS

Используйте вышеупомянутые три шага на странице HTML.
testAngularJS.htm
<html>
  
   <head>
      <title>AngularJS First Application</title>
   </head>
  
   <body>
      <h1>Sample Application</h1>
     
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
     
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
     
   </body>
</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 приложения.