Tutorial Angular JS

ngularJS é o mais novo lançamento do time de desenvolvedores do Google. Diferentemente de outros frameworks JavaScript, ele adota uma abordagem mais ligada à sintaxe HTML, funcionando como uma espécie de extensão da linguagem.

Neste artigo, vamos criar uma aplicação simples de lista de compras e aprender os conceitos básicos do framework no que diz respeito à associação, manipulação e exibição de dados.
Estrutura inicial

Assim como qualquer aplicação web, nosso ponta-pé inicial acontece com a criação de um página básica. A diferença aqui é que vamos informar um nova propriedade na tag do nosso arquivo: ng-app.

Lista de compras

Essa é a grande sacada do AngularJS. Ao declarar a propriedade ng-app, estamos inicializando a nossa aplicação. É a primeira de algumas novas propriedades que iremos utilizar. Todo o funcionamento do framework gira em torno dessas novas declarações.

O atributo ng-app na tag informa que o nosso DOM, além de HTML, é também um documento AngularJS. Esta propriedade pode ser utilizada em qualquer elemento do DOM — em alguns casos, apenas uma parte do seu HTML será uma aplicação Angular. Por baixo dos panos, o framework define o elemento com o atributo ng-app como a raiz da aplicação.
Olá, Tableless!

Para provar que o foco do Angular está no HTML e não no JavaScript, vamos implementar um exemplo simples em nossa estrutura:

AngularJS - Tableless

Olá, Tableless! Meu nome é: {{ nome }}

Ao carregarmos esse HTML no navegador e digitarmos qualquer coisa no input, o parágrafo é atualizado automagicamente. Perceberam que até agora não escrevemos nenhum código JavaScript?

A propriedade ng-model funciona como um canal entre a nossa view e o form. Ela pode ser utilizada em inputs do tipo texto, selects, textareas, checkboxes e radio buttons.

O model, seus dados e suas validações ficam automaticamente disponíveis no escopo da