introdução ao angularjs!

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.