Introdução AngularJS 4 com CLI

Júlio C. N. Souza02/09/2017GDG Uberaba

Um pouco sobre mim...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.

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

O que preciso saber para começar com AngularJS 4?

● HTML● CSS● JavaScript (ES6)● Type Script

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.

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.

Introdução:Como se organiza o AngularJS 4?

● Componentes○ Template○ Metadata○ Data Binding

● Serviços ● Roteamento

● Diretivas● Injeção de

Dependências

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)

Introdução:Como se organiza o AngularJS 4: Componente

Aplicações em AngularJS 4 são orientadas a componentes.

ComponenteRaiz

ComponenteBarra Lateral

ComponenteCabeçalho

Componente Timeline

ComponentePost

ComponenteActions

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

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

Introdução:Como se organiza o AngularJS 4: Roteamento

É a parte responsável pela navegação das páginas.

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.

Introdução:Overview

Configurando Ambiente de Desenvolvimento.

https://nodejs.org/en/download/

Configurando Ambiente de Desenvolvimento.

npm install -g typescript

Configurando Ambiente de Desenvolvimento.

npm install -g @angular/cli

Configurando Ambiente de Desenvolvimento.

ng -v

Configurando Ambiente de Desenvolvimento.

Editor de Texto

vamos usar esse na demo

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/

Verificando o código gerado

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)

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.

My First Angular 4 App: Meu primeiro Módulo

● Administração○ Usuários○ Permissões○ Logs

● Produtos○ Cadastros○ Lista

● etc.

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.

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)

My First Angular 4 App: Meu primeiro Serviço

● Fazer o data binding no html usando ngFor

<tbody>

<tr *ngFor="let aluno of alunos">

<td>{{aluno.ra}}</td>

<td>{{aluno.name}}</td>

</tr>

</tbody>

My First Angular 4 App: Meu primeiro Serviço

● alterar o services consumir wsimport { 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

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

● https://github.com/juliocnsouzadev/gdg_intro_angularjs4

Obrigado!