Angular repo para estudos de estrutura

Create new - ng new app

angular é SPA - single page aplication, caso vc não opte por rederização SSR ele criará uma SPA

Arquivos

• angular.json : configurações do porjeto, builds, inicialização, paths, otimizações, limitações, testes
• packeage.json e lock: dependencias, scripts para rodar o porjeto e os testes unitários
• tsconfig - configuração do typscript global
• tsconfig.app - configuração específica para o nosso projeto
• tsconfig-spec - quando estiver rodando o teste unitário
• src: código fonte style.css -> css global main.ts -> ele inicia o projeto angular index.html -> invoca o app que tem as páginas -> SPA -> carrega só uma página no navegador que é essa -> mesmo arquivo html -> td manipulado pelo JS -> sem JS não funciona nada em SPA
  • app: tem os componentes cada componente é composto por 4 arquivos, o .component.ts, .component.html, .component.spec.ts eo .component.css
    • app.routes -> rotas
    • app.config.ts -> configuração de como renderizar, injeção de dependencia, providers -> se alguém pedir isso "apiurl" entregue isso "https://sitesuperfoda.com.br/home"
    • app.component -> onde vc importa as outras páginas para o SPA funcionar

Sobre componentes

obs: uma sintaxe mtt comum do .ts é que ele contém a rota a ser chamada. Note que no html base de SPA ele chama a rota "app-root" por padrão, mas isso poderia ter qualuqer nome. Ele está chamado a página que dentro do arquivo ts estiver escrito app-root

Como rodar

npm start -> se estiver no poackeage configrado esse comando vai fazer o "ng serve" => scripts {"start" : "ng serve"}

Components decorator

@component é um decorador que indica ao angular que a classe abaixo é um component função -> integrar todos os arquivos do componente. Template, css, seletor (como referenciar esse componente em outro componente.), standalone tem "imports :[]", antes td ntinha um módulo que é o q diz o que pertence a esse compnonente, oq deve ser exportado, importado, etc

estados

para criar estados no angular usa-se variável ex:

import { Component } from '@angular/core';

@Component({
    selector: 'app-home',
    imports: [],
    templateUrl: './home.html',
    styleUrl: './home.css'
    })
    export class Home {
    boll = false
    updateboll(value:boolean){
        this.boll = value;
    }
}