AngularJS vincula dados para HTML usando expressões.
AngularJS Expressões
AngularJS expressões podem ser escritas entre chaves duplas: {{ expression }} .
AngularJS expressões também pode ser escrito dentro de uma directiva: ng-bind=" expression " .
AngularJS resolverá a expressão, e retornar o resultado exatamente onde a expressão é escrito.
AngularJS expressões são muito parecidos com expressões JavaScript: Eles podem conter literais, operadores e variáveis.
Exemplo {{5 + 5}} ou {{firstName + "" + lastName}}
Exemplo
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Tente você mesmo " Se você remover o ng-app directiva, HTML irá exibir a expressão como ela é, sem resolvê-lo:
Exemplo
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Tente você mesmo " Você pode escrever expressões onde quiser, AngularJS simplesmente resolver a expressão e retornar o resultado.
Exemplo: Vamos AngularJS alterar o valor de propriedades CSS.
Mudar a cor da caixa de entrada abaixo, alterando o seu valor:
Exemplo
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
Tente você mesmo " Números AngularJS
AngularJS números são como números de JavaScript:
Exemplo
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Tente você mesmo " 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>
Tente você mesmo "  | Usando ng-init não é muito comum. Você vai aprender a melhor maneira de inicializar dados no capítulo sobre os controladores. |
|---|
AngularJS Cordas
AngularJS cordas são como cordas de JavaScript:
Exemplo
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Tente você mesmo " 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>
Tente você mesmo " objetos AngularJS
AngularJS objetos são como objetos JavaScript:
Exemplo
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Tente você mesmo " 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>
Tente você mesmo " AngularJS Arrays
AngularJS matrizes são como matrizes de JavaScript:
Exemplo
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Tente você mesmo " 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>
Tente você mesmo " AngularJS Expressões vs. JavaScript Expressões
Como expressões JavaScript, AngularJS expressões podem conter literais, operadores e variáveis.
Ao contrário de expressões JavaScript, AngularJS expressões podem ser escrito dentro HTML.
AngularJS expressões não suportam condicionais, loops e exceções, enquanto expressões JavaScript fazer.
AngularJS expressões suportam filtros, enquanto expressões JavaScript não.