Conhecendo os fundamentos e desenvolvendo uma aplicação básica com Angular 2

Hugo MagalhãesFundador do meuingresso.comhugo@meuingresso.com

O QUE É O ANGULAR?

Plataforma de desenvolvimento frontend para criação de

aplicações mobile e desktop

POR QUE UMA NOVA VERSÃO?

Web components, mobile e padrões

POR QUE UMA NOVA VERSÃO?

Re-escrita do angular 1, levando em conta tudo que foi aprendido nos últimos 5 anos

TypeScript

TypeScript

ECMAScript 6

ECMAScript 5

Junho 2015

Dezembro 2009

my-script.tsTypeScript

transpiler

my-script.jsECMA5

Vantagens do TypeScript

Tipos explicitamente documentados: fácil

compreensão.

Vantagens do TypeScript

Uso de decorators: poder à injeção de

dependências.

Estrutura básica de uma aplicação Angular

Template <…>

Component {…}

Directive {…}

InjectorService A

Service B

Property binding Event

binding Metadata

TALK LESS. CODE MORE.

Mini-cursoCriando um cadastro de usuários simples

utilizando Angular 2

01.CONFIGURANDO O AMBIENTE E ARQUIVOS DE CONFIGURAÇÃO

01.

Agenda

1. Instalar Node.js e npm 2. Criar e configurar o projeto 3. Criar a aplicação 4. Criar um componente e adicionar à aplicação 5. Iniciar a aplicação 6. Definir a página inicial 7. Criar folha de estilos 8. Compilar a rodar a aplicação 9. Fazer alterações em tempo real

01.

1. Instalar Node.js e npm

node v5.x.x ou superior npm 3.x.x ou superior

npm -v

node -v

01.

2. Criar e configurar o projeto

mkdir angular2-secomp-userscd angular2-secomp-users

Baixar o projeto com os arquivos base: package.json, tsconfig.json, typings.json, systemjs.config.js

https://github.com/hugomn/angular2-secomp-users/releases/tag/base

01.

2. Criar e configurar o projeto

Instalar pacote do Node.js listados no package.json:

npm install

01.

3. Criar a aplicação

mkdir app

01.

4. Criar um componente

01.

Editamos nosso módulo para incluir nosso componente:

01.

5. Iniciar a aplicação

01.

6. Definir a página inicial

01.

7. Criar folha de estilos

01.

8. Compilar e rodar a aplicação

npm start

01.

8. Alterações em tempo real

Altere o arquivo app.component.ts e verifique se o browser recarregará.

02.CRIANDO O EDITOR DE USUÁRIOS

02.

Agenda

1. Exibindo um usuários 2. Criando classe de usuários 3. Alterando o html 4. Editando nosso usuário 5. Two-way binding

02.

1. Exibindo um usuário

02.

2. Criando classe de alunos

02.

3. Alterando o html

02.

4. Editando nosso aluno

02.

5. Importar FormsModule e usar ngModel para two-way binding

03.EXIBINDO UMA LISTA DE USUÁRIOS

03.

Agenda

1. Definindo nossos usuários 2. Exibindo os usuários 3. Alterando o estilo 4. Selecionando os usuários 5. Destacando o usuário selecionado

03.

1. Definindo os usuários

03.

2. Exibindo os usuários

03.

2. Exibindo os usuários

03.

3. Alterando o estilo (css)

03.

4. Selecionando os usuários

03.

5. Destacando usuário

selecionado

04.CRIANDO COMPONENTES REUTILIZÁVEIS

04.

Agenda

1. Criando componente para exibir detalhes do usuário 2. Dizendo ao componente o que exibir 3. Importando o novo componente

04.

1. Criando componente de

detalhe do usuário touch app/user-detail.component.ts

04.

1. Criando componente de

detalhe do usuário

04.

1. Criando componente de

detalhe do usuário

Criamos a classe User isolada para reutilizá-la:

touch app/user.ts

04.

1. Criando componente de

detalhe do usuário

Importando a classe User:

04.

2. Dizendo ao componente o

que exibir

04.

3. Importando o novo

componente

05.CRIANDO SERVICES

05.

Agenda

1. Criando Service que fornece os dados dos usuários 2. Criando mock de usuários 3. Recuperando os usuários do mock 4. Usando o service de usuários 5. Usando o hook ngOnInit para carregar os usuários 6. Usando promises

05.

1. Criando Service que

fornece os dados dos

usuários touch app/user.service.ts

05.

2. Criando mock de usuários

touch app/mock-user.ts

05.

3. Recuperando os usuários do

mock

05.

4. Usando o service de

usuários

05.

4. Usando o service de

usuários

05.

5. Usando o hook

ngOnInit para carregar os

usuários

05.

6. Usando Promises

06.UTILIZANDO ROTAS

06.

Agenda1. Quebrando o AppComponent 2. Adicionando rotas 3. Disponibilizando rotas 4. Criando um dashboard 5. Redirecionando para o dashboard 6. Adicionando a navegação 7. Separando htmls e css 8. Nova rota para exibir detalhes 9. Adicionando botão voltar 10. Link para a tela de detalhes 11. Adicionando novos estilos

06.

1. Quebrando nosso

AppComponent em

UserComponent Nossa lógica de usuário está toda no AppComponent, então renomeamos para UserComponent e criamos outro AppComponent.

06.

1. Quebrando nosso

AppComponent em

UserComponent

06.

2. Adicionando rotas

Precisamos adicionar a base tag no index para guiar o Router.

06.

2. Adicionando rotas

06.

3. Disponibilizando

as rotas

06.

4. Criando um dashboard

touch app/dashboard.component.ts

06.

5. Redirecionando

para o dashboard

06.

6. Adicionando a navegação

06.

7. Separando html e css

06.

7. Separando html e css

06.

8. Nova rota para exibir detalhes

06.

8. Nova rota para exibir detalhes

06.

9. Adicionando o botão voltar

06.

10. Links para a tela de detalhes

06.

11. Adicionando novos estilos

touch app/user-detail.component.css

touch app/dashboard.component.css

touch app/app.component.css

07.UTILIZANDO HTTP

07.

Agenda

1. Utilizando HttpModule 2. Simulando uma API web 3. Salvando os dados do usuário 4. Adicionando um usuário 5. Removendo um usuário

07.

1. Utilizando HttpModule

07.

2. Simulando uma API web

touch app/in-memory-data.service.ts

07.rm app/mock-users.ts

2. Simulando uma API web

07.

2. Simulando uma API web

07.

3. Salvando dados do usuário

07.

4. Adicionando um usuário

07.

4. Removendo um usuário

OBRIGADO!Hugo Magalhãeshugo@meuingresso.com