1. Superheroic JavaScript MVW Framework

2. O que é AngularJs
AngularJs é um framework baseado em Java Script usado para criar
aplicações web de forma dinâmica . Trabalha dinamicamente com SPA (Single
Page Application) .
O vinculo direto de dados e injeção de dependência Guice elimina muito
código que deveria ser escrito . Tudo isto acontece dentro do browser
tornando fácil o uso de qualquer tecnologia de servidores .
Ele é o que o html deveria ser !
Tem o objetivo de tornar mais rápido o desenvolvimento e teste de aplicações
web .

3. Ligação de dados entre camadas

4. História do AngularJs
AngularJS foi originalmente desenvolvido em 2009 por Misko Hevery e
Adam Abrons como um software por trás de um serviço de
armazenamento JSON(JavaScript Object Notation) online, que teria
preço estimado por megabyte, para aplicações pré-construídas (easy-to-
make) para as empresas.
Este empreendimento foi disponibilizado em "GetAngular.com", e teve
alguns inscritos, antes de os dois decidirem abandonar a ideia comercial e
distribuir Angular como uma framework open-source.
Abrons deixou o projeto, mas Hevery, que trabalha no Google continuou
seu desenvolvimento e manteve o framework em conjunto com alguns
colegas do Google como Igor Minár e Vojta Jína .

5. História do AngularJs
O Angular encontra-se hoje na versão estável 1.4.8 e já possui a versão beta
2.0
Com a versão 2.0 espera-se :
Aumento de velocidade no desenvolvimento e performance.
X Plataform : IOS , Android , Desktop e web .
Ganhos com a padronização
Mais simplicidade no desenvolvimento
Time de desenvolvimento

6. SPA - Single Page Application
As SPAs são aplicações completas, desenvolvidas em JavaScript, que
funcionam quase como se estivessem sendo executadas nativamente no
desktop.
O Google foi pioneiro nesta tecnologia e o mundo o seguiu.
Atualmente, a maior parte das aplicações “web 2.0” usam este modelo: o
Gmail, a busca do Google, o Google Drive, Facebook, o Twitter, o
FourSquare, o Instagram, blogs, sites corporativos, dentre outros.

7. Abordagem do AngularJs
O HTML trabalha apenas com páginas estáticas o que limita muito o seu uso e
para utilizar recursos dinâmicos com o HTML temos duas possibilidades :
Bibliotecas : Onde carregamos junto com nosso código como por exemplo ,
a JQuery .
Framework : Que disponibiliza recursos para o uso de recursos dinâmicos
O AngularJS é construído sob a crença de que a programação declarativa é
melhor do que a programação imperativa quando se trata da construção de
interfaces com o usuário e da conexão de componentes software, enquanto a
programação imperativa é excelente para a escrita de regras de negócio.

8. Abordagem do AngularJs
O framework Angular adapta e estende o HTML tradicional para uma melhor
experiência com conteúdo dinâmico, com a ligação direta e bidirecional dos
dados (two-way data-binding) que permite sincronização automática de
models e views .
Como resultado, AngularJS abstrai a manipulação do DOM(Document Object
Model) e melhora os testes. Com isso é possivel :
Abstrair a manipulação do DOM da lógica do aplicativo. Isto melhora os
testes do código.

9. Abordagem do AngularJs
Considera os testes do aplicativo tão importantes quanto seu
desenvolvimento. A dificuldade do teste é diretamente afetada pela
maneira como o código é estruturado.
Abstrai o acoplamento entre o lado cliente e o lado servidor da aplicação.
Isto permite que o desenvolvimento do aplicativo evolua em ambos os
lados, de forma paralela, e permite o reuso de código.
Guia os desenvolvedores através da construção de todo o aplicativo: desde
o design de Interface, passando pela escrita das regras de negócio, até
chegar aos testes da aplicação.

10. Abordagem do AngularJs
Usando injeção de dependencia Guice, o Angular traz serviços
comumente designados ao lado servidor da aplicação, como controllers
para os componentes visuais, para o lado cliente da aplicação.
Consequentemente, o peso do backend é radicalmente reduzido,
tornando as aplicações muito mais leves.
Angular ensina o navegador nova sintaxe através de uma construção que
chamamos de directivas.
Angular trabalha facilmente com múltiplas arquiteturas como MVC , MVP e
MVVM .
Nasceu com o objetivo de acelerar o desenvolvimento de CRUD(Create ,

11. Não sofra mais com ...
Registro de retorno de Callback : Remover código clichê comum, tais
como chamadas de retorno é uma coisa boa porque reduz a quantidade
de codificação JavaScript você tem que fazer, e isso torna mais fácil para
ver o que seu aplicativo faz.
Manuseio do DOM : DOM é o pilar de aplicações AJAX, mas é complicado e
propenso a erros. Pela abordagem declarativa que descreve como a
UI(Interface do Usuário) deve mudar à medida que as suas alterações
ocorrem você se livra do baixo nível tarefas de manipulação DOM. A
maioria dos aplicativos escritos com Angular nunca tem que manipular
programaticamente o DOM, embora você possa se você quiser.

12. Não sofra mais com ...
Empacotamento de dados para UI : operações CRUD compõem a maioria
das tarefas dos aplicativos Ajax(Asynchronous Javascript and XML). O
empacotamento feito pelo Angular padroniza e elimina quase todo
código clichê , permitindo o gerenciamento do fluxo geral da aplicação,
em vez de todos os detalhes de implementação.
Inicio da aplicação e ambiente : Normalmente você precisa escrever um
monte de código só para ter um exemplo "Hello World" em AJAX. Com
Angular você pode inicializar facilmente os serviços, que são auto-injetado
em seu aplicativo . Isso permite que você comece a desenvolver
rapidamente. Como um bônus, você tem controle total sobre o processo
de inicialização em testes automatizados.

13. Arquitetura - MVC
MVC é um padrão de arquitetura de software (design pattern) que separa a representação da
informação da interação do usuário com ele.
O modelo (model) consiste nos dados da aplicação, regras de negócios, lógica e funções.
Uma visão (view) pode ser qualquer saída de representação dos dados, como uma tabela ou um
diagrama. É possível ter várias visões do mesmo dado, como um gráfico de barras para
gerenciamento e uma visão tabular para contadores.
O controlador (controller) faz a mediação da entrada, convertendo-a em comandos para o modelo
ou visão. As ideias centrais por trás do MVC são a reusabilidade de código e separação de conceitos.

14. Arquitetura - MVC

15. Arquitetura - MVP
MVP é uma evolução do MVC que se comunica bidirecionalmente com as outras camadas, evitando que o Model tenha que se
comunicar diretamente com o View sem passar pelo Controller e este último é fundamental para a interação com o usuário. O
MVP desacopla as funções e torna a arquitetura ainda mais modular.
A camada Presenter é ciente de tudo o que ocorre nas outras duas camadas e deixa-as cientes do que ela está fazendo.
A interação com usuário é feita primariamente pelo View, e este pode delegar ao Presenter determinadas tarefas.
Há uma relação um-para-um entre estas camadas. Nesta relação há uma referência do View para o Presenter mas não o
oposto.
É possível vincular dados do View com o Model através de data binding. Isto ocorre na variação Supervising Controller, em
oposição à variação Passive View onde a View essencialmente só possui o desenho da UI.
O View pode conter código para manipular a UI.
Por causa do total desacoplamento, testar se torna uma tarefa mais simples.

16. Arquitetura - MVP

17. Arquitetura - MVVM
MVVM é uma pequena evolução do MVP em um lado e um retrocesso em outro. Nele o ViewModel não está ciente do que
ocorre no View mas este está ciente do que ocorre no ViewModel. No caso do Model ambos estão cientes do que ocorre em
cada um.
O nome se dá porque ele adiciona propriedades e operações ao Model para atender as necessidades do View, portanto ele cria
um novo modelo para a visualização.
É possível associar vários Views para um ModelView. É comum que os Views sejam definidos de forma declarativa (HTML/CSS,
XAML, etc.).
O data binding é feito entre o View e o ViewModel.
Com este padrão é possível reduzir a quantidade de código para manter. Algumas automações são possíveis por ter todas as
informações necessárias no ViewModel.
É um padrão que está intimamente ligado ao WPF (Windows Presentation Foundation)

18. Arquitetura - MVVM

19. Arquitetura - MVVM

20. Arquitetura - MVW
Exposto os modelos de arquitetura podemos afirmar que o AngularJs
trabalha com qualquer arquitetura e por isso ele também é conhecido
como framework MVW (Model - View - Whatever )

21. Pontos positivos do Angular
Mantido pelo Google
Documentação , API e plugins em abundância
Utilização de Java Script
Uso do html como um template de Java Script
Orientado para o SPA
Curva de aprendizado rápido
Integração com testes

22. Pontos negativos do Angular
Retrocompatilidade da versão 2 com as anteriores
Maior integração com o DOM
Client-Side pode ter consequências negativas como :
Dependência do ambiente e browser do usuário.
Lentidão com os indexadores de redes sociais que demandam mais trabalho para
contornar o problema.
Estatisticas e monitoramento fragmentado
Não é trivial o seu uso adaptado em aplicações já concebidas
Arquitetura da aplicação

23. Visão Geral
Templates
São os arquivos html que recebem as tags(marcadores) do Angular .
Compilador
Efetua o processamento do template , renderiza o DOM e exibe a View
Diretivas
São marcadores em um elemento DOM que atribui um comportamento especifico a esse
elemento ou até mesmo aos seus herdeiros .
Angular usa diversas diretivas de diversos tipos
ng-app : Trata da aplicação

24. Visão Geral
Módulos
São containers para diferentes partes da sua aplicação como controllers , serviços , etc
Injeção de dependência
É um design pattern que lida como os componentes administram e resolvem suas
dependências.
Services
Services são objetos substituíveis que estão ligados entre si usando a injeção de
dependência . Você pode usar os services para organizar e compartilhar código em seu
aplicativo.

25. Visão Geral
Scope
Scope é um objeto que se refere ao model da aplicação. É um contexto de execução à
manifestação. Scopes estão dispostos na estrutura hierárquica que imitam a estrutura
dos DOM a aplicação. Scopes podem suportar expressões e propagar eventos.
$watch - observa a alteração no model
$apply - propaga alteração no model
$scope - propriedade de dados
Filter
Um filtro formata o valor de uma expressão para exibição para o usuário.

26. SEGURANÇA
Angularjs expressões são SandBoxed(acesso restrito) não por razões de
segurança, mas para manter adequadamente a separação de
responsabilidades de aplicação.
No entanto, este sandbox não pretende parar ataques que podem editar o modelo antes de
ser processado por Angular.
Recomendamos na criação de sua aplicação :
Não misture modelos Client-Side com Server-Side. É possivel mas não misture !
Não use a entrada do usuário para gerar modelos dinamicamente
Não execute a entrada do usuário com $scope.$eval
Considere o uso de CSP - Content Security Policy , mas não confie apenas nisso .

27. MEAN
MEAN
M - Mongo DB : Banco de dados orientado a documentos
E - Express : Framework de desenvolvimento web para Node
A - AngularJs : Client Side aplicação
N - Node.JS : Server Side aplicação com Java Script
Temos a vantagem de não precisar saber nenhuma linguagem além do JavaScript que também é
uma grande vantagem quando queremos utilizar um banco de dados NoSql, como o MongoDB, já
que estaremos trabalhando direto com objetos muito similares ao JSON.
Essas características tornam o MEAN ideal para rápida prototipação de software e desenvolvimento
de aplicações escaláveis com abordagem Client-Side e Server-Side de forma segura . Por ser usado

28. Fontes e referências
https://docs.angularjs.org/guide/introduction
https://pt.wikipedia.org/wiki/MVC
https://pt.wikipedia.org/wiki/AngularJS
http://pt.stackoverflow.com/questions/21539/o-que-%C3%A9-mvp-e-mvvm
https://medium.com/android-news/android-architecture-2f12e1c7d4db#.cmef7qd9n
http://imasters.com.br/desenvolvimento/single-page-applications-e-outras-maravilhas-da-web-
moderna/?trace=1519021197
http://blog.caelum.com.br/conhecendo-a-stack-mean-mongodb-express-angular-e-node/

29. Onde aprender e treinar
https://www.codecademy.com/pt/learn/learn-angularjs
https://angular.io/docs/ts/latest/quickstart.html

30. Contato
Emerson Rodrigues da Silva
e-mail : emerson.rodsilva@gmail.com
twitter : @emerson_rsilva
Linkedin : linkedin.com/in/emersonrsilva