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

  • Ng-app - эта директива определяет и связывает приложение AngularJS с HTML.
  • Ng-model - эта директива связывает значения данных приложения AngularJS с элементами управления вводами HTML.
  • Ng-bind - эта директива связывает данные приложения AngularJS с тегами HTML.

Внимание!!!

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Свободу АНГУЛЯРУ в Opera!!! )))

Google Chrome

Свободу АНГУЛЯРУ в Google Chrome!!! )))

Mozilla Firefox

Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))

Yandex

Свободу АНГУЛЯРУ в 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 приложения.

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok