Компьютерапия

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

Категория: AngularJS
Просмотров: 3383

Прежде чем мы начнем с создания реального приложения 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 приложения.



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

Новые статьи

Предыдущие статьи


We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok