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

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
•
•
•
•

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?

Mistura de conceitos

Onde devo programar cada parte da aplicação?

Tim Berners-Lee
Criador da Web

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

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

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

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...

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?

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 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

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)

Separação de responsabilidades

Controller

Responsável pelo que a View consome

Scope

Faz a mediação entre a View e o Controller

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>
</head>
<body>
</body>
</html>

1.
2.
3.
4.
5.
6.
7.
8.
9.

<!doctype html>
<html ng-app>
<head>
<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>
<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>
<script>
}
</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>
<script>
}
</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

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!

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

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!

Turmas
16/04 (seg. e qua.) em Florianópolis


Obrigado!
rodrigo.branas@gmail.com

www.slideshare.net/rodrigobranas

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

Recomendados

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC (20)

Mais de Rodrigo Branas (14)

Último (10)

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

Notas do Editor