AngularJS основные директивы

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

ng-app – Определяет корневой элемент приложения.
ng-init – Определяет начальные значения для приложения.
ng-model –Связывает значение управления HTML для данных приложения.
ng-repeat – Определяет шаблон для каждого типа данных в коллекции.

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

ng-app является точной входа в AngulaJS приложение. Она определяет корневой элемент (в котором будет происходить вся работа) нашего приложения. Она автоматически инициализирует приложение когда веб страница будет загружена. Так же она используется для загрузки различных AngularJS модулей в приложение. В примере, мы определим корневой элемент для AngularJS приложения используя ng-app атрибут на

элементе.

1
<div ng-app = "">
2
   ...
3
</div>

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

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

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

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

Определяет модель/переменную для использования в приложении. В следующем примере мы определим модель с названием “name”.

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

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

ng-repeat повторяет html элементы для каждого элемента коллекции. В примере, мы рассмотрим вывод массива стран в DOM.

1
<div ng-app = "">
2
   ...
3
   <p>List of Countries with locale:</p>
4

5
   <ol>
6
      <li ng-repeat = "country in countries">
7
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
8
      </li>
9
   </ol>
10

11
</div>

Пример:

1
<html>
2

3
   <head>
4
      <title>AngularJS Directives</title>
5
   </head>
6

7
   <body>
8
      <h1>Sample Application</h1>
9

10
      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
11
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
12
         <p>Hello <span ng-bind = "name"></span>!</p>
13
         <p>List of Countries with locale:</p>
14

15
         <ol>
16
            <li ng-repeat = "country in countries">
17
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
18
            </li>
19
         </ol>
20
      </div>
21

22
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
23

24
   </body>
25
</html>

Что получилось:

Полный список деректив AngularJS: http://35.156.110.60/angularjs-tutorial/angularjs-references/