oliota / oliota.github.io

Projeto Modelo Entra21 - 2022

Repositório com modelo de projeto funcional para o frontend Angular

1. Para criar um projeto angular na raiz de um repositorio

   • ng new nomeProjeto --directory ./
   • routes y
   • styles css

2. importar template AdminLte3

   • npm install admin-lte@^3.0 --save

3. Importar dependencia para utilizar modais

   • npm install --save @ng-bootstrap/ng-bootstrap
   • npm install @popperjs/core

4. configurar angular.json

   • Incluir com css e js global
   • Trocar conteudo do "outputPath" por docs , pois será necessário configurar o github.io posteriormente
   • Aumentar capacidade no objeto "budgets" para 10mb onde inicialmente é em kb

5. criar componentes iniciais de login, header,menu e home

6. rotas iniciais

   • "" = LoginComponent
   • "home" = HomeComponent

7. Para que os components realizem twoWay databinding é necessario incluir na lista de imports do app.module

   • FormsModule
   • ReactiveFormsModule
   • Caso não gere o importe automaticamente utilize o exemplo de import
   • import { FormsModule, ReactiveFormsModule } from '@angular/forms';

8. Configurar layout principal no app.component.html

   • Sugestao:
     • app-header (contendo parte do layout da parte superior)
     • app-menu (contendo parte do layout lateral)
     • router-outlet (local onde os componentes são subistituidos ao navegar por rotas)

9. criar services iniciais em um diretorio separado

   • ng g s /services/seguranca (responsavel por bloquear rotas) é necessário colocar na lista de providers do app.module e incluir no contrutor dos componentes que o utilizam declaradamente
   • ng g s /services/usuario (responsavel por conectar ao backend e apenas isso) incluir no contrutor dos componentes que o utilizam declaradamente

10. Para que os services realizem conexões é necessario incluir na lista de imports do app.module

    • HttpClientModule
    • Caso não gere o importe automaticamente utilize o exemplo de import
    • import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

11. Em cada service que realize conexões

    • incluir em seu construtor
      • private http: HttpClient

12. realizar o build do projeto

    • ng build
    • após a conclusão realizar commt e push

13. no github > respositorio > settings > pages > branch

    • selecione a opção /docs e salve