Expressões AngularJS: ARRAY, Objetos, $eval, Strings [Exemplos]
James Hartmann
O que são expressões JS angulares?
Expressões são variáveis que foram definidas entre colchetes duplos {{ }}. Eles são muito comumente usados em Angular JS e você os veria em nossos tutoriais anteriores.
Explique as expressões Angular.js com um exemplo
Expressões AngularJS são aquelas escritas entre colchetes duplos {{expressão}}.
Sintaxe:
Um exemplo simples de expressão é {{5 + 6}}.
Expressões Angular.JS são usadas para vincular dados ao HTML da mesma forma que a diretiva ng-bind. AngularJS exibe os dados exatamente no local onde a expressão é colocada.
Vejamos um exemplo de expressões Angular.JS.
Neste exemplo, queremos apenas mostrar uma simples adição de números como uma expressão.
<!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>
Explicação do código:
- A diretiva ng-app em nosso exemplo está em branco, conforme mostrado na imagem acima. Isto significa apenas que não há módulo para atribuir controladores, directivas, serviços anexados ao código.
- Estamos adicionando uma expressão simples que analisa a adição de 2 números.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
Saída:
Da saída,
- Pode-se observar que ocorre a adição dos dois números 9 e 6 e é exibido o valor somado de 15.
Angular.JS Numbers
Expressões também podem ser usadas para trabalhar com números. Vejamos um exemplo de expressões Angular.JS com números.
Neste exemplo, queremos apenas mostrar uma multiplicação simples de 2 variáveis numéricas chamadas margem e lucro e exibir seu valor multiplicado.
<!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>
Explicação do código:
- A diretiva ng-init é usada em angular.js para definir variáveis e seus valores correspondentes na própria visualização. É como definir variáveis locais para codificar em qualquer linguagem de programação. Neste caso, estamos definindo 2 variáveis chamadas margem e lucro e atribuindo valores a elas.
- Estamos então usando as 2 variáveis locais e multiplicando seus valores.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
Saída:
Da saída,
- Pode-se ver claramente que ocorre a multiplicação dos 2 números 2 e 200, e o valor multiplicado de 400 é exibido.
Sequências AngularJS
Expressões também podem ser usadas para trabalhar com strings. Vejamos um exemplo de expressões Angular JS com strings.
Neste exemplo, vamos definir 2 strings de “firstName” e “lastName” e exibi-las usando expressões de acordo.
<!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'">
First Name : {{firstName}}<br>
last Name : {{lastName}}
</div>
</body>
</html>
Explicação do código:
- A diretiva ng-init é usada para definir as variáveis firstName com o valor “Guru” e a variável lastName com o valor “99”.
- Estamos então usando expressões de {{firstName}} e {{lastName}} para acessar o valor dessas variáveis e exibi-las na visualização de acordo.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
Saída:
A partir da saída, pode-se ver claramente que os valores de firstName e lastName são exibidos na tela.
Objetos Angular.JS
Expressões podem ser usadas para trabalhar com JavaScript objetos também.
Vejamos um exemplo de expressões Angular.JS com objetos javascript. Um objeto javascript consiste em um par nome-valor.
Abaixo está um exemplo da sintaxe de um objeto javascript.
Sintaxe:
var car = {type:"Ford", model:"Explorer", color:"White"};
Neste exemplo, vamos definir um objeto como um objeto pessoa que terá 2 pares de valores-chave de “firstName” e “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'}">
First Name : {{person.firstName}}<br>
Last Name : {{person.lastName}}
</div>
</body>
</html>
Explicação do código:
- A diretiva ng-init é usada para definir o objeto person que por sua vez possui pares de valores-chave de firstName com o valor “Guru” e a variável lastName com o valor “99”.
- Estamos então usando expressões de {{person.firstName}} e {{person.secondName}} para acessar o valor dessas variáveis e exibi-las na visualização de acordo. Como as variáveis-membro reais fazem parte do objeto person, elas precisam acessá-lo com a notação de ponto (.) para acessar seu valor real.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
Saída:
Da saída,
- Pode-se ver claramente que os valores de “firstName” e “secondName” são exibidos na tela.
Matrizes AngularJS
Expressões também podem ser usadas para trabalhar com arrays. Vejamos um exemplo de expressões Angular JS com arrays.
Neste exemplo, vamos definir um array que irá conter as notas de um aluno em 3 disciplinas. Na visualização, exibiremos o valor dessas marcas de acordo.
<!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>
Subject1 : {{marks[0] }}<br>
Subject2 : {{marks[1] }}<br>
Subject3 : {{marks[2] }}<br>
</div>
</body>
</html>
Explicação do código:
- A diretiva ng-init é usada para definir o array com o nome “marcas” com 3 valores de 1, 15 e 19.
- Estamos então usando expressões de marcas [índice] para acessar cada elemento do array.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
Saída:
Pela saída, pode-se ver claramente que as marcas que estão sendo exibidas estão definidas no array.
Capacidades e limitações da expressão AngularJS
Capacidades de expressão Angular.JS
- Expressões angulares são como JavaExpressões de script. Portanto, tem o mesmo poder e flexibilidade.
- In JavaScript, quando você tenta avaliar propriedades indefinidas, ele gera um ReferenceError ou TypeError. No Angular, a avaliação de expressão é indulgente e gera um undefined ou null.
- Pode-se usar filtros dentro de expressões para formatar dados antes de exibi-los.
Limitações da expressão Angular JS
- Atualmente não há disponibilidade para usar condicionais, loops ou exceções em uma expressão Angular
- Você não pode declarar funções em uma expressão Angular, mesmo dentro da diretiva ng-init.
- Não se pode criar expressões regulares em uma expressão Angular. Uma expressão regular é uma combinação de símbolos e caracteres, que são usados para localizar strings como .*\.txt$. Essas expressões não podem ser usadas em expressões Angular JS.
- Além disso, não se pode usar ou anular uma expressão Angular.
Diferença entre expressão e $eval
A função $eval permite avaliar expressões de dentro do próprio controlador. Portanto, enquanto expressões são usadas para avaliação na visualização, $eval é usado na função do controlador.
Vejamos um exemplo simples sobre isso.
Neste exemplo,
Vamos apenas usar a função $eval para adicionar 2 números e disponibilizá-los no objeto de escopo para que possam ser mostrados na view.
<!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>
Explicação do código:
- Estamos primeiro definindo 2 variáveis 'a' e 'b', cada uma contendo o valor 1.
- Estamos usando a função $scope.$eval para avaliar a adição das 2 variáveis e atribuí-la à variável de escopo 'valor'.
- Estaremos então apenas exibindo o valor da variável 'valor' na visualização.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
Saída:
A saída acima mostra a saída da expressão que foi avaliada no controlador. Os resultados acima mostram que a expressão $eval foi utilizada para realizar a adição das 2 variáveis de escopo 'a e b' com o resultado enviado e exibido na view.
Resumo
- Vimos como as expressões em JS angular pode ser usado para avaliar regular JavaExpressões semelhantes a scripts, como a simples adição de números.
- A diretiva ng-init pode ser usada para definir variáveis in-line que podem ser usadas na visualização.
- Expressões podem ser feitas para funcionar com tipos primitivos, como strings e números.
- Expressões também podem ser usadas para trabalhar com outros tipos, como JavaObjetos de script e matrizes.
- Expressões em Angular JS têm algumas limitações como, por exemplo, não ter expressões regulares ou usar funções, loops ou instruções condicionais.
