O documento introduz o framework JavaScript AngularJS, mantido pelo Google, que auxilia no desenvolvimento de single-page applications. O documento descreve o que é AngularJS, seu histórico, projetos do Google que usam AngularJS, pontos positivos e negativos, demonstrações de diretivas como ng-app, ng-controller, ng-bind e ng-model e encerra convidando para perguntas.

1. Superheroic JavaScript MVW Framework
Introdução ao
Desenvolvimento Web
com AngularJS
Marcus Paulo

2. Sobre
https://github.com/marcuspaulo
@_marcuspaulo
mpaulobr@gmail.com

3. Fixo
Fixo Atualização das páginas
AngularJS é um framework JavaScript open-source, mantido pelo Google, que
auxilia na execução de single-page applications.
O que é o AngularJS

4. Cronologia
Armazenamento JSON
GetAngular.com
Adam Abrons
0
25
50
75
100
Inscritos
Miško Hevesy
2009

5. Projeto em Angular no Google
❖ Android Which Phone
❖ Google Education On Air
❖ Google Partners
❖ Google AdMob
❖ Google Apps for Work (site)
❖ Google Fiber
❖ Google One
❖ Google Insights
❖ Google Retail
❖ Google Trends

6. Google Fiber

7. Código-Fonte - Google Fiber

8. Pontos Positivos
❖ Criação e reutilização de componentes (Diretivas)
❖ Integração através de JSON com o servidor
❖ Aprimorar o html
❖ Testes end-to-end (Protractor)
❖ Arquitetura modular

9. Pontos negativos
❖ Curva de aprendizado.
❖ Retrocompatibilidade (Angular 2.0)
❖ Possível incompatibilidade com libs de terceiros
❖ Pesquisa no Google (SEO)

10. Adoção do AngularJS
Fonte: Google Trends

11. Arquitetura - MVVM - MVC
Eventos
View
Modelo
Controlador

12. Demo
❖ Primeiro exemplo em Angular
❖ Conhecendo o Two-way Data binding
{{Demo}}

13. ng-app
❖ Declara um elemento como o elemento raiz da
aplicação, ocasionando a mudança do comportamento
padrão da tag.

14. ng-controller
❖ Controlador (Ações)

15. ng-bind
❖ Muda o texto de um elemento HTML automaticamente, de
acordo com o seu resultado, vindo das regras de negócio.
❖ One-way Data-Binding

16. ng-model
❖ É similar ao ng-bind, mas permite ligação direta
bidirecional (two-way data binding ) entre a view e o
escopo do aplicativo.
❖ Modelo que representa um objeto (exemplo)

17. ng-class
❖ Definir atributos de class(estilo) dinamicamente
{{Demo}}

18. ng-click
❖ Permite instanciar o evento de click, semelhante ao
onclick.

19. ng-show & ng-hide & ng-if
❖ Mostra ou esconde um elemento HTML de acordo com
o resultado de uma expressão boleada
❖ Declaração básica de um 'if' que permite mostrar um
elemento se a condição for verdadeira.
{{Demo}}

20. ng-switch
❖ Instancia um template, em uma lista de escolhas,
dependendo do valor obtido pela expressão.
{{Demo}}

21. ng-repeat
❖ Iterar sobre uma lista de objetos

22. ng-view
❖ A diretiva base para manipulação de rotas, resolvendo
um JSON antes de renderizar os modelos acionados por
controladores especificados.

23. Cadastro de Produtos
❖ {{DEMO}}

24. Dicas
❖ Recomendo sempre acompanhar os posts do
❖ Bruno Scopelliti —> REST
❖ John Papa —> Boas práticas e convenções
❖ James Gosling do Angular
❖ Igor Minar, o principal commiter do projeto.

25. Perguntas?
❖ {{Dúvidas}}

26. Muito Obrigado
https://github.com/marcuspaulo
@_marcuspaulo
mpaulobr@gmail.com