/angular-pokedek

MVC

Primary LanguageTypeScript

Angular Pokedek

Projeto gerado com Angular CLI versão 9.1.7.

Scripts

ng serve

Executa o projeto em modo de desenvolvimento. Acesse http://localhost:4200/ para visualizá-lo.

reload automaticamente quando há alteração nos arquivos.

ng generate component component-name ou ng g c component-name

Gera um novo componente. Pode usar também: ng generate directive|pipe|service|class|guard|interface|enum|module.

ng build

Executa a construção da aplicação. Os são salvo no diretório dist/. Adicione --prod, para uma construção de produção.

ng test

Executa os testes unitarios via Karma.

ng e2e

Executas os testes ponta-a-ponta (end-to-end) via Protractor.

ng help

Mostra uma lista de ajuda sobre o Angular CLI. Ou veja direto aqui.

npm run env-config

Atualizar os arquivos de ambientes localizados no diretório src/environments/.

Os arquivos são gerados com base na configurações em env.config.ts. Modo para usar as variáveis de ambiente, por exemplo process, implicitamente.

Recomendável usá-lo apenas quando há atualização no arquivo env.config.ts.

npm run download-image

Baixa todas as imagens "icon" dos pokemons. Com base em pokemondb.net. Método usado apenas para ter a possibilidade de manipular as imagens, por exemplo usar canvasAPI.

npm run deploy

Executa a implementação da aplicação para github page. Os arquivos são gerado no diretório docs/.

Estudo

  • Routes
    • Lazy Component com Loader
    • Uso de params
    • Uso de queryParams
    • Tratamento de errors
  • Forms
    • Forms reativo
  • RxJs
    • Customização de operator rxJs
    • Tratamento de dados
    • Tratamento de loading
    • Criação de Observables/Subscriptions
  • Http
    • Tratamento de requisição
    • Customizaão do Interceptor
    • Guard Auth
    • Tratamento de errors
  • Material Design
    • Cusstomização de css
  • Desenvolvimento de paginação
  • Uso de API (pokeapi)
    • Criação dos Models
    • Solicitação multiplas
  • Typescript
    • Condições
  • Gerenciamento/Criação de ambiente
  • Input/ Output
  • Pipes
    • Criação de pipe
  • Diretivas
    • Criação de diretiva
      • Criação de carregamento de imagem preguiçoso (lazy-src-load)

Referências