Baixar para ler offline
Introdução ao AngularJS - Minicurso
- 1.
- 2. Olá! Eu sou MárcioLucas Técnico em Informática e formando em Tecnologia em Sistemas para Internet. Você pode me encontrar nas redes sociais: @marciioluucas 2
- 3.
- 4. 1. Pra que? É decomer? De passar no cabelo?
- 5. 5 AngularJS é umframework SPA (Single Page Applications), isto significa que você pode criar aplicações web (webapps) com ele. Fazer páginas que funcionam sem precisar de reload e que se comporte verdadeiramente como uma aplicação.
- 6. 6 Alguns pequenos motivos para aprender AngularJS Produtividade O AngularJSfoi pensando para que o desenvolvedor possa escrever o mínimo de código possível, assim desenvolver uma aplicação com ele requer bem menos código do que usando jQuery, por exemplo. Facilidade no entendimento O AngularJS é extremamente declarativo, sendo muito fácil entender o funcionamento das aplicações lendo apenas o HTML. Curva de aprendizado Consegue-se capacitar os profissionais em no máximo 3 dias dada a facilidade e intuitividade do desenvolvimento com AngularJS.
- 7. 2. Frameworks Antes de maisnada, o que são?
- 8. “ Um framework emdesenvolvimento de software, é uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. 8
- 9. Algumas frameworks conhecidas ○ Bootstrap ○ Laravel ○Materialize Citei essas, mas existem “muuuuitas” outras. 9
- 10. 10 URL APRESENTAÇÃO BOOTSTRAP& MATERIALIZE https://goo.gl/qWTF8k
- 11. 3. História A humanidade éfeita dela, porque não contar a do AngularJS?
- 12. 12 AngularJS foi originalmentedesenvolvido em 2009 por Miško Hevery e Adam Abrons como um software por trás de um serviço de armazenamento JSON online.
- 13. 13 Mas eles viramque não iam lucrar muito com isso, aí decidiram fazer uma coisa meio arriscada.
- 14.
- 15. 15 Disponibilizar o Angulargratuitamente (open- source) como uma framework.
- 16. 3. Sintaxe Como eu escrevoum código para o AngularJS?
- 17. Três passos para criara aplicação. ○ Importar os arquivos necessários na sua index.html ○ Abrir uma tag Script no final da página, mas antes de terminar a tag <body> ○ CODIFICAR! 17
- 18.
- 19.
- 20. “ 20 A propriedadeng-app
- 21. “ Ela serve paraapontar ao Angular onde vai ser nosso escopo, ou seja. Onde ele vai ter que processar os códigos e renderizar o que for preciso no template. 21
- 22. “ Dentro do Escopo(ng-app) 22 Resultado: 1 + 2 = 3
- 23. “ Fora do Escopo(ng-app) 23 Resultado: 1 + 2 = {{1+2}}
- 24. “ Tudo que édeclarado fora do escopo, não é processado pelo AngularJS 24
- 25.
- 26. “ Quando querer renderizaralgo dinâmico no template (dentro do html) utilizamos duas chaves {{aqui é dinâmico}} 26
- 27. Mãos a obra! 27 Proposta: ○Criar um app de lista telefônica. ◦ Adicione um contato ◦ Apague contatos
- 28. 28 O que énecessário saber...
- 29.
- 30. 30 Ele é basicamenteum foreach que passa por todos as posições de um array retornando seus respectivos valores.
- 31.
- 32. 32 Serve para “linkar”o template ao controller, ou seja. O valor que está no controller vai estar também no template.
- 33. 33 Chamamos isso dedata-binding
- 34. Obrigado! Dúvidas? Você pode meencontrar no Github e no Facebook: /marciioluucas. 34