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

AngularJS - Директивы

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

Для расширения HTML используются директивы AngularJS. Это специальные атрибуты, начиная с ng-префикса. Мы обсудим следующие директивы -

  • Ng-app - эта директива запускает приложение AngularJS.
  • Ng-init - эта директива инициализирует данные приложения.
  • Ng-model - эта директива определяет модель, которая является переменной, которая будет использоваться в AngularJS.
  • Ng-repeat - эта директива повторяет элементы html для каждого элемента в коллекции.

Внимание!!!

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

Opera

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

Google Chrome

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

Mozilla Firefox

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

Yandex

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

Директива ng-app

Директива ng-app запускает приложение AngularJS. Он определяет корневой элемент. Он автоматически инициализирует или загружает приложение, когда загружается веб-страница, содержащая приложение AngularJS. Он также используется для загрузки различных модулей AngularJS в приложении AngularJS. В следующем примере мы определили приложение AngularJS по умолчанию, используя атрибут ng-app элемента div.

<div ng-app = "">
   ...
</div>

Директива ng-init

Директива ng-init инициализирует данные приложения AngularJS. Он используется, чтобы поместить значения в переменные, которые будут использоваться в приложении. В следующем примере мы инициализируем массив стран. Мы используем синтаксис JSON для определения массива стран.

<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
   ...
</div>

Директива ng-model

Директива ng-model определяет модель / переменную, которая будет использоваться в приложении AngularJS. В следующем примере мы определили модель с именем "name".

<div ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

Директива ng-repeat

Директива ng-repeat повторяет элементы html для каждого элемента в коллекции. В следующем примере мы повторяем массив из нескольких стран.

<div ng-app = "">
   ...
   <p>List of Countries with locale:</p>
  
   <ol>
      <li ng-repeat = "country in countries">
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      </li>
   </ol>
  
</div>

Пример

В следующем примере будут показаны все вышеупомянутые директивы.

testAngularJS.htm
<html>
  
   <head>
      <title>AngularJS Directives</title>
   </head>
  
   <body>
      <h1>Sample Application</h1>
     
      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of Countries with locale:</p>
     
         <ol>
            <li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
            </li>
         </ol>
      </div>
     
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
     
   </body>
</html>



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

Новые статьи

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

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