AngularJS é um framework para o desenvolvimento de aplicações web, utilizando a o JavaScript. Seu objetivo é aumentar aplicativos que podem ser acessados por um navegador web, sob o padrão model–view–controller (MVC), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativos.

• O que é AngularJS?
• História do AngularJS
• Vantagens
• Hello World – Aplicação Prática

História do AngularJS

Foi criado por Misko Hevery e Adams Abrons em 2009. Inicialmente, o projeto tinha como objetivo facilitar a criação de aplicações web. Alguns anos depois Misko foi trabalhar no Google, no projeto do Google Feedback, e ele encontrou um cenário um pouco complicado: o projeto já contava com 17.000 linhas de código.

Depois de alguns meses de trabalho ele decidiu fazer uma aposta com seu gerente.

Ele apostou que reescreveria o código do projeto em 2 semanas, contanto que pudesse utilizar o framework que tinha desenvolvido. Eles terminaram de reescrever o código em 3 semanas, mas reduziu o projeto para 1.500 linhas!

Com isso, aos poucos o Google foi adotando o framework para outro projetos internos. No ano passado (2014), foi divulgado que mais de 110 projetos do Google utilizam o AngularJS.

Vantagens

• É Open Source;
• Mantido pelo Google;
• Arquitetura da aplicação em camadas bem definidas;
• Permite a criação modular e de componentes reutilizáveis;
• Já possui a infraestrutura para integração com back-end;
• Facilita a etapa de testes de forma automatizada;

Como começar a aplicar? – Hello World

Passo 1

https://angularjs.org/

Entre no site oficial do framework e, eu aconselho, a baixar a versão em zip que tem várias opções para desenvolvimento e testes.

Passo 2

• Crie uma pasta com o nome de HelloWorld.
• Extraia o arquivo angular.js para dentro desta pasta.
• Crie uma estrutura HTML básica, como segue na imagem abaixo.

Passo 3

Vamos agora definir a aplicação com a diretiva ng-app. Esta declaração, é interessante que fique na tag mais externa do nosso código. Costumamos declarar na tag HTML, mas não é obrigatório. Nela vamos definir o nome da seguinte forma: ng-app=”helloWorld”.

Em seguida vamos começar a criar o script da aplicação. Declare um script e dentro dele digite o código como na imagem. Esse nosso primeiro app é um módulo, e portanto, utilizamos o comando angular.mode.

Depois colocamos entre “” o nome de nossa aplicação (o mesmo que colocamos em ng-app. Os colchetes, que nesse exercício vamos deixar vazio, serve para importação de outros módulos, serviços, entre outros.

Passo 4

Em seguida criaremos o nosso controler e a nossa view, com o scope conectando os dois.

Primeiro recuperamos o nosso módulo, e adicionamos o nosso controller, neste caso coloquei o nome de helloWorldController. Dentro dele chamamos uma função passando o $scope.

É dentro dessa função que grande parte do nosso código ficará, em aplicações mais complexas.

A tag ng-controller poderia estar no body, em uma div, em qualquer tag HTML. Importante frisar que a view não é o arquivo, a view é um conjunto de tags.

Pronto! Agora o título da nossa aplicação está sendo inserido no HTML de forma dinâmica!

Claro, essa aplicação é o código mais básico possível de criar com Angular. Mas, é um ótimo começo.

Se quiser, olhe esse código e vários outros no meu repositório do Github.

Quer entender melhor? Assista a esse vídeo!

Ficou com dúvidas? Deixa nos comentários!