Criando aplicativos com Angular

 

Ementa: O curso tem como objetivo ensinar a estrutura básica do Angular, que é um framework muito utilizado para o desenvolvimento de aplicativos. O aluno aprenderá desde a instalação dos componentes necessários, até o desenvolvimento de alguns projetos envolvendo conceitos, como tabelas, inserção e alteração de dados, verificação de estoque, eventos, classes e serviços, botões, validação de dados, rotas e protocolos HTTP e HTTPS.

 

Mercado de trabalho/Público-alvo: Este curso é direcionado para pessoas que queiram aprender a desenvolver aplicativos com o Angular, que é um framework voltado para essa finalidade. O mercado de trabalho dessa área é bem amplo, de modo que, as pessoas com a formação adequada podem atuar como produtores independentes, freelancers ou, até mesmo, trabalhar para grandes empresas, visto que existem aplicativos para o computador, para rodar na web, para dispositivos móveis e, até mesmo, para alguns eletrodomésticos.

 

Carga horária: 12h

 

Conteúdo Programático

 

Aula 1 – Desenvolvimento de aplicativos

• Conhecer os diferentes tipos de aplicativos, suas vantagens e desvantagens: Aplicativo Nativo, Aplicativo Web e Aplicativo Híbrido;
• Compreender o que é o Framework Angular, bem como sua linguagem de programação JavaScript;
• Instalar o Node.js e o Angular-CLI;
• Conhecer os diferentes tipos de aplicativos; 
• Compreender o que é Framework Angular; 
• Criar um projeto utilizando o Angular-CLI; 
• Alterar o nome da aplicação; 
• Entender os arquivos e diretórios de um projeto gerado pelo Angular-CLI; 
• Usar na prática os diretórios.

 

Aula 2 – Projeto lista-compra: iniciando o projeto

• Entender o princípio LIFT;
• Criar o projeto lista-compra;
• Criar o componente “mercadorias” e programar para que o app inicialize por ele;
• Entender o princípio LIFT; 
• Configurar o título do projeto.

 

Aula 3 – Projeto lista-compra: configurando estilos

• Entender o que é DOM; 
• Compreender o que são diretivas; 
• Conhecer a diretiva ngFor; 
• Aprender sobre array;
• Iniciar a criação de uma lista de mercadorias;
• Entender o que é DOM, diretivas e array; 
• Adicionar mais itens à lista e trocar a lista por uma tabela; 
• Configurar o estilo da tabela e adicionar classes.

 

Aula 4 – Projeto lista-compra: identificando os itens da tabela

• Aprender a realizar verificações com a diretiva ngFor em uma lista: encontrar o índice da lista, identificar o primeiro e o último item da lista e verificar se o índice é par ou ímpar;
• Criar uma coluna na tabela destinada a receber a identificação dos itens; 
• Aprender a identificar o índice do item no loop da diretiva ngFor;
• Encontrar o índice do item de uma lista; 
• Identificar o primeiro e o último item da lista; 
• Verificar se o índice é par ou ímpar; 
• Aplicar verificações.

 

Aula 5 – Projeto lista-compra: organizando o estoque

• Ajustar a coluna Quantidade em estoque; 
• Adicionar uma nova coluna no projeto: Quantidade mínima;
• Alterar dados da tabela; 
• Entender a diretiva ngIf; 
• Compreender a diretiva ng-template.

 

Aula 6 – Projeto lista-compra: verificando o estoque

• Conhecer a estrutura Switch no Angular: ngSwitch, ngSwitchCase e ngSwitchDefault;
• Utilizar a estrutura ngSwitch para verificar o estoque.

 

Aula 7 – Projeto lista-compra: inserindo um formulário

• Aprender o que é um evento na programação; 
• Compreender os eventos de clique no Angular;
• Adicionar uma caixa de texto; 
• Aplicar a diretiva Focus e sua função para detectar o evento de quando a caixa for clicada; 
• Aplicar a diretiva FocusOut e sua função para detectar o evento de quando a atenção sair da caixa de texto; 
• Adicionar um botão e aplicar o evento Click e sua função para detectar o evento de quando for clicado;
• O que são eventos no Angular; 
• Adicionar um formulário: ajustar o layout, identificar os campos do formulário e programar o formulário.

 

Aula 8 – Projeto lista-compra: adicionando registros

• Adicionar botão; 
• Criar registro dos dados no formulário;
• Ajustar registros; 
• Adicionar dados à tabela.

 

Aula 9 – Projeto lista-compra: validação de dados

• Entender o que é a validação de dados e a sua importância;
• Validar o campo ID;
• Entender a importância de validar os dados; 
• Criar validação de limite de caracteres; 
• Impedir o cadastro de campos inválidos.

 

Aula 10 – Projeto lista-compra: classes e serviços

• Entender o que são Classes; 
• Compreender o que são Serviços;
• Criar uma classe chamada “Mercadoria”; 
• Comentar os itens da lista de mercadoria;
• Compreender o que são Classes e Serviços; 
• Configurar Serviços.

 

Aula 11 – Projeto lista-compra: trabalhando com rotas

• Aprender a importar rotas;
• Adicionar rotas para as mercadorias da lista de compras;
• Aprender a importar rotas; 
• Adicionar um novo componente (página) ao projeto: Definir rota e ajustar o template. 
• Utilizar parâmetro.

 

Aula 12 – Projeto app-httpclient: criando uma lista de usuários

• Entender o que é HTTP e HTTPS; 
• Conhecer a funcionalidade do HTTP no Angular;
• Criar o projeto app-httpclient;
• Criar uma lista de usuários.