Please enable JavaScript.
Coggle requires JavaScript to display documents.
Angular Hands On Inicial - Coggle Diagram
Angular Hands On Inicial
Instalar
NodeJs
Npm
Angular CLI
Cria Aplicação Nova
ng
new
nome_aplicacao
Entender Arquivos Básicos Projeto
tsconfig.json
ex: configura versão js destino
README.md
Explica como rodar o projeto
package.json
Contém as dependências do projeto
package-lock.json
Dependências locais travadas para o projeto
angular.json
Configurações do Angular
.gitignore
Arquivos que não serão enviados ao GIT
.editor.config
Configuração do editor do VS Code
src
De maior interesse para nós -
explicação
e2e
Para os testes da aplicação
Projeto todo
Aula 1
main chama app.module chama app.component
Todo projeto tem q ter ao menos 1 módulo e 1 componente
..spec.ts
Arquivo contém código de teste
component
Comportamento: .ts
Estilo: .css
Visão: .html
É uma class
Define templates
3 Infos básicas
Seletor: app-root
Template: .html
Estilo: .css
ng serve -o
monta o servidor e chama no browse
this.
Comando para acessar os elementos do escopo da classe
two way data biding
O que altera no html altera no ts vice versa
HTML
<ul> - unordened list - bolinha da lista
<ol> número da lista
<li /> linha
<p> inserção de parágrafos
<p> </p> insere quebra de linha
<h1> título principal
<i> trecho texto diferente
export class
Define uma classe pública
Facilitadores
ctrl+.
ambiente ajuda chamar elementos
alt+shift+f
Formata o documento
if (index !== -1) {
Índice não encontrado vem como -1
Bindings
Permite chamar funções entre o HTML e o Typescript
() = HTML > TS
[] = TS > HTML
[()] = TS <> HTML
Persistência: Storage
Session
Perde ao sair para outra aba
Local
Mesmo desligando a máquina não perde
Chrome
ctrl+shift+i
Abre o Developer Tools
Tem o device tool bar-responsividade
Typescript trabalha internamente com dados JSON
CSS
VH - “viewport height”, which is the viewable screen's height
display: flex
rgba(0, 0, 0, 0.39)
O 0.39 é o alpha. A sombra no caso
font-size: 5em;
em: tamanho sensível À pagina.
https://use.fontawesome.com
Uso de ícone com base em fonte: mais fácil e leve
. estiliza class; # estiliza id; senão estiliza componente html
modal>h1
estiliza item de dentro de modal
Build
ctrl+c
Para o servidor
ng build --configuration=production
gera o dist para subir no servidor