O documento apresenta uma introdução ao framework AngularJS 4, discutindo como se organiza em componentes, serviços, roteamento e diretivas. É demonstrado passo a passo como configurar o ambiente de desenvolvimento, criar um projeto inicial, componentes, módulos e serviços para consumir uma API REST.

1. Introdução AngularJS 4 com CLI
Júlio C. N. Souza
02/09/2017
GDG Uberaba

2. Um pouco sobre mim...
Pai da Júlia, um eterno aprendiz, e programador viciado em café adepto
do desenvolvimento ágil e poliglota.
Atuo como Engenheiro de Dados/Software na Mobilita e GJR Automação
de Processos (empresas as quais co-fundei).
Tenho Experiência em modelagem de arquitetura de software e
desenvolvimento de aplicações tanto monolíticas como baseadas em
microservices usando JavaEE e NodeJS.
Recentemente eu comecei a estudar e trabalhar com a Análise de Dados
e me apaixonei por Aprendizado de Máquina, Python e Scala.
Me arrisco de vez em quando no Front End com AngularJS.

3. O que veremos hoje?
● Introdução ao AngularJS 2/4 (a versão 4 é
compatível com a 2)
● Configurando ambiente de
Desenvolvimento
● Hands on Hello AngularJS 4

4. O que preciso saber para começar com
AngularJS 4?
● HTML
● CSS
● JavaScript (ES6)
● Type Script

5. O que não preciso saber?
Um monte de coisas, mas dentro desse contexto não
é necessário saber ANGULARJS 1.
Se você não sabe pode ser até mais fácil, porque
AngularJS 2/4 é muito diferente do AngularJS na
primeira versão.

6. Introdução
● https://angular.io
● Fruto de uma parceria entre Google e
Microsoft (por isso o uso do typescript)
● Open Source
● Foi totalmente reescrito, não é apenas uma
atualização da versão 1.
● Utiliza os padrões da web e Web Components.

7. Introdução:
Como se organiza o AngularJS 4?
● Componentes
○ Template
○ Metadata
○ Data Binding
● Serviços ● Roteamento
● Diretivas
● Injeção de
Dependências

8. Introdução:
Como se organiza o AngularJS 4: Componente
É a própria view.
● Template (HTML)
● Metadata (Permitem o Angular ler as classes e fazer o
processamento delas)
● Data Binding (Interpolação entre dados no JS e HTML)
● Comportamento da view
Comparando com Angular 1 é como se fosse a junção entre
Html, Data Binding (Controller e Escopo)

9. Introdução:
Como se organiza o AngularJS 4: Componente
Aplicações em AngularJS 4 são orientadas a componentes.
Componente
Raiz
Componente
Barra Lateral
Componente
Cabeçalho
Componente
Timeline
Componente
Post
Componente
Actions

10. Introdução:
Como se organiza o AngularJS 4: Componente
Componentes pequenos são mais fáceis de testar.
componente root
componente cabeçalho
componente
barra lateral
componente barra timeline
componente post
componente actions

11. Introdução:
Como se organiza o AngularJS 4: Serviços
Serviços são onde por boa prática vamos colocar nossa
regra de negócio e chamadas de API.
Podem ser injetados em outros componentes.
Componente X
Componente Y
Serviço REST API

12. Introdução:
Como se organiza o AngularJS 4: Roteamento
É a parte responsável pela navegação das páginas.

13. Introdução:
Como se organiza o AngularJS 4: Diretiva
Modifica elementos DOM e seu comportamento. O
angular possui várias. Por exemplo: ngIf
Componentes também são diretivas já que também
alteram os elementos DOM e seu comportamento.

14. Introdução:
Overview

15. Configurando Ambiente de
Desenvolvimento.
https://nodejs.org/en/download/

16. Configurando Ambiente de
Desenvolvimento.
npm install -g typescript

17. Configurando Ambiente de
Desenvolvimento.
npm install -g @angular/cli

18. Configurando Ambiente de
Desenvolvimento.
ng -v

19. Configurando Ambiente de
Desenvolvimento.
Editor de Texto
vamos usar esse na demo

20. My First Angular 4 App
● Crie um diretório para o seu projeto
● Abra o Visual Studio Code
● Vá em File/Open Folder e abra o diretório criado
● Vá até View e abra o Integrated Terminal
● No Terminal digite:
○ ng new my-first-app
○ cd my-first-app
○ ng serve
Abra no navegador: http://localhost:4200/

21. Verificando o código gerado

22. My First Angular 4 App:
Meu primeiro Componente
● ng g c comp01
Veja as alterações no projeto e vamos colocar o
seletor dentro do html do app component e ver as
alterações na view no localhost:4200 (live update)

23. My First Angular 4 App:
Meu primeiro Módulo
● Os blocos de código com um determinado propósito
compõem um módulo, e um conjunto desses módulos
irão compor a aplicação.
● O grande benefício dos módulos é desmembrar a
aplicação em partes pequenas, onde cada uma terá
sua responsabilidade, poderá ser facilmente testada,
além de permitir uma manutenção mais simples.
● Ajudam a organizar e modularizar o app.

24. My First Angular 4 App:
Meu primeiro Módulo
● Administração
○ Usuários
○ Permissões
○ Logs
● Produtos
○ Cadastros
○ Lista
● etc.

25. My First Angular 4 App:
Meu primeiro Módulo
● ng g m alunos
● crie um componente dentro do módulo (alunos)
● agregue o novo módulo ao componente raiz
Para que o componente(s) declarados no Módulo
fiquem visíveis no App Component e seu seletor
possa ser usado deve ser adicionado na lista de
exports do Módulo.
O módulo deve ser importado e adicionado na lista
de modules do AppModule.

26. My First Angular 4 App:
Meu primeiro Serviço
● ng g s alunos/alunos
● faça uma lista estática no service de (nome,nota)
● injetar no alunos.component.ts e designar valor
da lista de alunos do service para uma variável
local
Services são injetáveis (decorator @Injectble) no
componente tem de ser importados e injetados no
construtor (se usar o modificador private se tornam
atributo da classe automaticamente)

27. My First Angular 4 App:
Meu primeiro Serviço
● Fazer o data binding no html usando ngFor
<tbody *ngFor="let aluno of alunos" >
<tr>
<td>{{aluno.ra}}</td>
<td>{{aluno.name}}</td>
</tr>
</tbody>

28. My First Angular 4 App:
Meu primeiro Serviço
● alterar o services consumir ws
import { Http } from '@angular/http';
//injetar no construtor
constructor(private http: Http) {
}
//headers da requisicao
private getHeaders() {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
return headers;
}
this.http.post(“http://69.10.49.96:8080/app/ws/students/save”,json, this.getHeaders())
this.http.get(“http://69.10.49.96:8080/app/ws/students/list”, this.getHeaders()).map(res => res.json())
this.http.delete(“69.10.49.96:8080/app/ws/students/”+id, this.getHeaders())
//import 'rxjs/add/operator/map'; no AppModule para usar funcao map

29. Fonte e mais informações:
● Documentação AngularJS: https://angular.io/
● Blog AngularJS: https://blog.angular.io/
● Documentação CLI: https://blog.angular.io/
https://github.com/angular/angular-cli
● Curso Free Loiane Groner:
https://loiane.training/course/angular-2/
● Livro Angular 4: Pocket Primer:
https://www.amazon.com/Angular-Pocket-Primer-ebook/dp/B073
FWK8V8
● https://github.com/juliocnsouzadev/gdg_intro_angularjs4

30. Obrigado!