Angular.js - Duas formas diferentes de imprimir valores
Uma dica rápida sobre Angular são as formas de se imprimir valores no HTML de sua aplicação.
A maneira mais "visual" é utilizando chaves duplas {{}}. O que for inserido dentro destas chaves duplas será considerado como uma variável e seu conteúdo, se este existir, será impresso.
<html ng-app>
<head>
<title>Dois tipos de input</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
</head>
<body ng-controller='TextController'>
<h1>Exemplo</h1>
<div>
<p>{{content}}</p>
</div>
<script>
function TextController($scope) {
$scope.content = "Com chaves";
}
</script>
</body>
</html>
No exemplo acima {{content}} é uma variável. A função TextController() seta o valor de content para "Com chaves".
Temos como saída:
Exemplo
Com chaves
Outro modo de imprimir-se valores é através de uma diretiva, chamada ng-bind. Vamos ver outro exemplo:
<html ng-app>
<head>
<title>Dois tipos de input</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
</head>
<body ng-controller='TextController'>
<h1>Exemplo</h1>
<div>
<p>{{content}}</p>
<p ng-bind="newcontent"></p>
</div>
<script>
function TextController($scope) {
$scope.content = "Com chaves";
$scope.newcontent = "Sem chaves";
}
</script>
</body>
</html>
No exemplo acima newcontent é nossa nova variável e ela é inserida através da diretiva ng-bind="newcontent". Temos como resultado:
Exemplo
Com chaves
Sem chaves
A diferença básica entre as duas é que se o processamento da página demorar muito, no primeiro exemplo veremos a variável {{content}} explicitamente impressa na saída do html, antes do javascript interpretar a variável e substituí-la por seu valor. Já com o uso de diretivas o usuário verá apenas um espaço vazio até que a variável seja interpretada e impressa.
A vantagem de utilizar as chaves duplas é que fica mais claro para o programador aonde estão as variáveis no markup.
Com estas informações em mente avalie seu projeto e faça uso da melhor maneira para você.
Abraço!
Show! Tinha esquecido do ng-bind... valeu cara!
ResponderExcluirObrigado pela visita!
ExcluirAbraços e boa sorte