Инструкции AngularJS

AngularJS позволяет вам использовать так называемые “директивыновые свойства для расширения HTML.

AngularJS имеет набор встроенных директив, которые могут предоставлять функциональность для вашего приложения.

AngularJS также позволяет вам определять свои собственные инструкции.

Инструкции AngularJS

Инструкции AngularJS являются расширенными свойствами HTML, имеющими префикс ng-.

ng-app Инструкции инициализируют приложение AngularJS.

ng-init Инструкции инициализируют данные приложения.

ng-model Инструкции связывают значение HTML-контроллера (input, select, textarea) с данными приложения.

Пожалуйста, читайте информацию о всех инструкциях AngularJS в нашей статье о инструкциях AngularJS.

instance

<div ng-app="" ng-init="firstName='Bill'">
<p>Имя: <input type="text" ng-model="firstName"></p>
<p>Вы написали: {{ firstName }}</p>
</div>

Попробуйте это на практике

ng-app инструкции также говорят AngularJS, что элемент <div> является "владельцем" приложения AngularJS.

Привязка данных

в предыдущем примере {{ firstName }} Выражение - это выражение привязки данных AngularJS.

Привязка данных AngularJS связывает выражения AngularJS с данными AngularJS.

{{ firstName }} с ng-model="firstName" связаны.

В следующем примере два текстовых поля связаны двумя инструкциями ng-model:

instance

<div ng-app="" ng-init="quantity=1;price=5">
Количество: <input type="number" ng-model="quantity">
Затраты:    <input type="number" ng-model="price">
Общее в долларах: {{ quantity * price }}
</div>

Попробуйте это на практике

Использование ng-init не очень часто. Вы узнаете, как инициализировать данные, в главе о контроллерах.

повторение HTML элементов

ng-repeat Инструкции повторения HTML элементов:

instance

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Попробуйте это на практике

ng-repeat инструкции фактически клонируют каждый элемент в набореклонировать один HTML элемент.

используется для массива объектов ng-repeat Инструкции:

instance

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Попробуйте это на практике

AngularJS очень подходит для приложений CRUD (создание, чтение, обновление, удаление) с базой данных.

Представьте себе, если эти объекты являются записями из базы данных.

Инструкция ng-app

ng-app Инструкция ng-init определяетЭлемент-корень.

при загрузке веб-страницы:ng-app ИнструкцияАвтоматический запуск(автоматическая инициализация) приложения.

Инструкция ng-init

ng-init Инструкция ng-init определяетНачальное значение.

Обычно, вы не используете ng-init. Вы будете использовать контроллер или модуль.

Позже вы узнаете больше о контроллерах и модулях.

Инструкция ng-model

ng-model Инструкции связывают значение HTML-контроллера (input, select, textarea) с данными приложения.

ng-model Инструкции также могут:

  • Предоставить типовую валидацию данных приложения (число, адрес электронной почты, обязательное поле)
  • Предоставить состояние данных приложения (недействителен, грязный, каснулся, ошибка)
  • Предоставить CSS-класс для HTML-элемента
  • Привязать HTML-элемент к HTML-форме

Читать больше о ng-model Информация о инструкции.

Создание новой инструкции

Кроме всех встроенных инструкций AngularJS, вы можете создать свои собственные.

Новая инструкция создается с использованием .directive функцией создания.

Чтобы вызвать новую инструкцию, создайте HTML-элемент с тем же именем, что и новая инструкция.

Имя инструкций должно быть написано с заглавной буквы и использовать стиль camelCasew3TestDirectiveно при вызове его, необходимо использовать разделитель - в имениw3-test-directive:

instance

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Сделано с помощью инструкции!</h1>"
  });
});
</script>
</body>

Попробуйте это на практике

Вы можете вызвать инструкцию следующим образом:

  • Имя элемента
  • Атрибут
  • Класс
  • Комментарий

Следующие примеры都将产生相同的结果：

Имя элемента

<w3-test-directive></w3-test-directive>

Попробуйте это на практике

Атрибут

<div w3-test-directive></div>

Попробуйте это на практике

Класс

<div class="w3-test-directive"></div>

Попробуйте это на практике

Комментарий

<!-- directive: w3-test-directive -->

Попробуйте это на практике

Ограничение

Вы можете ограничить вашу инструкцию вызовом только через некоторые методы.

instance

добавив значение "A" of restrict Атрибут, этот инструкция может быть вызван только через атрибуты:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Сделано с помощью инструкции!</h1>"
  });
});

Попробуйте это на практике

правильные значения restrict:

  • E представляет имя элемента
  • A представляет атрибут
  • C представляет класс
  • M представляет комментарий

По умолчанию это значение равно EAЭто означает, что можно вызывать имена элементов и атрибутов инструкций.