anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Aprendendo Angular do início passo a passo

Angular Js

 

Olá galera, tudo bem? Espero que sim, no post de hoje iremos aprender um pouco do Angular JS,  que vêm sendo comentado por muitos desenvolvedores web. Aprenderemos os primeiro passos deste poderoso framework.

 

Introdução

O Angular Js foi criado em 2009 por Misko Havery e Adams Abrons, atualmente mantido por uma equipe Google. Ele traz ao mundo do HTML e CSS característica muito poderosa que é o Two-way Data Binding.

 

Two-way Data Binding?

Que isso? :(

Calma! Vou explicar de uma forma para que você entenda facilmente.

Two-way Data Binding é como você se preocupar apenas com  os dados da aplicação e a interface responde de acordo, tudo que você “inputar” em um formulário será refletido em um objeto, ou seja, toda vez que inserido um objeto em nosso array, ele será refletida na mesma hora na página HTML.

 

Padrão Angular

O Angular trabalha com o padrão VC (View Controller), com este padrão conseguimos separar as responsabilidades.

View – Onde o cliente vê o que esta acontecendo.

Controller – Responsável pelo que a view consome.

Scope – Faz a mediação entre a View e o Controller.

OBS: Antes de executarmos nosso exemplo, é importante saber que é necessário que se entenda um pouco de Javascript.

 

Vamos pôr a mão na massa?

Antes de começar o exemplo, é importante que você acesse o site do angular Js.

Clique aqui para acessar o site oficial do Angular.

Bom, primeiramente iremos montar uma estrutura HTML5 .(Conforme imagem abaixo).

 

Estrutura Html5

 

O angular estende o HTML com NG-DIRETIVAS.

Mostrarei algumas delas abaixo para serem aplicadas em nosso exemplo.

ng-app -> Esta é a diretiva que define que o código terá uma aplicação Angular.

ng-model -> Esta diretiva realiza o vinculo HTML(“textarea”, “input”, “select” etc…) para os dados do aplicativo.

ng-bind -> Diretiva que realiza o vínculo dos dados do aplicativo com o HTML.

 

Vejamos o exemplo:

Exemplo 1 - HTML

 

Vamos explicar o código acima:

Logo após o HTML na linha 2, informamos que a página terá uma aplicação Angular, também na mesma linha foi declarado um ng_controller informando que este arquivo tem uma função Javascript, com o nome de “Teste”.

Na linha 5 é onde foi  inserido  o arquivo angular.js.

Na linha 6 é onde colocamos a nossa função em um arquivo separado também, para deixar o código organizado.

Na linha 10 foi inserido uma tag de parágrafo onde dentro dela temos um objeto que foi criado na função js, ou melhor dizendo no Controller, que será mostrado na imagem a seguir.

 

Agora o vejamos o arquivo funcao.js – o mesmo que foi referenciado no arquivo escrito acima:

Exemplo javascript 1

Na linha 1 é declarada a função, que no caso é o nosso Controller chamado de teste que foi referenciado no arquivo HTML.

Note que tem um parâmetro chamado $scope. Ele é do angular sendo obrigatório ser com esse nome, pois a responsabilidade entre a parte da view e do Controller é totalmente dele (temos outros parâmetros mas não vem ao caso falar deles neste tutorial). Então, na linha 2 colocamos o nosso $scope juntamente com o método que queremos passar para a view.

 

Se você fez tudo de acordo com o exemplo o resultado final será.

Resultado final

 

Você que está lendo deve estar pensando “Poxa, só isso?!” :(

Não! Vamos realizar um outro exemplo um pouco mais funcional, onde pelo menos conseguimos ver o que acontece.

 

Angular – exemplo 2

Reaproveitaremos o mesmo código anterior, veja a imagem:

Bind

 

No código mostrado acima, há um campo de texto no qual tudo que é digitado é exibido quase instantâneo em um parágrafo. O que faz isso acontecer é o ng-model declarado no campo <input>, e o ng-bind inserido na tag de parágrafo.

Bom, por hoje é isso! Espero que tenham gostado. Em um próximo momento escreverei sobre Angular com manipulação de dados.

Curtam e compartilhem :)

 

Sobre o autor

Instrutor Ackeley

 

 

 

 

 

 

Opa, sou Ackeley Lennon tenho 26 anos (quase 27, mas vamos deixar isso de lado! 😉 ). Estou concluindo o Curso de Ciência da Computação, sou instrutor em Guarulhos desde 2012. Sempre procuro aperfeiçoar meus conhecimentos na área. Caso tenham dúvidas, utilizem o campo de comentários para perguntar; ficarei feliz em responder.

Próximo

Postado por

Postagem Relacionada

jkit
jQuery jKit: A revolução no Front-End
jQuery jKit Hoje eu venho falar de um plug-in incrível do Jquery: o super útil JKit!!