8) Выражения AngularJS

Что такое Angular JS Expressions?

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

В этом уроке вы узнаете

Объясните Angular.js Выражения с примером
AngularJS Numbers
AngularJS Strings
AngularJS объекты
AngularJS Arrays
Возможности и ограничения AngularJS Expression
Разница между выражениями и $ eval

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

Выражения AngularJS — это те, которые записаны в двойных скобках {{expression}}.

Синтаксис:

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

Выражения Angular.JS используются для привязки данных к HTML так же, как и директива ng-bind. AngularJS отображает данные точно в том месте, где находится выражение.

Давайте рассмотрим пример выражений Angular.JS.

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

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

    <h1> Guru99 Global Event</h1>

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

</body>
</html>

Объяснение кода:

Директива ng-app в нашем примере пуста, как показано на скриншоте выше. Это означает только то, что отсутствует модуль для назначения контроллеров, директив, сервисов, прикрепленных к коду.
Мы добавляем простое выражение, которое смотрит на сложение 2 чисел.

Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.

Вывод:

Из вывода

Можно видеть, что происходит добавление двух чисел 9 и 6, и отображается добавленное значение 15.

Номера Angular.JS

Выражения можно использовать и для работы с числами. Давайте рассмотрим пример выражений Angular.JS с числами.

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/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>

Объяснение кода:

Директива ng-init используется в angular.js для определения переменных и их соответствующих значений в самом представлении. Это похоже на определение локальных переменных для кода на любом языке программирования. В этом случае мы определяем 2 переменные, называемые маржой и прибылью, и присваиваем им значения.
Затем мы используем 2 локальные переменные и умножаем их значения.

Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.

Вывод:

Из вывода

Хорошо видно, что происходит умножение 2 чисел 2 и 200, и отображается умноженное значение 400.

AngularJS Strings

Выражения также могут использоваться для работы со строками. Давайте рассмотрим пример выражений Angular JS со строками.

В этом примере мы собираемся определить 2 строки «firstName» и «lastName» и отобразить их, используя соответствующие выражения.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

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

    <h1> Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">

        &nbsp;&nbsp;&nbsp;
        First Name : {{firstName}}<br>&nbsp;&nbsp;&nbsp;
        last Name : {{lastName}}

    </div>

</body>
</html>

Объяснение кода:

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

Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.

Вывод:

Из вывода ясно видно, что значения firstName и lastName отображаются на экране.

Angular.JS Объекты

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

Давайте рассмотрим пример выражений Angular.JS с объектами javascript. Объект javascript состоит из пары имя-значение.

Ниже приведен пример синтаксиса объекта JavaScript.

Синтаксис:

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

В этом примере мы собираемся определить один объект как объект person, который будет иметь 2 пары значений ключа «firstName» и «lastName».

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

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

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">

    &nbsp;&nbsp;&nbsp;
    First Name : {{person.firstName}}<br>&nbsp;&nbsp;&nbsp;
    Last Name : {{person.lastName}}

</div>

</body>
</html>

Объяснение кода:

Директива ng-init используется для определения объекта person, который, в свою очередь, имеет пары значений ключа firstName со значением «Guru» и переменную lastName со значением «99».
Затем мы используем выражения {{person.firstName}} и {{person.secondName}}, чтобы получить доступ к значению этих переменных и соответственно отобразить их в представлении. Поскольку фактические переменные-члены являются частью объекта person, они должны получить к нему доступ с помощью точки (.), Чтобы получить доступ к их фактическому значению.

Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.

Вывод:

Из вывода

Хорошо видно, что значения «firstName» и «secondName» отображаются на экране.

AngularJS Arrays

Выражения также могут использоваться для работы с массивами. Давайте рассмотрим пример выражений Angular JS с массивами.

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

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

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

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">

    Student Marks<br>&nbsp;&nbsp;&nbsp;
    Subject1 : {{marks[0] }}<br>&nbsp;&nbsp;&nbsp;
    Subject2 : {{marks[1] }}<br>&nbsp;&nbsp;&nbsp;
    Subject3 : {{marks[2] }}<br>&nbsp;&nbsp;&nbsp;
</div>

</body>
</html>

Объяснение кода:

Директива ng-init используется для определения массива с именем «marks» с 3 значениями 1, 15 и 19.
Затем мы используем выражения mark [index] для доступа к каждому элементу массива.

Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.

Вывод:

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

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

Возможности выражения Angular.JS

Угловые выражения похожи на выражения JavaScript. Следовательно, он обладает такой же силой и гибкостью.
В JavaScript, когда вы пытаетесь оценить неопределенные свойства, он генерирует ReferenceError или TypeError. В Angular вычисление выражений прощает и генерирует неопределенное или нулевое значение.
Можно использовать фильтры в выражениях для форматирования данных перед их отображением.

Ограничения Angular JS Expression

В настоящее время нет возможности использовать условные выражения, циклы или исключения в выражении Angular.
Вы не можете объявлять функции в выражении Angular, даже внутри директивы ng-init.
Нельзя создавать регулярные выражения в угловом выражении. Регулярное выражение — это комбинация символов и символов, которые используются для поиска таких строк, как. * \. Txt $. Такие выражения нельзя использовать в выражениях Angular JS.
Кроме того, нельзя использовать или аннулировать в угловом выражении.

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

Функция $ eval позволяет оценивать выражения из самого контроллера. Таким образом, в то время как выражения используются для оценки в представлении, $ eval используется в функции контроллера.

Давайте посмотрим на простой пример по этому вопросу.

В этом примере

Мы просто собираемся использовать функцию $ eval, чтобы добавить 2 числа и сделать их доступными в объекте области видимости, чтобы они могли быть показаны в представлении.

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

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.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>

Объяснение кода:

Сначала мы определяем 2 переменные «a» и «b», каждая из которых содержит значение 1.
Мы используем функцию $ scope. $ Eval, чтобы оценить добавление двух переменных и присвоить их переменной области «value».
Затем мы просто отображаем значение переменной ‘value’ в представлении.

Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.

Вывод:

Приведенный выше вывод показывает вывод выражения, которое было оценено в контроллере. Приведенные выше результаты показывают, что выражение $ eval использовалось для добавления двух переменных области действия «a и b», при этом результат отправлялся и отображался в представлении.

Резюме:

Мы видели, как выражения в Angular JS можно использовать для оценки регулярного JavaScript, такого как выражения, такие как простое добавление чисел.
Директива ng-init может использоваться для определения встроенных переменных, которые могут использоваться в представлении.
Выражения могут быть сделаны для работы с примитивными типами, такими как строки и числа.
Выражения также можно использовать для работы с другими типами, такими как объекты JavaScript и массивы.
У выражений в Angular JS есть несколько ограничений, например, отсутствие регулярных выражений или использование функций, циклов или условных операторов.

AngularJS Strings

Angular.JS Объекты

AngularJS Arrays

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

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

8) Выражения AngularJS

Что такое Angular JS Expressions?

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

Номера Angular.JS

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности