Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br

Desenvolvimento de aplicações
web com AngularJS
Organização

Realização

Apoio












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
“Transformar equipes de desenvolvimento de software”

http://www.agilecode.com.br
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
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.
•
•
•
•
•
•
•
•
•

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.
Insatisfação com a falta de
produtividade!
O que leva uma tecnologia
a ser improdutiva?
Build muito lento
Tecnologia muito complexa
Aprendizado muito difícil
Mistura de conceitos

Onde devo programar cada parte da aplicação?
Como surgiu a web?
Tim Berners-Lee
Criador da Web
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)
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)
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)
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)
Primeiro website da história!
No princípio era tudo estático
Como fazer para torná-la
mais dinâmica?
Vamos gerar o código HTML
no lado servidor
CGI
Common Gateway Interface
Bem vindos a Web 1.0
Geração de conteúdo HTML
no servidor e pouca interação
Como fazer para torná-la
mais interativa?
JavaScript

Entrando na era da alta interatividade
Bem vindos a Web 2.0
Quando pensamos em JavaScript,
qual é a primeira coisa que surge?
O Ministério da Saúde adverte:
O uso excessivo de JavaScript pode
levar o projeto ao caos!
Parece que vai ser necessário
começar a organizar o negócio...
Finalmente, chegamos...
Criado por Misko Havery e
Adams Abrons em 2009
Atualmente, o AngularJS é
mantido pela equipe do Google
Totalmente escrito em JavaScript
Isso quer dizer que toda a aplicação
roda browser do cliente?
Vai funcionar em todos os browsers?
Como fica a performance?
E a segurança do código?
O AngularJS tem como objetivo
estender a linguagem HTML
• Água
• Coca-Cola
• Cerveja
1. <ul>
2.
<li>Água</li>
3.
<li>Coca-Cola</li>
4.
<li>Cerveja</li>
5. </ul>
1. <ul>
2.
<li></li>
3. </ul>
1. <ul>
2.
<li ng-repeat="item in items">
3.
</li>
4. </ul>
1. <ul>
2.
<li ng-repeat="item in items">
3.
{{item.description}}
4.
</li>
5. </ul>
Qual é a vantagem em estender
a linguagem HTML?
Tornar a programação mais declarativa,
escrevendo muito menos código
Arquitetura do framework
O que é arquitetura?

Qual é a diferença entre arquitetura e design?
Surgimento do padrão MVC
Model-View-Controller
Trygve Reenskaug

Criou o padrão em 1978 na Xerox (PARC)
MVC, MVP, MVVM e MVW
Separação de responsabilidades
View

É o que o cliente vê
Controller

Responsável pelo que a View consome
Scope

Faz a mediação entre a View e o Controller
Hello World!
1.
2.
3.
4.
5.
6.
7.
8.

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

<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
</head>
<body>
</body>
</html>
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>
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>
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>
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>
AngularJS Hands-On

Por dentro das principais características do
framework!
Quais são os concorrentes do
AngularJS?
http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember
Quem está usando AngularJS?
Perguntas?
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
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
Obrigado!
rodrigo.branas@gmail.com
http://www.agilecode.com.br

www.slideshare.net/rodrigobranas

Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC

Notas do Editor