Expressões AngularJS
AngularJS vincula dados ao HTML usando Expressions .
Expressões AngularJS
Expressões AngularJS podem ser escritas dentro de chaves duplas: .{{ expression }}
Expressões AngularJS também podem ser escritas dentro de uma diretiva: .ng-bind="expression"
O AngularJS resolverá a expressão e retornará o resultado exatamente onde a expressão foi escrita.
As expressões AngularJS são muito parecidas com as expressões JavaScript: elas podem conter literais, operadores e variáveis.
Exemplo {{ 5 + 5 }} ou {{ firstName + " " + lastName }}
Exemplo
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Se você remover a ng-appdiretiva, o HTML exibirá a expressão como está, sem resolvê-la:
Exemplo
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Você pode escrever expressões onde quiser, o AngularJS simplesmente resolverá a expressão e retornará o resultado.
Exemplo: Deixe o AngularJS alterar o valor das propriedades CSS.
Altere a cor da caixa de entrada abaixo, alterando seu valor:
Exemplo
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol">
</div>
Números AngularJS
Os números AngularJS são como números JavaScript:
Exemplo
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Mesmo exemplo usando ng-bind:
Exemplo
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
O uso ng-initnão é muito comum. Você aprenderá uma maneira melhor de inicializar dados no capítulo sobre controladores.
Strings AngularJS
As strings AngularJS são como strings JavaScript:
Exemplo
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Mesmo exemplo usando ng-bind:
Exemplo
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
Objetos AngularJS
Objetos AngularJS são como objetos JavaScript:
Exemplo
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Mesmo exemplo usando ng-bind:
Exemplo
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
Matrizes AngularJS
Arrays AngularJS são como arrays JavaScript:
Exemplo
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Mesmo exemplo usando ng-bind:
Exemplo
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Expressões AngularJS versus Expressões JavaScript
Assim como as expressões JavaScript, as expressões AngularJS podem conter literais, operadores e variáveis.
Ao contrário das expressões JavaScript, as expressões AngularJS podem ser escritas dentro de HTML.
As expressões AngularJS não suportam condicionais, loops e exceções, enquanto as expressões JavaScript suportam.
As expressões AngularJS suportam filtros, enquanto as expressões JavaScript não.
Aprenda sobre JavaScript em nosso Tutorial de JavaScript .