Angular

Angular

1. O QUE É PRECISO SABER?

   • COMPONENTES
     • ENCAPSULA
       • TEMPLATE
       • METADATA
         • declarations
         • imports
         • providers (serviços)
       • DATA BINDING
       • DADO MOSTRADO
     • MOSTRAM DADOS
       • INTEGRAÇÃO
         • NODEJS
         • JAVA
         • .NET
         • PHP
         • PHYTON
     • CRIAR
       • AUTO
         • ng g c <nome>.component.ts
           • UPDATE app.module.ts
       • MANUAL
         • 2. CRIAR <nome>.component.ts
           • 2.3 APONTAR COMPONENT
           • 2.2 DEFINIR ANOTAÇÃO
           • 2.1 DECLARAR A CLASSE
         • 3. DECLARAÇÃO NO MÓDULO
         • 4. USAR COMPONENT TAG
         • 1. CRIAR DIRETÓRIO
           • src/app/
     • INTERPOLAÇÃO E PROPERTY BINDING
       • DATA BINDING
   • INJEÇÃO DE DEPENDÊNCIA
   • DIRETIVAS
     • ATRIBUEM FUNCIONALIDADES AOS
     • ESTENDEM O CÓDIGO HTML
   • ROTEAMENTO
     • SINGLE PAGE APLICATION
   • TEMPLATE
     • HTML
     • EVENT BINDING (BOTÃO)
   • METADATA

2. REQUISITOS

   • NODEJS
     • 1. npm install node
   • NPM
     • 2. sudo apt-get install npm
   • TYPESCRIPT
     • 4. npm install -g typescript
   • ANGULAR CLI
     • 3. npm install -g @ngular/cli
   • CHECAR
     • ng -v
   • PROJETO
     • ESTRUTURA
       • app.component.ts
       • app.component.html
       • app.module.ts
     • CRIAR
       • ng new <nome do projeto>
         • ng serve

3. MÓDULOS

   • CRIAR
     • 1. ng g m <nomedomodulo>
     • COMPONENTES + MÓDULOS
       • 2. AO CRIAR UM NOVO COMPONENT O APP.MODULE É ATUALIZADO E SUA DECLARAÇÃO TAMBÉM É FEITA. APAGUE-A SEGUINDO DE SUA IMPORTAÇÃO
       • 3. ACESSE AS DECLARAÇÕES DO MODULO CRIADO E DECLARE O COMPONENTE NÃO ESQUECENDO SUA IMPORTAÇÃO
       • 4. ALTERE O HTML DO COMPONENTE CRIADO
       • 5. PARA UTILIZAÇÃO DO COMPONENTE NO app.component.ts LEMBRE-SE QUE AGORA O COMPONENTE CRIADO PERTENCE AO MÓDULO CRIADO, COMO O COMPONENTE JÁ PERTENCE AO MÓDULO NÃO HÁ NECESSIDADE DE IMPORTÁ-LO NO app.module.ts
       • 6. COLOQUE A TAG DO COMPONENTE CRIADO NO app.component.html
       • 7. PARA QUE O COMPONENTE FIQUE VISÍVEL PELO app.component.ts NO MÓDULO CRIADO ADICIONE O METADADO exports:[component]
       • 8. FAÇA A IMPORTAÇÃO DO MÓDULO CRIADO NO app.module.ts EM CIMA E EM BAIXO
       • 9. CRIE UM NOVO COMPONENT NO DIRETÓRIO DO ANTERIOR E OBSERVE QUE ELE ATUALIZA O MÓDULO QUE VOCÊ ESTÁ TRABALHANDO
         • 10. PARA UTILIZAÇÃO DE UM NOVO COMPONENTE UTILIZE A TAG HTML
           • 11. PARA UTILIZAR O COMPONENTE FORA ADICIONE O METADATA EXPORTS
   • ORGANIZAÇÃO
   • PERMISSÕES
   • ESTRUTURA

4. SERVIÇOS

   • SERVIÇOS
     • BACKEND
   • ESTRUTURA

Imagens e arquivos do mapa