Expressões AngularJS: Array, Objetos, $eval, Strings

Por: James Hartmann James Hartmann
Hours Atualização do

⚡ Resumo Inteligente

As expressões do AngularJS são fragmentos de código colocados entre chaves duplas que vinculam dados diretamente a um modelo. Elas avaliam números, strings, objetos e arrays, e a função `$eval` realiza a mesma avaliação de dentro de um controlador.

  • 🧩 Sintaxe de vinculação: Double As chaves renderizam um valor onde a expressão está inserida, produzindo o mesmo resultado que a diretiva ng-bind.
  • 🔢 Tipos suportados: Numbers, cordas, JavaObjetos de script acessados ​​com a notação de ponto e arrays acessados ​​por índice são avaliados corretamente.
  • 🏷️ Variáveis ​​embutidas: A diretiva ng-init declara variáveis ​​de nível de visualização que as expressões podem então ler sem um controlador.
  • 🛡️ Avaliação indulgente: Propriedades indefinidas retornam `undefined` em vez de lançar o erro `ReferenceError`. JavaO script seria criado.
  • 🚫 Limites rígidos: Laços de repetição, exceções, declarações de funções, expressões regulares e os operadores vírgula e vazio não estão disponíveis.
  • ⚙️ Avaliação do controlador: O método `$scope.$eval` avalia uma string de expressão no código do controlador e expõe o resultado à visualização.
  • ⚠️ Status do suporte: O AngularJS chegou ao fim de sua vida útil em 31 de dezembro de 2021 e não receberá mais atualizações de segurança.
Saiba Mais

Expressões AngularJS

O que são expressões AngularJS?

Expressões são variáveis ​​escritas entre chaves duplas. {{ }}Eles são muito usados ​​no AngularJS e aparecem em vários tutoriais anteriores desta série.

⚠️ Aviso de suporte: AngularJS alcançou fim da vida em 31 de dezembro de 2021 e não recebe mais patches ou correções de segurança. A sintaxe abaixo permanece válida para a manutenção de aplicações AngularJS 1.x existentes; novos projetos devem usar a versão moderna. Angular, onde ainda existem chaves de interpolação, mas ng-init e $eval não.

Explique as expressões do AngularJS com um exemplo.

As expressões do AngularJS são escritas entre chaves duplas, como em {{expression}}.

Sintaxe: Um exemplo simples de uma expressão é {{5 + 6}}.

As expressões do AngularJS vinculam dados ao HTML da mesma forma que a diretiva ng-bind, e o AngularJS exibe os dados exatamente onde a expressão é colocada.

Neste exemplo, mostramos uma simples adição de números como uma expressão.

Expressões 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 Explicação:

  1. A diretiva ng-app está em branco, o que significa que nenhum módulo fornece controladores. directivasou serviços para esta página.
  2. Uma expressão simples soma dois números.

Saída:

Expressões AngularJS

A soma de 9 e 6 é realizada e o resultado, 15, é exibido.

AngularJS Numbers

Expressões funcionam com números. Este exemplo multiplica duas variáveis ​​numéricas. margin e profite exibe o produto.

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 Explicação:

  1. A diretiva ng-init define variáveis ​​e seus valores na própria view, de forma semelhante às variáveis ​​locais em qualquer aplicativo. linguagem de programação. Aqui margin e profit são declarados e atribuídos.
  2. A expressão então multiplica essas duas variáveis ​​locais.

Saída:

AngularJS Numbers

A multiplicação de 2 por 200 é realizada e o produto, 400, é exibido.

Sequências AngularJS

Expressões também funcionam com strings. Este exemplo define firstName e lastName e exibe ambos.

Sequências 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 Explicação:

  1. A diretiva ng-init define firstName com o valor “Guru"E lastName com o valor “99”.
  2. As expressões {{firstName}} e {{lastName}} Leia essas variáveis ​​e exiba-as na visualização.

Saída:

Sequências AngularJS

Ambos os valores aparecem na tela.

ARTIGOS RELACIONADOS

Objetos AngularJS

As expressões funcionam com JavaScript objetos, que consistem em pares nome-valor. A sintaxe de um JavaO objeto Script tem a seguinte aparência:

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

Este exemplo define um person objeto que contém dois pares chave-valor, firstName e lastName.

Objetos 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 Explicação:

  1. A diretiva ng-init define o objeto person com os pares chave-valor firstName definido como “Guru"E lastName definido como “99”.
  2. As expressões {{person.firstName}} e {{person.lastName}} Leia esses membros. Como eles pertencem ao objeto, a notação de ponto é necessária para acessar seus valores.

Saída:

Objetos AngularJS

Os valores de firstName e lastName aparecer na tela.

Matrizes AngularJS

Expressões funcionam com matrizes. Este exemplo define uma matriz que armazena as notas de um aluno em três disciplinas e exibe cada valor.

Matrizes 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 Explicação:

  1. A diretiva ng-init define o array marks com os três valores 1, 15 e 19.
  2. Expressões da forma marks[index] Leia cada elemento.

Saída:

Matrizes AngularJS

As marcas definidas na matriz são exibidas.

Capacidades e limitações da expressão AngularJS

Capacidades

  1. As expressões do AngularJS se assemelham JavaExpressões de script compartilham grande parte do mesmo poder e flexibilidade.
  2. Onde JavaO script gera um ReferenceError ou TypeError em uma propriedade indefinida; a avaliação do AngularJS é tolerante e retorna undefined ou null.
  3. Os filtros podem ser aplicados dentro de uma expressão para formatar os dados antes de serem exibidos.
  4. O operador ternário é suportado, então {{ isReady ? 'Yes' : 'No' }} é válido.

Limitações

  1. Laços e tratamento de exceções não podem ser usados ​​dentro de uma expressão AngularJS. A lógica condicional é limitada ao operador ternário; if Não há declarações disponíveis.
  2. Não é possível declarar funções em uma expressão, nem mesmo dentro de uma diretiva ng-init.
  3. Expressões regulares não podem ser criadas dentro de outra expressão. Uma expressão regular é uma combinação de símbolos e caracteres usada para encontrar correspondências em sequências de caracteres, como... .*\.txt$, e tais literais são rejeitados.
  4. O operador vírgula (,) e o modelo void Operadores não são permitidos.

ng-bind vs. Chaves de Expressão: Qual usar?

Double As chaves e a diretiva ng-bind produzem o mesmo resultado renderizado, então a escolha entre elas parece arbitrária. Mas não é. As duas se comportam de maneira diferente no instante anterior ao término do carregamento do AngularJS, e essa diferença é visível para quem usa a página.

Aspecto {{ expression }} ng-bind
Escrito em Conteúdo do elemento Um atributo de elemento
Antes do AngularJS carregar Os aparelhos ortodônticos brutos aparecem rapidamente na tela. Nada é mostrado
legibilidade Maior — o valor se mantém em linha Lower — o valor está oculto em um atributo
Vários valores por elemento Sim Não, apenas uma ligação.
Encadernação única Sim com {{::value}} Sim com ng-bind="::value"

A breve aparição de chaves brutas é conhecida como o "flash de conteúdo não interpolado" e ocorre porque o navegador renderiza a marcação antes que o AngularJS a compile. Use `ng-bind` ou adicione a diretiva `ng-cloak` para conteúdo visível acima da dobra. As chaves continuam sendo a opção mais clara e legível em todos os outros casos, principalmente quando vários valores aparecem dentro de um mesmo elemento.

Diferença entre expressão e $eval

O $eval A função avalia expressões de dentro do controlador. As expressões são avaliadas na visualização, enquanto $eval Avalia no código do controlador.

Este exemplo usa $eval Somar dois números e colocar o resultado no objeto de escopo para que a visualização possa exibi-lo.

Diferença entre expressão e $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 Explicação:

  1. Duas variáveis ​​de escopo, a e b, cada um com o valor 1.
  2. $scope.$eval avalia a soma e atribui o resultado à variável de escopo. value.
  3. A visualização então exibe value.

Saída:

Diferença entre expressão e $eval

A saída mostra a expressão avaliada dentro do controlador, com a soma das duas variáveis ​​de escopo enviadas e exibidas na visualização.

Perguntas Frequentes

Prefixar uma expressão com dois pontos, como em {{::name}}, interrompe a observação assim que um valor é resolvido. Isso remove o observador e reduz o custo de resumo em páginas com muitas associações estáticas.

$eval avalia imediatamente uma string em relação a um escopo. $parse Retorna uma função reutilizável para avaliação repetida. $interpolate Lida com uma string de modelo inteira contendo chaves, em vez de uma única expressão.

Na maioria das vezes. AI As ferramentas mantêm as chaves e reescrevem os filtros como pipes, mas as variáveis ​​ng-init não têm equivalente no Angular e devem ser movidas manualmente para uma classe de componente.

As ferramentas de IA examinam os modelos em busca de chamadas de função dentro de vinculações, que são executadas novamente a cada ciclo de digestão, e sugerem armazenar o resultado em cache no escopo ou mudar para uma vinculação única.

A avaliação do AngularJS é propositalmente tolerante. Uma propriedade ausente resulta em `undefined`, que é renderizado como uma string vazia; portanto, um valor em branco geralmente significa um erro de digitação no caminho da propriedade, e não uma falha em tempo de execução.

Resuma esta postagem com: