ANGULAR.JSPor: Leonardo Moreira

Leonardo Moreira• Consultor em tecnologia da informação

e comunicação, palestrante, professor, MCP - Microsoft Certified Professional, MS - Microsoft Specialist, membro do GDG Rio Verde (Google Developer Group), enxadrista e comedor de lasanha profissional…

21 de Outubro de 2015

Nós não temos…• Carros voadores• Skates voadores• Hologramas publicitários• Máquinas do tempo• Indutores de sono portáteis

Mas temos….

Angular quem?• Angular.js é uma maneira rápida, fácil, dinâmica e

extremamente eficiente de fazer com que o HTML tenha o poder de não apenas exibir conteúdo estático, mas consiga lidar com o consumo de dados dinâmicos com eficácia.

“Angular.js é uma coisa linda de Deus”

Leandro GuimarãesDeveloper Front-end – GDG Rio Verde Member

Conceituando…

MVCSPA

MVC – Model, View and Controller

SPA – Single Page Application

Angular.js• Framework JavaScript• MVP – MVVM – MVC => MVW (Model View Whatever)• SPA – Single Page Application

Humm.. Me conte mais • Criado em 2009 por Misko Hevery e Adam Abrons• Mantido atualmente pela Google (Hevery, Igor Minar e Vojta

Jina)• Hevery afirmou que refaria o Google Feedbacks em duas

semanas

Mas por que usar o Angular.js?• Robusto – Faz todo o trabalho pesado deixando o foco do

desenvolviemnto apenas nas regras de negócio;• Reutilizável – Evita códigos redundantes, podendo ser

totalmente modularizável e reutilizável;• Menos códigos – Aplicações angular normalmente exigem

pouca codificação;

… uau... Tem mais?• Camada de View Abstraida – Aplicações Angular.js são

totalmente abstraidas da camada de visualização;• Integração – Não é necessário abandonar o uso de Jquery ou

Bootstrap, pois o Angular.js integra-se perfeitamente com componentes e bibliotecas de terceiros;

Quem usa Angular.js?

Os cinco princípios do Angular.js1. Orientação a dados;2. Declarativo;3. Separação de Responsabilidade;4. Injeção de Dependência;5. Extensível;

Orientação a Dados• Em uma aplicação tradicional do lado do servidor criamos a

interface do usuário (UI – User Interface) mesclando o HTML aos dados locais. Isso significa que sempre que for necessário atualizar algum dado da interface tudo deverá ser carregado novamente, mesmo que o usuário já tenha a maior parte do HTML carregado. Com Single Page Application temos a vantagem de poder enviar do servidor para o cliente apenas os dados.

Declarativo• No desenvolvimento tradicional sempre que o necessitamos

criar um elemento como “abas de navegação” ou “datapickers” utilizando as tags da versão do HTML em questão e através de jQuery (por exemplo) codificamos o comportamento daquele elemento. Já com o Angular você simplesmente pode declarar seu próprimos elementos <tabs></tabs> ou <input type=“data” datapicker/>, o Angular se encarregará de fazer toda a regra de negócio.

Separação de Responsabilidade• O Angular trabalha com uma estrutura muito próxima ao MVC

(Model View and Controller), ou seja, sua aplicação fica dividida em 3 partes:• Model => Responsável pelo consumo e fornecidamento de dados de

dados. É a ponte entre sua aplicação e seu banco de dados.• View => O HTML/CSS em si, onde aplica-se o visual de sua aplicação.• Controller => A força motriz de sua aplicação, onde é feita toda a regra de

negócio.

Injeção de Dependência• O Angular é um dos poucos frameworks javaScript a trabalhar

com competência com Dependency Injection (DI). • A maneira como o Angular trabalha com DI desobriga o

desenvolvedor de declarar novos objetos ou mesmo instancia-los manualmente, basta realizar a declaração de DI que o próprio angular se encarregará de encontrar essas dependências e disponibiliza-las sempre que necessário.

Extensível• O Angular possuí um bom leque de diretivas (veremos logo a

seguir o que são) a serem aplicadas para resolver as mais diversas situações, mas também permite que essas diretivas sejam extendidas e personalizadas o que nos possibilita ingerar com mastria componentes e bibliotecas de terceiros como jQueryUI e BootStrap.

Diretivas• Diretivas permitem que aplicações angular sejam feitas sem a

necessidade de se preocupar com elementos do DOM.

Principais diretivas• NG-APP• NG-BIND• NG-MODEL• NG-CLASS• NG-CONTROLLER• NG-REPEAT• NG-SHOW / NG-HIDE• NG-SWITCH• NG-VIEW• NG-IF

Por onde começar?

Importando a biblioteca

Angular ng-app / angular.module

Controllers

ng-repeat

O que vem por ai?• TypeScript• Angular.js 2.0

Muito obrigado pela paciência…• Leonardo Moreira• @leomoreirarv• www.fb.com/leonardomelomoreira• www.leonardommoreira.com.br• leonardomm@gmail.com

• https://github.com/leomoreirarv/palestra-ifgoiano