Skip to content

Instantly share code, notes, and snippets.

@julianocanuto
Last active December 21, 2021 23:43
Show Gist options
  • Save julianocanuto/a1405f65db323e463c6ed7ba19fb46bf to your computer and use it in GitHub Desktop.
Save julianocanuto/a1405f65db323e463c6ed7ba19fb46bf to your computer and use it in GitHub Desktop.
Angular 13 - Conceitos fundamentais e comandos básicos do CLI

Trabalhando com Angular 13 CLI

Instalar Angular em um projeto

npm install -g @angular/cli@latest

Angular version

ng --version

Criar projeto

ng new nome-do-projeto

Rodar projeto

ng serve

Rodar projeto na porta 8080 e que seja visível para qualquer máquina da rede

ng serve --port 8080 --host 0.0.0.0

Rodar testes

ng test

Gerar arquivos para produção

ng build

Arquivo de configuração

Versão Arquivo de configuração
13 angular.json

Arquitetura modular

arquitetura-baseada-em-modulos

Estrutura de um módulo

Definição básica

Conteúdo Arquivo
CSS app.component.css
HTML app.component.html
Testes app.component.spec.ts
Componente app.component.ts
Configuração do módulo app.module.ts

Módulos, componentes e serviços

Módulo -> Componente -> Serviço

Criar módulo

ng g module nome-do-modulo

Criar componente

ng g component local/nome-do-componente

Criar serviço

Regras de negócio e chamadas de API.

ng g service local/nome-do-servico

O g nos comandos é de generate. Os serviços devem ser registrados como Providers.

Compartilhar classes de um módulo

Por convenção, cria-se uma pasta chamada Shared que conterá todas as classes que serão compartilhadas com outros módulos.

Diretivas

Bloco de código que adiciona um comportamento para um componente. Gera um atributo para uma tag.

Criar diretiva

ng g directive local/nome-da-diretiva

Binding

Bind duplo = Two way binding através do [(ngModel)]

Objeto $event

É um objeto padrão do navegador para a passagem de eventos.

Linguagem de programação

Typescript

Superset do Javascript https://www.typescriptlang.org/

Parâmetos opcionais em um construtor

export class Tarefa {

  constructor(
    public id?: number,
    public nome?: string,
    public concluida?: boolean
  ) { }
}

A "?" indica que o atributo é opcional na chamada do construtor.

Empacotador

Webpack

Empacotador de módulos que gera static assets. https://webpack.js.org/

Instalando dependência: Bootstrap 3

npm install --save bootstrap@3

Deploy de aplicação Angular no Github Pages

Referências

  1. https://www.udemy.com/course/formacao-angular-inicio-criando-7-projetos
  2. https://www.devmedia.com.br/angular-cli-como-criar-e-executar-um-projeto-angular/38246
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment