Apresentação sobre Angular.js 1.X realizada no Instituto Federal Tecnológico de Rio Verde - GO no dia 21 de Outubro de 2015

1. ANGULAR.JS
Por: Leonardo Moreira

2. 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…

3. 21 de Outubro de 2015

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

5. Mas temos….

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

7. “Angular.js é uma coisa
linda de Deus”
Leandro Guimarães
Developer Front-end – GDG Rio Verde Member

8. Conceituando…
MVC
SPA

9. MVC – Model, View and Controller

10. SPA – Single Page Application

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

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

13. 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;

14. … 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;

15. Quem usa Angular.js?

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

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

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

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

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

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

22. Diretivas
• Diretivas permitem que aplicações angular sejam feitas sem a
necessidade de se preocupar com elementos do DOM.

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

24. Por onde começar?

25. Importando a biblioteca

26. Angular ng-app / angular.module

27. Controllers

28. ng-repeat

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

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