Desenvolva aplicações modernas com
“A Superheroic JavaScript MVW Framework”
Jullierme Barros
Tecnólogo em informática - CEFET - 2005
Java - 2005
Sistemas de informação - UEG - 2007
Prodata Informática - 2008 - atual...
Angularjs
Framework JavaScript
Client-side
Feito para construir aplicações modernas
MVC - Model View Controller
Angularjs - Single Page Application
★ Aplicação no navegador
★ Não faz requisições de novas páginas no servidor
★ Gmail, a...
open-source
Breve história
Originalmente desenvolvido em 2009 por Miško
Hevery e Adam Abrons
Google Feedback, 18 mil linhas e 6 meses ...
Primeiro produto
Plataforma Marketing Digital
Por que?
HTML é muito bom para descrever documentos estáticos,
mas não foi projetado para comportamento dinâmico.
HTML
HTML 5
HTML 5 + Angularjs
Directives
Angularjs - filosofia
Programação declarativa (HTML, CSS) é melhor que imperativa
(JavaScript) para construir interfaces.
Componentes customizados
Internacionalização
100% testável
Fácil integração com bibliotecas esternas
google design
http://www.google.com/design/
google material design
google material design
google material design
google material design
google material design
google material design
http://www.google.com/inbox/
google material design
Angular Material
https://material.angularjs.org/
Estrutura - Two-way data binding
Dinâmica
Vamos programar?
Programação orientada a slide o/
Criar um arquivo chamado index.html
Estrutura do arquivo index.html
Importar a biblioteca do Angularjs
Criar um arquivo chamado index-controller.js
Programação orientada a slide o/
Estrutura do arquivo index-controller.js
Criar uma variável no scope
Importar o arquivo index-controller.js no index.html
Declarar a app gdgSenadorApp
Demarcar o espaço de atuação do nosso controlador
Criar uma caixa de texto
Exibir o resultado digitado na caixa de texto
Saída no navegador
Boas práticas by John Papa
https://github.com/johnpapa/angular-styleguide/
Github
Uma rede social para programadores :)
Bower
Gerenciamento de dependências Client-side
Grunt
Automatizador de tarefas
Por que você deve aprender o Grunt?
JSHint
Ferramenta de análise de código javascript
Less
Um pré-processador css
Yeoman
Ferramenta SCAFFOLDING para desenvolvimento web
Sublime Text
Editor de Texto
Leve
Teclas de atalho intuitivas
Multiplataforma
Um dos mais utilizados por programadores AngularJs
$70
Su...
Webstorm
Webstorm
Uma IDE pra chamar de sua :)
Considerada a melhor IDE para desenv. Javascript e AngularJS
Refactory de código int...
Github - Atom
Editor de texto, leve, moderno e free
Desenvolvido pelo Github e open-source o/
https://atom.io/
http://tabl...
Curso de Angularjs
Curso de AngularJs in Company - 24h
Próximo curso - Senai Fatest - 03/11 à 20/11
Nova turma em dezembro...
julliermebarros@gmail.com
julliermebarros.com
plus.google.com/+JulliermeBarros
PERGUNTAS?
Desenvolva aplicações modernas com AngularJS - Breve introdução
Próximos SlideShares
Carregando em…5
×

Desenvolva aplicações modernas com AngularJS - Breve introdução

309 visualizações

Publicada em

Palestra sobre AngularJS no Gdg Senador Canedo - 24/10/2015

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
309
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Desenvolva aplicações modernas com AngularJS - Breve introdução

  1. 1. Desenvolva aplicações modernas com “A Superheroic JavaScript MVW Framework” Jullierme Barros
  2. 2. Tecnólogo em informática - CEFET - 2005 Java - 2005 Sistemas de informação - UEG - 2007 Prodata Informática - 2008 - atual Angularjs - 01/2014
  3. 3. Angularjs Framework JavaScript Client-side Feito para construir aplicações modernas MVC - Model View Controller
  4. 4. Angularjs - Single Page Application ★ Aplicação no navegador ★ Não faz requisições de novas páginas no servidor ★ Gmail, a busca do Google, o Google Drive, Facebook, o Twitter, o FourSquare, o Instagram, blogs, sites corporativos, dentre outros
  5. 5. open-source
  6. 6. Breve história Originalmente desenvolvido em 2009 por Miško Hevery e Adam Abrons Google Feedback, 18 mil linhas e 6 meses desnv. 1 semana, 1500 linhas
  7. 7. Primeiro produto Plataforma Marketing Digital
  8. 8. Por que? HTML é muito bom para descrever documentos estáticos, mas não foi projetado para comportamento dinâmico.
  9. 9. HTML
  10. 10. HTML 5
  11. 11. HTML 5 + Angularjs
  12. 12. Directives
  13. 13. Angularjs - filosofia Programação declarativa (HTML, CSS) é melhor que imperativa (JavaScript) para construir interfaces.
  14. 14. Componentes customizados
  15. 15. Internacionalização
  16. 16. 100% testável
  17. 17. Fácil integração com bibliotecas esternas
  18. 18. google design http://www.google.com/design/
  19. 19. google material design
  20. 20. google material design
  21. 21. google material design
  22. 22. google material design
  23. 23. google material design
  24. 24. google material design http://www.google.com/inbox/
  25. 25. google material design
  26. 26. Angular Material https://material.angularjs.org/
  27. 27. Estrutura - Two-way data binding
  28. 28. Dinâmica Vamos programar?
  29. 29. Programação orientada a slide o/ Criar um arquivo chamado index.html
  30. 30. Estrutura do arquivo index.html
  31. 31. Importar a biblioteca do Angularjs
  32. 32. Criar um arquivo chamado index-controller.js Programação orientada a slide o/
  33. 33. Estrutura do arquivo index-controller.js
  34. 34. Criar uma variável no scope
  35. 35. Importar o arquivo index-controller.js no index.html
  36. 36. Declarar a app gdgSenadorApp
  37. 37. Demarcar o espaço de atuação do nosso controlador
  38. 38. Criar uma caixa de texto
  39. 39. Exibir o resultado digitado na caixa de texto
  40. 40. Saída no navegador
  41. 41. Boas práticas by John Papa https://github.com/johnpapa/angular-styleguide/
  42. 42. Github Uma rede social para programadores :)
  43. 43. Bower Gerenciamento de dependências Client-side
  44. 44. Grunt Automatizador de tarefas Por que você deve aprender o Grunt?
  45. 45. JSHint Ferramenta de análise de código javascript
  46. 46. Less Um pré-processador css
  47. 47. Yeoman Ferramenta SCAFFOLDING para desenvolvimento web
  48. 48. Sublime Text
  49. 49. Editor de Texto Leve Teclas de atalho intuitivas Multiplataforma Um dos mais utilizados por programadores AngularJs $70 Sublime Text
  50. 50. Webstorm
  51. 51. Webstorm Uma IDE pra chamar de sua :) Considerada a melhor IDE para desenv. Javascript e AngularJS Refactory de código inteligente Depuração avançada no Google Chrome Live Edit sem Live Reload Verificação de erros em tempo de desenvolvimento $49 para pessoa física - (Grátis para estudantes) $99 comercial
  52. 52. Github - Atom Editor de texto, leve, moderno e free Desenvolvido pelo Github e open-source o/ https://atom.io/ http://tableless.com.br/atom-o-novo-editor-github/
  53. 53. Curso de Angularjs Curso de AngularJs in Company - 24h Próximo curso - Senai Fatest - 03/11 à 20/11 Nova turma em dezembro julliermebarros@gmail.com http://goo.gl/forms/fFWvxAwknR https://plus.google.com/+JulliermeBarros
  54. 54. julliermebarros@gmail.com julliermebarros.com plus.google.com/+JulliermeBarros PERGUNTAS?

×