O documento descreve o framework Angular, incluindo sua história, arquitetura, funcionalidades e aplicações. Angular é um framework JavaScript mantido pelo Google para desenvolvimento de aplicações web single-page usando TypeScript.

1. ANGULAR
DANNYROOH F CAMPOS – MARÇO / 2017DANNYROOH F CAMPOS – MARÇO / 2017

2. O QUE É ANGULAR ?
● Angular, é um framework javascript mantido pelo
Google para desenvolvimento de aplicações web.
● Utiliza a premissa SPA (Single Page Application)
para desenvolvimento front-end.
● Foi criado como um meta-framework, pode criar
outros framework, como por exemplo, o Ionic.
NGULAR DEFINIÇÃO

3. ● Criado em 2009 por Misko Hevery e Adams
Abrons para facilitar a criação de aplicações web.
● Misko foi trabalhar para o Google, no projeto
FeedBack, e depois de 6 meses já haviam 17.000
linhas de código...
● Misko fez uma aposta com o seu gerente de
projeto, que reescreveria a aplicação em 2
semanas …
● Após 3 semanas conseguiu, e com apenas 1.500
linhas.
NGULAR HISTÓRICO

4. O aplicativo de página única (SPA, na sigla em
inglês) é um aplicativo da Web ou website que
carrega todos os recursos necessários para navegar
por todo o site no primeiro carregamento de página.
À medida que o usuário clica em links e interage com
a página, o conteúdo subsequente é carregado
dinamicamente.
O aplicativo atualiza o URL na barra de endereços
para emular a navegação tradicional nas páginas.
Outra solicitação de página inteira nunca é feita.
NGULAR SPA

5. NGULAR ARQUITETURA
● Arquitetura baseada em camadas bem definidas,
há separação da regra de negócio com os
templates de visualização e de estilização, e
serviços externos.
● MVW ( Model-View-Whatever), não é um padrão
definido, você escolhe com qual padrão quer
programar ...
MVC & MVVM & MVP

6. ● Angular é estruturado em web components
● Web Components possibilita a criação de tags
html customizadas, que encapsulam HTML + CSS
+ JAVASCRIPT
● São estruturas html reaproveitáveis
● Padronizado pelo W3C
https://www.w3.org/standards/techs/components#w3c_all
NGULAR WEB COMPONENTS

7. 2 + 1 = 4 ?
NGULAR VERSÃO 3?

8. ● Adotado versionamento semantico
● Para sincronizar a versão dos packages no npm,
2.x e router 3.x , todos foram sincronizados em
4.0.0
● Novas versões Major a 6 meses
NGULAR SEMANTIC VERSION

9. AngularJS representa a serie do angular 1.x.
Angular identifica sempre a última versão,
somente devemos nos referir a númeração da
versão quando estamos falando de uma nova
feature.
https://angular.io/presskit.html
NGULAR BRAND NAMES

10. O Angular, no modo AoT (Ahead-of-time), compila
os seus modelos .ts em tempo de
desenvolvimento, ou seja durante a construção,
gerando o arquivo .js ou notificando erros
Nesta versão, Angular 4, a equipe fez algumas
alterações e deixaram o código gerado 60%
menor quando era utilizado o AoT.
NGULAR modo AoT

11. ECMAScript é uma linguagem de programação
baseada em scripts, padronizada pela Ecma
International na especificação ECMA-262. A
linguagem é bastante usada em tecnologias para
Internet, sendo esta base para a criação do
JavaScript/JScript e também do ActionScript.
Podemos utilizar o ES2015 (ES6), que traz a
tipagem de variáveis, uso de classes, funções de
seta e modulos.
http://es6-features.org/
NGULAR ECMASCRIPT

12. ● TypeScript é uma linguagem open source mantida
pela Microsoft .
● É um superconjunto JavaScript, utilizando tipagem
e Orientação a Objetos baseado em classes.
● Anders Hejlsberg, arquiteto líder do C # e criador
de Delphi e Turbo Pascal , trabalhou no
desenvolvimento de TypeScript.
● O TypeScript pode ser usado para desenvolver
aplicações JavaScript para execução no lado do
cliente ou no lado do servidor ( Node.js ).
NGULAR TYPESCRIPT

13. TypeScript é projetado para o
desenvolvimento de grandes aplicações
e transcompiles para JavaScript.
Ou seja, você escreve no formato type,
salva o arquivo com extensão .ts,
compila o javascript, verifica os erros e
ele gera o arquivo .js com javascript
puro.
http://www.typescriptlang.org/.
NGULAR TYPESCRIPT

14. wap.ind.br
foursquare.com
weather.com
freelancer.com
netflix.com
istockphoto.com
upwork.com
NGULAR Sites Angular
Sites em Angular
landsend.com
wikiwand.com
mobileRoadie.com
posse.com
mealShaker.com
mallzee.com
gmail.com
https://www.eduonix.com/blog/web-programming-tutorials/top-15-websites-and-apps-built-with-angularjs/

15. NGULAR ANIMATE
Animações
BOLHAS http://www.jqueryrain.com/?rgtq75jE
MENU http://www.jqueryrain.com/?wHY8coK_
NGTetris http://www.jqueryrain.com/?YX1caD6A
Preview http://www.jqueryrain.com/?nW0KwBFA
NgAnimation http://www.jqueryrain.com/?rdgiouCU
Progress http://www.jqueryrain.com/?7fAagu3V
http://angularjs.jqueryrain.com/example/animation/

16. Sistemas com Angular
Para nível didático, vamos considerar um sistema
crud desenvolvido no formato de dashboard.
Os exemplos mostrados, estão no github e podem
ser baixados livremente.
NGULAR SISTEMAS

17. Dashboard GitHub
http://davidkk.github.io/ngAdmin/#/index/dashboard/
http://flatlogic.github.io/angular-material-dashboard/#/table
http://rawgit.com/start-angular/versatile-dashboard-theme/master/dist/index.html
http://fluanceit.github.io/angular-dashboard/#/index
http://themifycloud.com/demos/templates/joli/pages-profile.html#
NGULAR THEMAS
http://clubedosgeeks.com.br/programacao/angularjs/16-temas-free-angularjs

18. IONIC 3 (=) ANGULAR 4
NGULAR IONIC 3

19. NGULAR IONIC

20. O QUE É IONIC ?
Ionic é um open source mobile SDK para geração
de web apps, para plugins como Apache Cordova.
https://ionicframework.com/
NGULAR modo AoT

21. Apache Cordova
O Apache Cordova é uma plataforma de
desenvolvimento móvel com APIs que permitem
que o desenvolvedor acesse funções nativas do
dispositivo, como a câmera ou o acelerômetro.
NGULAR CORDOVA
https://cordova.apache.org/

22. Cordova 5
Quando se desenvolve com o Cordova, se cria um
aplicativo híbrido, aonde o seu código pode ser
compilado para diversas plataformas como
Android, iOS, Windows Phone, FirefoxOS,
Amazon Fire OS, BlackBerry, Tizen e Ubuntu; e
todas as APIs para acesso de funções do
dispositivo são instaladas na própria aplicação.
NGULAR CORDOVA

23. O que é NPM
NPM é o nome reduzido de Node Package
Manager (Gerenciador de Pacotes do Node).
Administrador JavaScript de pacotes, dependêncis
e versões.
Utilitário de linha de comando que interage com
este repositório online
NGULAR NPM
https://www.npmjs.com/

24. NGULAR VS Code
Visual Studio Code
Visual Studio Code é um editor de código fonte
leve mas poderoso que funciona em seu desktop
e está disponível para Windows, macOS e Linux.
Ele vem com suporte interno para JavaScript,
TypeScript e Node.js e possui um rico
ecossistema de extensões para outros idiomas
(como C ++, C #, Python, PHP, Go) e runtimes
(como .NET e Unity).
https://code.visualstudio.com/

25. NGULAR NODE.JS
Node.js é um interpretador de código JavaScript
que funciona do lado do servidor.
https://nodejs.org/en/

26. NGULAR SETUP
Ambiente de Desenvolvimento Angular
1) Baixar e instalar o node.js (nodejs.org)
Ao baixar e instalar o node ele instala
automaticamente o npm
2) Abrir o prompt na sequencia instalar: (c:)
npm install -g typescript
npm install -g @angular/cli
ng -v
3) Baixar e instalar o Visual Studio Code

27. NGULAR SETUP
Ambiente de Desenvolvimento IONIC
1) Baixar e instalar o node.js (nodejs.org)
Ao baixar e instalar o node ele instala
automaticamente o npm
2) Abrir o prompt e instalar: (c:)
npm install -g cordova ionic
3) Baixar e instalar o Visual Studio Code

28. NGULAR hello-word
Hello, Word
1) Abra o VS Code e posicione numa pasta (File/Open Folder)
2) Abra o terminal integrado, (View/Integrate temirnal)
3) Cria a aplicação hello-word, no terminal integrado, digite:
ng new hello-word
4) Depois de criado, rode a aplicação, digite no terminal:
ng serve
A seu site, estará disponível para o browse na porta 4200,
locahost:4200
5) Após a aplicação ter sido criada, e rodando no browse, entre no
arquivo app.components.ts e altere title = 'Alo, Mundo!';
Se o browse estiver aberto, após salvar, ele compilará
automaticamente, e o browse será atualizado, AoT.

29. NGULAR hello-word
Cotação + Boostrap
1) ng new cotacao
2) Instalando boostrap no terminal integrado
npm install –save bootstrap@3
npm install –save jquery
npm install –save tether
3) Atualize o mapeamento dos scripts e styles do boostrap no
arquivo angular-cli.json.
https://www.npmjs.com/package/angular-cli
4) Edit o arquivo index.html e inclua o container do bootstrap
<div class=”container”>
<app-root>Loading...</app-root>
</div>

30. NGULAR IONIC
Instalar Cordova
1) ng new cotacao
2) Instalando boostrap no terminal integrado
npm install –save bootstrap@3
npm install –save jquery
npm install –save tether
3) Atualize o mapeamento dos scripts e styles do boostrap no
arquivo angular-cli.json.
https://www.npmjs.com/package/angular-cli
4) Edit o arquivo index.html e inclua o container do bootstrap
<div class=”container”>
<app-root>Loading...</app-root>
</div>