Angular Versão 2+

Angular Versão 2+

1. INTRODUÇÃO

   • FRAMEWORK
     • WEB SPA BASEADA EM COMPONENTES
   • LINGUAGENS/TECNOLOGIAS
     • HTML
     • CSS
     • TYPESCRIPT
   • FACILIDADES COM CLI
     • CRIAR PROJETO
       • ng new app
     • INSTALAÇÃO
       • npm i -g @angular/cli
     • CRIANDO COMPONENTE
       • ng g c <caminho>
     • RODANDO PROJETO
       • npm start

2. COMPONENTES

   • ESTRUTURA
     • .CSS
       • RESPONSÁVEL PELA ESTILIZAÇÃO DA PÁGINA
     • .HTML
       • RESPONSÁVEL PELA ESTRUTURA DA PÁGINA
     • .TS
       • RESPONSÁVEL PELAS FUNCIONALIDADES DA PÁGINA
     • .TEST
       • RESPONSÁVEL PELOS TESTES DA PÁGINA
   • FUNÇÕES
     • NO HTML
       • {{tittle}}
         • VARIÁVEL NA PÁGINA
       • <app-header></app-header>
         • INSTANCIA COMPONENTE OUTRAS PAGINAS
       • <app-footer></app-footer>
   • DECLARAÇÕES PARA USAR
     • app.module.ts
   • DIRETIVAS
     • Attribute Directives
       • Aparência e Comportamento
         • @Directive
     • Structural Directives
       • Adiciona ou remove elementos da DOM
         • *ngIf
   • BINDING
     • Property
       • Manipulação .ts com html
         • <table [dataSource]="products">
     • Event
       • Manipulação de eventos .ts com html
         • (click)="CreateProduct()"
     • One Way Data
       • Apresentação no input o valor da variável TS PARA HTML
         • <input [value]="nome">
     • Two Way Data
       • Altera no HTML e no TS FORMULARIOS
         • <input [(ngMoudle)]="nome">
   • ROTAS
     • ACIONAMENTO DOS COMPONENTES
       • <a routerLink="/products">
       • routes.ts

3. PIPES

   • FUNÇÕES PARA APRESENTAR DADO EM UM PADRÃO
     • {{produto.vencimento | date }}

4. PROGRAMAÇÃO REATIVA

   • PADRÃO OBSERVABLE
     • ORIENTADO A EVENTOS

5. SERVICES

   • ORGANIZAR E COMPARTILHAR DADOS ENTRE COMPONENTES
     • ng g s <caminho>
   • COMUNICAÇÃO BACKEND

6. VIEWS

   • REPRESENTA TELAS INTEIRAS
     • ng g c views/home
   • INJEÇÕES DE DEPEDÊNCIAS
     • .ts para navegação
       • private router : Router

7. ROTAS (NAVEGAÇÃO ENTRE COMPONENTES)

   • app-routing.module.ts
   • <router-outlet>
   • routerLink