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!

Comentários

Postar um comentário

Postagens mais visitadas deste blog

MySQL - Completando quantidades fixas de caracteres com as funções LPAD() e RPAD()

Em PHP temos uma função não tão conhecida, str_pad() , que completa uma string com qualquer caractere até uma quantidade definida pelo programador. Esta função é extremamente útil no caso de codificações padronizadas onde a quantidade de caracteres deve ser sempre fixa. No MySQL temos uma função equivalente chamada LPAD() . A sintaxe desta função é LPAD(CAMPO,QUANTIDADE DE CARACTERES,CARACTERE PARA COMPLETAR) Vamos fazer uma query na tabela exemplo 'produtos' abaixo: cod | nome | valor 3 | Iphone | 3000.00 10 | Blue Ray | 1800.00 230| Book | 30.00 Vamos supor que o padrão de código exigido pelo sistema que lê o banco de dados seja de cinco (5) caracteres. Valores menores que este deverão ser preenchidos com zeros a esquerda SELECT LPAD(cod,5,'0') AS cod, nome,valor FROM produtos Teremos como resultado: cod | nome | valor 000003 | Iphone | 3000.00 000010 | Blue Ray | 1800.00 000230 | Book | 30.00 Assi
Leia mais

MySQL - Clonando tabelas na linha de comando

Clonar tabelas é fácil se você tiver a disposição um ' PHP MyAdmin ' ou uma aplicação gráfica instalada em sua máquina. Porém existem casos em que você só possui acesso a um shell (ou terminal) ou mesmo precisa criar uma aplicação que em algum momento seja necessária a clonagem de uma tabela. Os procedimento é muito simples: 1º Criar um clone da estrutura original (LIKE banco_de_dados.tabela) CREATE TABLE recipes_new LIKE production.recipes; 2º Inserir o conteúdo original dentro do clonado (FROM banco_de_dados.tabela) INSERT recipes_new SELECT * FROM production.recipes; É simples assim! Abraços
Leia mais

PHP - Gerando arquivo em UTF-8 com fwrite() e utf8_encode()

Encontrei uma dica muito interessante do "cutmaster at fearlesss dot com" que postou no site php.net. Ele mostrou como gerar um arquivo realmente no formato UTF-8. Segue a tradução de seu post. "Para aqueles que, como eu, gastaram muito tempo para entender porque fwrite() não criava arquivos utf-8 de verdade, aqui vai uma explicação que encontrei: Tentei fazer algo com:" <?php myString = utf8_encode("Test with accents éèàç"); fh=fopen('test.xml',"w"); write($fh,$myString); close($fh); "Por alguma razão misteriosa, o arquivo gerado traz os acentos sem o padrão utf-8. Tentei binário, etc. etc. e finalmente encontrei a solução. Parece que fwrite() PRECISA ter a função utf8_encode() DENTRO de seus parâmetros, como segue abaixo." <?php $myString = "Test with accents éèàç"; $fh=fopen('test.xml',"w"); fwrite($fh,utf8_encode($myString)); fclose($fh);
Leia mais