Выражения AngularJS: массивы, объекты, $eval, строки.

Автор: Джеймс Хартман Джеймс Хартман
Hours обновлено

⚡ Умное резюме

Выражения AngularJS — это фрагменты кода, заключенные в двойные фигурные скобки, которые напрямую связывают данные с шаблоном. Они вычисляют числа, строки, объекты и массивы, а функция `$eval` выполняет ту же самую оценку внутри контроллера.

  • 🧩 Синтаксис привязки: Double Фигурные скобки отображают значение в том месте, где находится выражение, что дает тот же результат, что и директива ng-bind.
  • 🔢 Поддерживаемые типы: Numbersструны, JavaОбъекты скриптов, доступ к которым осуществляется с помощью точечной нотации, и массивы, доступ к которым осуществляется по индексу, оцениваются корректно.
  • 🏷️ Встроенные переменные: Директива ng-init объявляет переменные уровня представления, которые затем могут считываться выражениями без контроллера.
  • 🛡️ Прощающая оценка: Неопределенные свойства приводят к ошибке "undefined", а не к простому исключению ReferenceError. JavaСкрипт вызовет ошибку.
  • ???? Жесткие ограничения: Циклы, исключения, объявления функций, регулярные выражения, а также операторы запятой и void недоступны.
  • ⚙️ Оценка контроллера: $scope.$eval вычисляет строковое выражение в коде контроллера и предоставляет результат представлению.
  • ⚠️ Статус поддержки: Поддержка AngularJS прекратилась 31 декабря 2021 года, и дальнейшие обновления безопасности для него не выпускаются.
Читать

Выражения AngularJS

Что такое выражения AngularJS?

Выражения — это переменные, записанные внутри двойных фигурных скобок. {{ }}Они очень часто используются в AngularJS и встречаются в предыдущих уроках этой серии.

⚠️ Уведомление службы поддержки: AngularJS достиг Прекращение поддержки 31 декабря 2021 года. и не получает дальнейших исправлений или обновлений безопасности. Приведенный ниже синтаксис остается актуальным для поддержки существующих приложений AngularJS 1.x; в новых проектах следует использовать современный синтаксис. Угловойгде интерполяционные фигурные скобки всё ещё существуют, но ng-init и $eval не.

Объясните выражения AngularJS на примере.

Выражения AngularJS записываются внутри двойных фигурных скобок, например: {{expression}}.

Синтаксис: Простой пример выражения — это {{5 + 6}}.

Выражения AngularJS связывают данные с HTML так же, как и директива ng-bind, и AngularJS отображает данные именно там, где размещено выражение.

В этом примере мы показываем простое сложение чисел в виде выражения.

Выражения AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

Code Объяснение:

  1. Директива ng-app пуста, что означает, что ни один модуль не предоставляет контроллеры. Директивыили услуги, доступные на этой странице.
  2. Простое выражение складывает два числа.

Выход:

Выражения AngularJS

Производится сложение чисел 9 и 6, и на экране отображается результат — 15.

AngularJS Numbers

Выражения работают с числами. В этом примере происходит умножение двух числовых переменных. margin и profitи отображает продукт.

AngularJS Numbers

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="margin=2;profit=200">
        Total profit margin

        {{margin*profit}}
    </div>

</body>
</html>

Code Объяснение:

  1. Директива ng-init определяет переменные и их значения непосредственно в представлении, подобно локальным переменным в любом другом компоненте. язык программирования, Вот margin и profit объявлены и назначены.
  2. Затем это выражение умножает эти две локальные переменные.

Выход:

AngularJS Numbers

Производится умножение чисел 2 и 200, и на экране отображается результат — 400.

Строки AngularJS

Выражения также работают со строками. В этом примере определено firstName и lastName и отображает оба варианта.

Строки AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">
        First Name : {{firstName}}<br>
        Last Name : {{lastName}}
    </div>

</body>
</html>

Code Объяснение:

  1. Директива ng-init определяет firstName со значением «Guru" а также lastName со значением «99».
  2. Выражения {{firstName}} и {{lastName}} Прочитайте эти переменные и отобразите их в представлении.

Выход:

Строки AngularJS

Оба значения отображаются на экране.

СТАТЬИ ПО ТЕМЕ

Объекты AngularJS

Выражения работают с JavaСценарий Объекты, состоящие из пар «имя-значение». Синтаксис JavaОбъект скрипта выглядит следующим образом:

var car = {type: "Ford", model: "Explorer", color: "White"};

Этот пример определяет person объект, содержащий две пары ключ-значение, firstName и lastName.

Объекты AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
    First Name : {{person.firstName}}<br>
    Last Name : {{person.lastName}}
</div>

</body>
</html>

Code Объяснение:

  1. Директива ng-init определяет объект. person с парами ключ-значение firstName установлен в "Guru" а также lastName установить на «99».
  2. Выражения {{person.firstName}} и {{person.lastName}} Прочитайте значения этих элементов. Поскольку они принадлежат объекту, для получения их значений требуется точечная нотация.

Выход:

Объекты AngularJS

Значения firstName и lastName появиться на экране.

AngularJS Массивы

Выражения работают с массивами. В этом примере определяется массив, содержащий оценки студента по трем предметам, и отображается каждое значение.

AngularJS Массивы

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">
    Student Marks<br>
    Subject1 : {{marks[0]}}<br>
    Subject2 : {{marks[1]}}<br>
    Subject3 : {{marks[2]}}
</div>

</body>
</html>

Code Объяснение:

  1. Директива ng-init определяет массив. marks с тремя значениями 1, 15 и 19.
  2. Выражения формы marks[index] Прочитайте каждый элемент.

Выход:

AngularJS Массивы

Отображаются отметки, заданные в массиве.

Возможности и ограничения AngularJS Expression

Обработка и услуги

  1. Выражения AngularJS напоминают JavaСкриптовые выражения обладают схожей мощностью и гибкостью.
  2. где JavaВ скрипте возникает ошибка ReferenceError или TypeError при обнаружении неопределенного свойства, в AngularJS же оценка корректна и возвращает undefined или null.
  3. Фильтры можно применять внутри выражения для форматирования данных перед их отображением.
  4. Тройной оператор поддерживается, поэтому {{ isReady ? 'Yes' : 'No' }} действует.

Ограничения

  1. Циклы и обработка исключений не могут использоваться внутри выражений AngularJS. Условная логика ограничена тернарным оператором; if Заявления недоступны.
  2. Функции нельзя объявлять в выражении, даже внутри директивы ng-init.
  3. Регулярные выражения нельзя создать внутри выражения. Регулярное выражение — это комбинация символов и знаков, используемая для сопоставления строк, например: .*\.txt$и подобные буквальные конструкции отвергаются.
  4. Оператор запятой (,) и void Операторам вход воспрещен.

ng-bind против фигурных скобок: что использовать?

Double Использование фигурных скобок и директивы ng-bind приводит к одинаковому результату рендеринга, поэтому выбор между ними кажется произвольным. Но это не так. Они ведут себя по-разному в момент до завершения загрузки AngularJS, и эта разница видна пользователю страницы.

Аспект {{ expression }} ng-bind
Написано в Содержимое элемента Атрибут элемента
Перед загрузкой AngularJS На экране мелькают необработанные скобки. Ничего не показано
читабельность Чем выше значение, тем оно остается на прежнем уровне. Меньшее значение — скрыто в атрибуте.
Несколько значений на элемент Да Нет, только одно крепление.
Одноразовое переплетное соединение Да, с {{::value}} Да, с ng-bind="::value"

Кратковременное появление необработанных фигурных скобок известно как «вспышка неинтерполированного контента», и это происходит потому, что браузер отображает разметку до того, как AngularJS её скомпилирует. Используйте ng-bind или добавьте директиву ng-cloak для контента, видимого в верхней части страницы. Фигурные скобки остаются более понятным и читаемым вариантом везде, особенно там, где несколько значений находятся внутри одного элемента.

Разница между выражением и $eval

$eval Функция вычисляет выражения внутри контроллера. Выражения вычисляются в представлении, тогда как $eval Выполняется в коде контроллера.

В этом примере используется $eval чтобы сложить два числа и поместить результат в объект области видимости, чтобы представление могло его отобразить.

Разница между выражением и $eval

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<div ng-app="sampleApp" ng-controller="AngularController">
    <h1>Guru99 Global Event</h1>
    {{value}}
</div>

<script>
    var sampleApp = angular.module('sampleApp', []);
    sampleApp.controller('AngularController', function($scope) {
        $scope.a = 1;
        $scope.b = 1;

        $scope.value = $scope.$eval('a+b');
    });
</script>

</body>
</html>

Code Объяснение:

  1. Две переменные области видимости, a и bКаждый из них имеет значение 1.
  2. $scope.$eval вычисляет их сумму и присваивает результат переменной области видимости. value.
  3. Затем отображается следующее: value.

Выход:

Разница между выражением и $eval

В результате выполнения отображается выражение, вычисленное внутри функции. контроллерСумма двух переменных области видимости передается и отображается в представлении.

Часто задаваемые вопросы (FAQ)

Добавление двух двоеточий перед выражением, например: {{::name}}Отслеживание прекращается, как только значение определяется. Это удаляет наблюдателя и снижает стоимость обработки дайджеста на страницах с большим количеством статических привязок.

$eval немедленно сравнивает строку с сфера. $parse Возвращает многократно используемую функцию для повторной оценки. $interpolate Обрабатывает всю строку шаблона, содержащую фигурные скобки, а не отдельное выражение.

В основном. AI Инструменты сохраняют фигурные скобки и переписывают фильтры как пайпы, но переменные ng-init не имеют аналогов в Angular и должны быть перемещены в класс компонента вручную.

Инструменты искусственного интеллекта сканируют шаблоны на предмет вызовов функций внутри привязок, которые повторно запускаются при каждом цикле обработки, и предлагают либо кэшировать результат в области видимости, либо переключиться на одноразовую привязку.

Оценка AngularJS намеренно снисходительна. Отсутствие свойства приводит к значению undefined, которое отображается как пустая строка, поэтому пустое значение обычно означает опечатку в пути к свойству, а не ошибку во время выполнения.

Подведем итог этой публикации следующим образом: