introdução ao angularjs!
TRANSCRIPT
Diego Vinicius Costa SiqueiraDiullian Cassiano da Silva Casagrande
Roteiro
1. O que é?
2. O que eu preciso saber?
3. Histórico
4. AngularJS (SPA, Diretivas, Controllers, etc.)
5. Comparação
6. Referências
O que é?
AngularJS é um framework para o desenvolvimento de aplicações web utilizando a linguagem
javascript.
Tem o objetivo de facilitar e simplificar o desenvolvimento web através de um modelo MVW,
rodando no browser do cliente.
O que eu preciso saber?
Javascript• Linguagem de programação que nasceu em 1995.• É a principal linguagem client-side em navegadores web.• Utilizada para controlar HTML a manipular o comportamentos nas páginas
web.
HTML• Linguagem de marcação criada na década de 1990• HyperText Markup Language, que significa linguagem de marcação de
hipertexto.• Utilizada para produzir páginas web.
CSS• Cascading Style Sheets é uma "folha de estilo“• Realiza a separação entre o formato e o conteúdo do documento.
O que eu preciso saber?
Back-End?
Histórico
CRIADO POR MISKO HEVERY E ADAM ABRONS EM 2009.
Histórico
O nome AngularJs• angle brackets
Google• como o Google adotou o AngularJs
Histórico
Crescimento comunidade• O fator comunidade é importante para qualquer
framework, pois é ela quem move o projeto, tira dúvidas e instiga outros desenvolvedores a usar.
Histórico
Crescimento comunidade
Histórico
Quem esta usando AngularJs?
AngularJS
Suas principais características são:
• SPA (Single-Page Application)• Injeção de Dependências• Two-way Data binding• Criação de diretivas (Extensão do HTML)• Controllers• Filters• Versão• Suporte
SPA(Single-Page Application)
Gmail
SPA(Single Page Application)
• Menos código no servidor
• Carregar recursos conforme necessário
• Melhor experiência ao usuário
AngularJS
Suas principais características são:
• Facilita o trabalho com a SPA• Injeção de Dependências• Two-way Data binding• Criação de diretivas (Extensão do HTML)• Controllers• Filters• Versão• Suporte
Injeção de Dependências
• Padrão de projeto que determina como um objeto obtém suas dependências.
• Desacoplar o código
• Tornar mais flexível, organizado e fácil de testar.
AngularJS
Suas principais características são:
• Facilita o trabalho com a SPA• Injeção de Dependências• Two-way Data binding• Criação de diretivas (Extensão do HTML)• Controllers• Filters• Versão• Suporte
Two-Way Data Binding
• A View (html) é atualizada automaticamente quando o Model é alterado.
• Modelo é atualizado automaticamente quando um valor na View é alterado.
AngularJS
Suas principais características são:
• Facilita o trabalho com a SPA• Two-way Data binding• Injeção de Dependências• Criação de diretivas (Extensão do HTML)• Controllers• Filters• Versão• Suporte
Diretivas
Diretivas são extensões da linguagem HTML que permitem a implementação de novos comportamentos, de forma declarativa.
“Rodrigo Branas”
Diretivas
Diretivas
Diretivas
<gangnam-style>
</gangnam-style>
Diretivas
DiretivasElemento
<gangnam-style></gangnam-style>
DiretivasAtributo
<div gangnam-style></div>
DiretivasComentário
<!–- directive: gangnam-style -->
AngularJS
Suas principais características são:
• Facilita o trabalho com a SPA• Two-way Data binding• Injeção de Dependências• Criação de diretivas (Extensão do HTML)• Controllers• Filters• Versão• Suporte
Controllers
• Ligação entre a View e a Controller
AngularJS
Suas principais características são:
• Facilita o trabalho com a SPA• Two-way Data binding• Injeção de Dependências• Criação de diretivas (Extensão do HTML)• Controllers• Filters• Versão• Suporte
Filters
São funções utilizadas para o pós processamento.
• Date:
• Currency:
• Filter:
AngularJS
Suas principais características são:
• Facilita o trabalho com a SPA• Two-way Data binding• Injeção de Dependências• Criação de diretivas (Extensão do HTML)• Controllers• Filters• Versão• Suporte
Versão
• A versão atual 1.3.15 foi lançada em 20/01/2015 e esta disponível em https://angularjs.org/
• A versão 2.0 esta sendo desenvolvida e já passa por testes.
AngularJS
Suas principais características são:
• Facilita o trabalho com a SPA• Two-way Data binding• Injeção de Dependências• Criação de diretivas (Extensão do HTML)• Controllers• Filters• Versão• Suporte
Vai rodar em todos os browsers?
Suporte
Safari
Chrome
Firefox
Opera
E o Internet Explorer?
v. 1.2 suporta IE8.
v. 1.3 suporta apenas (IE >= 9).
SIM! Mas com exceção.
Comparação
AngularJS x jQuery
Referências• SCHMITZ, Daniel; LIRA, Douglas. AngularJS na Prática. Disponível em:
<https://leanpub.com/livro-angularJS>. Acesso em: 20/05/2015
• SILVA, Diego Farias da; VICENTE, Guilherme de Oliveira. Apresentando o Angular.js. Disponível em: <http://www.dextra.com.br/apresentando-o-angular-js-4/>. Acesso em: 18/05/2015
• BALTIERI, André. Desenvolvendo single-page application (SPA) com AngularJS, Bootstrap e REST. Disponível em: <http://www.infoq.com/br/presentations/desenvolvendo-single-page-application>. Acesso em: 25/05/2015
• ANGULARJS - #1 - Introdução e Hello World - Rodrigo Branas. Direção de Rodrigo Branas, 2015. Disponível em: <https://www.youtube.com/watch?v=_y7rKxqPoyg>. Acesso em: 26 maio 2015.