Директивы AngularJS используются для расширения HTML. Это специальные атрибуты, начинающиеся с ng -prefix. Давайте обсудим следующие директивы —
-
ng-app — эта директива запускает приложение AngularJS.
-
ng-init — эта директива инициализирует данные приложения.
-
ng-model — эта директива определяет модель, которая является переменной для использования в AngularJS.
-
ng-repeat — эта директива повторяет элементы HTML для каждого элемента в коллекции.
ng-app — эта директива запускает приложение AngularJS.
ng-init — эта директива инициализирует данные приложения.
ng-model — эта директива определяет модель, которая является переменной для использования в AngularJS.
ng-repeat — эта директива повторяет элементы HTML для каждого элемента в коллекции.
директива 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-модели
Директива 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 = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> </body> </html>
Выход
Откройте файл testAngularJS.htm в веб-браузере. Введите свое имя и увидите результат.