Baixar para ler offline
Carregado porMarcus Paulo
Introdução ao Desenvolvimento Web com AngularJS - Google I/O Extended Brasília
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.
Introdução ao Desenvolvimento Web com AngularJS - Google I/O Extended Brasília
- 1. Superheroic JavaScript MVWFramework Introdução ao Desenvolvimento Web com AngularJS Marcus Paulo
- 2.
- 3. Fixo Fixo Atualização daspáginas AngularJS é um framework JavaScript open-source, mantido pelo Google, que auxilia na execução de single-page applications. O que é o AngularJS
- 4.
- 5. Projeto em Angularno 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.
- 7.
- 8. Pontos Positivos ❖ Criaçãoe 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 ❖ Curvade 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 exemploem Angular ❖ Conhecendo o Two-way Data binding {{Demo}}
- 13. ng-app ❖ Declara umelemento como o elemento raiz da aplicação, ocasionando a mudança do comportamento padrão da tag.
- 14.
- 15. ng-bind ❖ Muda otexto de um elemento HTML automaticamente, de acordo com o seu resultado, vindo das regras de negócio. ❖ One-way Data-Binding
- 16. ng-model ❖ É similarao 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 atributosde class(estilo) dinamicamente {{Demo}}
- 18. ng-click ❖ Permite instanciaro 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 umtemplate, em uma lista de escolhas, dependendo do valor obtido pela expressão. {{Demo}}
- 21. ng-repeat ❖ Iterar sobreuma lista de objetos
- 22. ng-view ❖ A diretivabase 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 sempreacompanhar 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.
- 26.