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.
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
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!