AngularJS

Cada dia o Javascript vem ganhando força no desenvolvimento web e de aplicativos com a nova HTML5. Com este crescimento surgirão várias frameworks entre elas o AngularJS. Este framework javascript é um projeto open-source mantido pelo Google. O AngularJS auxilia na criação de páginas-aplicativos, pois com ele podemos construir uma página web no padrão MVC. O framework se adapta e estende o HTML para melhor experiência com conteúdo dinâmica, com a ligação bidirecional dos dados que permite a sincronização automática entre Model e View.


  • Hello World

Como é padrão, vamos fazer o Hello World. Com este exemplo podemos verificar como o AngularJS é simples de programar e como a sincronização automática funciona na prática. As alterações que são feitas no Model são exibidas na View sem renderizar a página.

Primeiramente vamos criar nosso arquivo HTML.


Após criar o HTML, vamos adaptá-lo para começar a utilizar o Angular. Na seção HEAD coloque a referência do AngularJS.



Incluido a referência do javascript do AngularJS o próximo passo é inicializar a aplicação, para isso basta incluir o parâmetro ng-app dentro da tag HTML.

Neste exemplo vamos pegar o que o usuário informar no input text e exibir na mensagem para ele. Para isso vamos definir o modelo, que neste caso será o nosso input text; para isso vamos até a tag input e definir a propriedade do AngularJS ng-model, esta propriedade vai fazer com que o input text do HTML se torne um modelo, com isso poderemos manipulá-lo tem tempo real, sem realizar nenhum tipo de refresh na tela.

Para podermos pegar o valor que o usuário digitar no input basta colocar o nome do modelo entre duas chaves.



Se você seguiu o exemplo e executou até aqui pode perceber que o AngularJS é muito simples e rápido. Com ele podemos dar mais dinamismo as páginas e melhorar a experiência do usuário, pois toda a alteração é automaticamente atualizada na View. Para maior conhecimento veja o exemplo abaixo, um Quiz feito totalmente com AngularJS.