ANGULAR 7 COMPLETO

Carga horária: 60hs

Objetivo: Preparar o profissional para criar aplicações Web E LAYOUT * utilizando Angular7 com Typescript, Javascript, HTML5 e interface (SPA) responsiva com Bootstrap. Princípios de Programação Funcional, Testes Unitários (Jasmine & Karma), compilação e publicação do projeto na nuvem. 

* Layouts utilizando os mais recentes Frameworks de Webdesign interagindo com o Angular 7, HTML5, CSS3, Bootstrap4.1, PrimeNG, Angular Material, possibilitando a criação de portfólios com galerias de imagens, sistemas com formulários, validações e gráficos e sites responsivos. Hoje em dia, o design conta mais do que nunca com os conceitos de usabilidade e acessibilidade.

Próximas turmas

Frequência Horário Início Término Valor
Quinta e Sexta 18:00/22:00h 23/05/2019 18/07/2019 10XR$225,00 (AS AULAS DE SEXTA SÃO QUINZENAIS)

MÓDULO 1 (VISUAL FRONT ANGULAR 7)

BOOTSTRAP 4.1:

·             Instalação

·             BootstrapCDN

·             Temas

·             Layouts

o   Containers

o   Grid (12 colunas)

o   Media

o   Margin, Padding, Toggle

·         Conteudos

o   Cabeçalhos

o   Listas

o   Tabelas

o   Formatação

o   Formularios

o   Tipografia

o   Codes

o   Imagens (Responsivas, alinhamento, miniature)

·         Tabelas

o   Dark

o   Striped

o   Hover

o   Small

o   Responsivas

·         Components

o   Links

o   Badges

o   Breadcrumb

o   Botões (Outlines, Tamanhos, Ativos, Inativos, Toggle, CheckBox, grupo de botões)

o   Cartões (cards)

o   Carrousel

o   Alertas

o   Accordion

·         Menu

o   Menu responsive

o   Dropdown

o   SplitButton

o   DropUp

o   Forms

§  Group

§  Grid

§  Horizontal

§  In line

§  Tooltips     

o   Selects Menus

o   Input groups

o   Jumbotron

o   Listas

o   Modal

o   Nav Navbar (Barra de Navegação)

·         nav flex

o   Paginação

o   Popover

·         Tooltip

 

 MATERIAL ANGULAR:

·         Instalaçao (material, animações e icones)

·         CDN

·         Importações

·         Temas

·         Icons

·         Formularios

o   Autocomplete

o   Checkbox

o   Input

o   Select

o   Slide

o   Datapicker

·         textArea

·         Hint

·         Contador de caracteres

·         Navegação

o   Menu

o   Toolbar

·         Layout

o   Cards

o   Painel expansível (accordion)

o   Grid

o   List

o   Tabs

·         Botoes

o   Toggle

o   Chips

o   Icon

o   Progress spinner

o   Progress bar

·         Modal

o   Dialog

o   Snackbar

o   tooltip

·         Tabelas

o   Paginator

o   Tabela ordenada

 


 

PRIMENG:

·         Instalação

·         Font Awesome

·         Animações

·         pMenuBar

·         OverlayPanel

·         pToolbar

·         pTooltip

·         pButtons

·         pFieldset

·         Cards

 

CSS:

·         Alinhamento de imagens

·         Avatar

·         Margens

·         Bordas arredondadas

·         Padding

·         Links

·         Tipos de fontes

·         Sombras

·         Filtros

·         Fieldset

·         Imagem de fundo

·         Zoom

·         Font-Awesome

·         Google Fonts

·         Z-index

·         Carrossel

·         Comandos acessibilidade

·         Gerar Favicon

·         Transitions

 

 

MATERIAL DESIGN BOOTSTRAP:

·         Waves

·         Efeitos wow (script)

·         Rotate

·         delay

 

 

HIGHCHARTS JS:

·         Instalação para Angular

·         Exportação de gráfico PDF

·         Graficos em colunas, linhas

·         Categorias

 

GMAPS:

·         Gerar apikey

·         Configurar api

 

JAVASCRIPT:

·         Máscara

·         Validação de campos

·         Menu lateral

·         Banner com vídeo

·         Scrolling page (parallax)

 

MÓDULO 2 (ANGULAR 7 PARA WEBAPPS RESTFULL)

  • Diferenças da Arquitetura baseada em componentes (Webcomponents architecture) para arquitetura MVC (Model, View, Controller)
  • Visão geral do ECMASCRIPT 6 e novos padrões de projeto
  • Diferença do Angular1, 2, 3,4, 5, 6 e 7
  • Classes
  • Princípios de orientação a objeto (OOP)
  • Modificadores de acesso: public, private, protected e default
  • Tipos de variáveis: Boolean, String, Number, any, Array, Object, Date
  • Typescript compiler: Geração de Javascript com Typescript
  • Package.json e Tsconfig.json
  • Clausura
  • Declaração de métodos e métodos autoinvocados
  • Analogia do Typescript com o JAVA
  • Loops: for, while, do while, continue, break;
  • Objetos Globais vs Locais
  • Diferenças entre declaração de variáveis e métodos: var, let, const, readonly, static, abstract
  • Sintaxe de Construtores
  • Construtores cheios e vazios (Sobrecarga)
  • Métodos públicos e privados
  • Argumentos opcionais e obrigatórios de métodos
  • Getters & Setters
  • Entidades, Enums, Constantes
  • Interfaces e Herança (Implents & Extends)
  • Métodos Abstratos
  • Serviços e injeção de dependência
  • Entendendo Prototype
  • Callbacks
  • Call & Apply
  • Sort para ordenação de Arrays
  • Entendendo Promises
  • AJAX e chamadas assíncronas
  • Serviços REST (GET, POST, PUT, DELETE) com protocolo HTTP
  • Entendendo formato de dados (JSON, JSONP, XML, etc)
  • Headers de requisição
  • Interceptando requisições
  • Tópicos de Segurança da Informação: Authorization, Oauth,, Basic Authentication
  • Entendendo Components e two-way-data-binding
  • Entendendo o app.module (NgModule)
  • Formulários reativos controlados na Classe (FormsModule)
  • Regex, Máscaras e validação de campos
  • Rotas
  • Decorators
  • Entendendo Observables e o subscribe
  • Criação de componentes e comunicação com @Inputs, @Outputs e Events
  • LocalStorage e SessionStorage
  • Conversão de variáveis (truncamento, arredondamento, etc)
  • Autenticação e Login de aplicações
  • Animações
  • Temas, CSS, SCSS
  • Bootstrap para criação de elementos: tables, buttons, inputs, panels, accordions, menu, forms
  • Angular generators com angular-cli: component, directive, pipe, service, class, interface, enum, module
  • Compilando o projeto como ng build
  • Condicionais de view ( ngIf, ngHide, ngClass, ngStyle, ngSwitch)
  • Inputs File e tratamento de imagens (Base64, binary, FileReader, blob, atob, btoa)
  • Entendendo princípios de programação funcional (filter, map, reduce)
  • Design Patterns

Testes Unitários

  • Automatize sua aplicação com o JASMINE e KARMA
  • Criação de testes unitários de integração de API
  • Testando microserviços antes da integração com o backend
  • Garantindo integridade do código

Aplicações e Projetos a serem realizados no curso

  • Criação de iframes e mapas
  • Aplicação de Listagem e Busca de produtos  (autocomplete) com persistência de imagens e Carrinho de Compras
  • Login de usuários com autenticação JWT
  • Envio de email com o log da aplicação via SMTP
  • Criação de gráficos para monitoramento de aplicações e Deploy da aplicação no Heroku