Link para o código do hands-on: http://www.agilecode.com.br/angularjs/minicurso_rodrigobranas.zip

1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
Desenvolvimento de aplicações
web com AngularJS

2. Organização
Realização
Apoio

3. 










JavaScript e AngularJS
Clean Code com TDD e Refactoring
Academia Programador
Academia Java
Academia WEB
Academia Enterprise
Academia Arquiteto
Linux
Asterisk
OpenSIPS
Oficiais Furukawa
www.voffice.com.br
treinamento@voffice.com.br

4. “Transformar equipes de desenvolvimento de software”
http://www.agilecode.com.br

5. Rodrigo Branas
rodrigo.branas@agilecode.com.br
http://www.agilecode.com.br
•
•
•
•
Desenvolvendo Software na Gennera
Criando treinamentos na Agile Code
Escrevendo na Java Magazine e PacktPub
Palestrando sobre desenvolvimento de
software em eventos, universidades e
empresas

6. Formação Acadêmica
Ciências da Computação – UFSC
Gerenciamento de Projetos - FGV
Certificações
SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM
Experiência
Há mais de 12 anos desenvolvendo software na
plataforma Java com as empresas: EDS, HP, NET,
Citibank, GM, Dígitro, Softplan, OnCast, Senai,
VALE, RBS, Unimed, Globalcode, V.Office, Suntech,
WPlex e Gennera.

7. •
•
•
•
•
•
•
•
•
Há mais de 5 anos liderando pessoas.
Mais de 2000 horas em sala de aula.
Mais de 100 apresentações em eventos.
6 artigos escritos para revistas.
1 livro.
Mais de 500 profissionais treinados.
Criação de 22 palestras.
Criação de 10 treinamentos.
Criação de mais de 3.000 slides.

8. Insatisfação com a falta de
produtividade!

9. O que leva uma tecnologia
a ser improdutiva?

10. Build muito lento

11. Tecnologia muito complexa

12. Aprendizado muito difícil

13. Mistura de conceitos
Onde devo programar cada parte da aplicação?

14. Como surgiu a web?

15. Tim Berners-Lee
Criador da Web

17. Em 1990, nos laboratórios do CERN e utilizando
um computador NeXTcube, Berners-Lee construiu
o primeiro servidor, o primeiro navegador e as
primeiras páginas que descreviam seu próprio
projeto, chamado WorldWideWeb.
(CERN)

18. Em 1990, nos laboratórios do CERN e utilizando
um computador NeXTcube, Berners-Lee construiu
o primeiro servidor, o primeiro navegador e as
primeiras páginas que descreviam seu próprio
projeto, chamado WorldWideWeb.
(CERN)

19. Em 1990, nos laboratórios do CERN e utilizando
um computador NeXTcube, Berners-Lee construiu
o primeiro servidor, o primeiro navegador e as
primeiras páginas que descreviam seu próprio
projeto, chamado WorldWideWeb.
(CERN)

20. Em 1990, nos laboratórios do CERN e utilizando
um computador NeXTcube, Berners-Lee construiu
o primeiro servidor, o primeiro navegador e as
primeiras páginas que descreviam seu próprio
projeto, chamado WorldWideWeb.
(CERN)

21. Primeiro website da história!

22. No princípio era tudo estático

23. Como fazer para torná-la
mais dinâmica?

24. Vamos gerar o código HTML
no lado servidor

25. CGI
Common Gateway Interface

26. Bem vindos a Web 1.0

27. Geração de conteúdo HTML
no servidor e pouca interação

28. Como fazer para torná-la
mais interativa?

29. JavaScript
Entrando na era da alta interatividade

30. Bem vindos a Web 2.0

31. Quando pensamos em JavaScript,
qual é a primeira coisa que surge?

33. O Ministério da Saúde adverte:
O uso excessivo de JavaScript pode
levar o projeto ao caos!

34. Parece que vai ser necessário
começar a organizar o negócio...

36. Finalmente, chegamos...

37. Criado por Misko Havery e
Adams Abrons em 2009

38. Atualmente, o AngularJS é
mantido pela equipe do Google

39. Totalmente escrito em JavaScript

40. Isso quer dizer que toda a aplicação
roda browser do cliente?

41. Vai funcionar em todos os browsers?

42. Como fica a performance?

43. E a segurança do código?

44. O AngularJS tem como objetivo
estender a linguagem HTML

45. • Água
• Coca-Cola
• Cerveja

46. 1. <ul>
2.
<li>Água</li>
3.
<li>Coca-Cola</li>
4.
<li>Cerveja</li>
5. </ul>

47. 1. <ul>
2.
<li></li>
3. </ul>

48. 1. <ul>
2.
<li ng-repeat="item in items">
3.
</li>
4. </ul>

49. 1. <ul>
2.
<li ng-repeat="item in items">
3.
{{item.description}}
4.
</li>
5. </ul>

50. Qual é a vantagem em estender
a linguagem HTML?

51. Tornar a programação mais declarativa,
escrevendo muito menos código

52. Arquitetura do framework

53. O que é arquitetura?
Qual é a diferença entre arquitetura e design?

54. Surgimento do padrão MVC
Model-View-Controller

55. Trygve Reenskaug
Criou o padrão em 1978 na Xerox (PARC)

57. MVC, MVP, MVVM e MVW

58. Separação de responsabilidades

60. View
É o que o cliente vê

61. Controller
Responsável pelo que a View consome

62. Scope
Faz a mediação entre a View e o Controller

63. Hello World!

64. 1.
2.
3.
4.
5.
6.
7.
8.
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
</body>
</html>

65. 1.
2.
3.
4.
5.
6.
7.
8.
<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
</head>
<body>
</body>
</html>

66. 1.
2.
3.
4.
5.
6.
7.
8.
9.
<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
<script src='angular.js'></script>
</head>
<body>
</body>
</html>

67. 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
<script src='angular.js'></script>
<script>
function HelloWorldCtrl($scope) {
$scope.message = 'Hello World!';
}
</script>
</head>
<body>
</body>
</html>

68. 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
<script src='angular.js'></script>
<script>
function HelloWorldCtrl($scope) {
$scope.message = 'Hello World!';
}
</script>
</head>
<body ng-controller="HelloWorldCtrl">
</body>
</html>

69. 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
<script src='angular.js'></script>
<script>
function HelloWorldCtrl($scope) {
$scope.message = 'Hello World!';
}
</script>
</head>
<body ng-controller="HelloWorldCtrl">
{{message}}
</body>
</html>

71. AngularJS Hands-On
Por dentro das principais características do
framework!

72. Quais são os concorrentes do
AngularJS?

74. http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember

75. Quem está usando AngularJS?

80. Perguntas?

81. Treinamento de
Desenvolvimento web com JavaScript e AngularJS
Aprenda a construir aplicações web interativas e fáceis de utilizar,
com uma arquitetura modular, robusta e flexível e uma
produtividade que vai superar as suas expectativas!
treinamento@voffice.com.br
Turmas
08/03 (sábados) em Indaial
24/03 (seg. e qua.) em Florianópolis
05/04 (sábados) em Florianópolis
15/04 (ter. e qui.) em Florianópolis
Vagas Encerradas
Vagas Encerradas
Inscrições Abertas
Inscrições Abertas

82. Treinamento de Clean Code
Desenvolva suas habilidades na arte da programação e aprenda a
construir aplicações de alta qualidade por meio de Técnicas de
Refactoring, Orientação a Objetos, Test-Driven Development e
Automação do Ambiente de Desenvolvimento!
treinamento@voffice.com.br
Turmas
16/04 (seg. e qua.) em Florianópolis
Inscrições Abertas

86. Obrigado!
rodrigo.branas@gmail.com
http://www.agilecode.com.br
www.slideshare.net/rodrigobranas