Programação Wendell Adriel Luiz Silva

AngularJS: Aprendendo sobre as Diretivas ng-bind e ng-init

AngularJS: Aprendendo sobre as Diretivas ng-bind e ng-init

Olá, hoje iremos continuar a aprender sobre o Framework AngularJS. Na última aula vimos como fazer um simples exemplo da aplicação Hello World utilizando o AngularJS e hoje iremos aprender novos conceitos e criar novos exemplos para aumentarmos nossos conhecimentos sobre o Framework.

Esse artigo faz parte de uma série de aulas sobre AngularJS:
Aula 1: AngularJS – Você deveria estar usando este Framework

A diretiva ng-bind

Na última aula quando queríamos imprimir o valor de alguma variável na tela, utilizamos o nome da variável entre dois pares de chaves, mas temos uma outra maneira de fazer isso. Podemos utilizar a diretiva “ng-bind” para imprimir o valor de variáveis na nossa tela, mas  temos que aprender qual a diferença entre usar as duas formas.

Como nosso Framework é carregado de um arquivo externo, seja ele baixado e importado para nossa página ou utilizado diretamente da CDN, ele pode demorar alguns instantes para ser carregado em nossa página. Localmente esse tempo é quase imperceptível, mas quando subimos nossa aplicação para um servidor, esse tempo pode ser um pouco maior e quando imprimimos nossas variáveis utilizando:

Olá {{ nome }}

O usuário irá ver o código do jeito que está escrito acima até que o arquivo do nosso Framework seja carregado totalmente, ou seja, quando o usuário acessar nossa página, ele irá ver o texto “Olá {{ nome }}” até que o AngularJS seja carregado e só após esse carregamento que o “{{ nome }}” seria alterado para o valor da variável e isso não é interessante para nós desenvolvedores, deixar que os usuários vejam o nome de nossas variáveis e também não é interessante para o usuário, pois caso o arquivo do AngularJS demore a carregar o usuário poderá pensar que nossa página está com problemas.

Para resolver esse problema podemos utilizar a diretiva “ng-bind”, que também é utilizada para imprimir o valor de variáveis, mas que não mostra nada até que o AngularJS carregue totalmente. Mudando nosso exemplo acima poderíamos utilizar:

Olá <span ng-bind="nome"></span>

Dessa forma até o AngularJS carregar totalmente, o usuário iria ver apenas o texto “Olá” e somente após o carregamento total do Framework que o usuário iria ver o valor da variável “nome” impresso na tela, dessa forma nosso usuário não iria ver o nome de nossas variáveis.

Essa diretiva é muito utilizada, mas em alguns casos também podemos utilizar da outra forma que aprendemos.

A diretiva ng-init

No último post nós vimos como trabalhar com variáveis criando elas na hora que definimos nossas diretivas “ng-model”, mas hoje veremos uma outra forma de trabalhar com variáveis. Imagine que você tenha uma aplicação que necessite que uma certa variável já tenha de ser iniciada com um valor padrão. Nesse caso você poderá utilizar a diretiva “ng-init”, ela faz com que criemos e inicializemos variáveis.

Veremos como trabalhar com as duas diretivas demonstradas no exemplo abaixo.

Trabalhando com as diretivas ng-bind e ng-init

Hoje aprendemos sobre duas novas diretivas do AngularJS e agora iremos aprender como utilizar na prática essas duas diretivas, para isso vamos começar criando a estrutura de nossa aplicação.

Arquivo Exemplo1.html

<!doctype html>
<html>
<head>
<title>Exemplo 1 - AngularJS</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body>
<div ng-app>
</div>
</body>
</html>

No exemplo acima definimos a estrutura de nosso arquivo e criamos uma aplicação AngularJS dentro de uma “div”. Agora iremos começar a definir nossa aplicação. Vamos imaginar que nossa aplicação precise de duas variáveis inicializadas, então usaremos a diretiva “ng-init” que aprendemos mais cedo. A diretiva “ng-init” é usada junto da inicialização de nossa aplicação, portanto já que definimos a nossa aplicação na “div”, também devemos utilizar a diretiva “ng-init” nela:

<div ng-app ng-init="numero1 = 10; numero2 = 15">

Na alteração acima definimos duas variáveis: “numero1” e “numero2”, para tanto utilizamos o nome da variável seguido do sinal de igual e em seguida o valor que queremos armazenar na variável. Quando queremos definir mais de uma variável devemos separar as mesmas por um “;”. Além de definir variáveis comuns, podemos inicializar objetos. Vamos imaginar que além das duas variáveis, temos que definir um objeto com nosso nome e nossa idade:

<div ng-app ng-init="numero1 = 10; numero2 = 15; eu = { nome : 'Wendell Adriel', idade : 23 }">

Como podemos ver acima, para definir um objeto devemos utilizar um nome para a variável, em seguida devemos utilizar um par de chaves. Dentro das chaves definimos duas propriedades: “nome” e “idade”, para tanto colocamos o nome da propriedade seguido de “:” e em seguida o valor da propriedade.

Dessa maneira temos duas variáveis e um objeto inicializado e prontos para serem utilizados em nossa aplicação. Agora iremos completar nossa aplicação utilizando a diretiva “ng-bind” para imprimir os valores na tela para nosso usuário.

Arquivo Exemplo1.html

<!doctype html>
<html>
<head>
<title>Exemplo 1 - AngularJS</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body>
<div ng-app ng-init="numero1 = 10; numero2 = 15; eu = { nome : 'Wendell Adriel', idade : 23 }">
Soma dos números: <span ng-bind="numero1 + numero2"></span>
<h1>Minhas informações</h1>
Nome: <p ng-bind="eu.nome"></p>
Idade: <p ng-bind="eu.idade"></p>
</div>
</body>
</html>

Podemos ver acima que com a diretiva “ng-bind” podemos fazer operações com nossas variáveis diretamente, também poderíamos utilizar “{{ numero1 + numero2 }}”, pois as duas formas suportam operações. Também podemos ver que para acessar propriedades de um objeto utilizamos o nome da variável que guarda o objeto seguido de um ponto e seguido do nome da propriedade.

Conclusão

Nesse artigo pudemos aprender sobre duas novas diretivas e outras ferramentas que o AngularJS nos proporciona.

O próximo artigo já está sendo escrito e em breve estará disponível aqui no Estudar TI, nele iremos falar sobre como criar e trabalhar com módulos e controllers no AngularJS.

Continue ligado aqui no Estudar TI, pois em breve teremos mais artigos com dicas e tutorias de como resolver problemas com AngularJS e também sobre vários outros assuntos relacionados à desenvolvimento de softwares e sobre tecnologia em geral.

Espero que tenha gostado e qualquer dúvida estou à disposição, basta comentar este artigo!

Um grande abraço a todos e até o próximo artigo!!! 😀

Avatar

| Website

Tenho 23 anos, sou formado em Análise e Desenvolvimento de Sistemas, atuo como Analista Desenvolvedor Web e também como Criador e Tutor da CodeShare. Trabalho com desenvolvimento de sites e softwares há 7 anos e sempre procuro me manter atualizado nas melhores tecnologias e metodologias no desenvolvimento de softwares. Há alguns anos estou focado no desenvolvimento para Web. Já fiz (e continuo fazendo) diversos cursos na área de desenvolvimento e conheço diversas linguagens e tecnologias. Gosto muito do desenvolvimento Front-End, porém prefiro o desenvolvimento Back-End e minhas linguagens preferidas são PHP, Ruby e Java. Recentemente também um grande fã de desenvolvimento utilizando a MEAN Stack. Você pode conhecer mais sobre mim e meu trabalho acessando: http://wendelladriel.github.io.

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

Seja o primeiro a comentar!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.