Angular

Sobre

Instalação

Para a instalação do Angular vamos precisar de:

• NodeJs (ver a instalação nesse artigo – clique aqui).
• AngularCli (através do NPM).
  • comando: npm install -g @angular/cli (instalação)
  • glossário: -g: global
  • comando: ng v (verificar os pacotes instalados)

Dica: VS Code – ferramenta para a escrita do código-fonte.
https://code.visualstudio.com/download

Gerando uma aplicação

ng new nome-aplicacao –prefix

• Na linha de comando, criar primeiro o diretório(workspace) onde deseja gerar a aplicação, e entrar nele, depois executar o comando acima (ele irá criar outro diretório com o nome da aplicação).
• –prefix: utilizado na frente de cada componente criado por nós.
• Exemplo: ng new nintendo-academy –prefix=nad

Para testar o que foi criado:

• entre no diretório da aplicação pela linha de comando, e execute o comando:
  • ng serve
  • acessar: http://localhost:4200

Alguns arquivos do projeto:

• package.json: segue a estrutura do node, arquivo de configuração da aplicação onde vão ter todas as dependências do projeto;
• angular.json: configurações gerais do projeto como diretórios, scripts, testes, etc.
• styles.css: configuração global de estilos.
• polyfills.ts: incluir scripts que dão suporte a funcionalidades novas a navegadores antigos.

Módulos

Módulo é uma unidade que contém classes, interfaces, funções e variáveis, com o objetivo de deixar o conteúdo de um arquivo isolado do restante da aplicação, ou seja, organiza o conteúdo.

JavaScript tradicional só possui um escopo global e isso traz uma série de problemas pois é muito fácil sobrescrever o que foi escrito em um arquivo por outro arquivo.

A ideia do Módulo é justamente corrigir isso e trazer o isolamento necessário para que não apareçam comportamentos estranhos decorrentes de declarações com o mesmo nome. Apenas quando for necessário você exporta ou importa as declarações de outros módulos.

Módulos em TypeScript usam a sintaxe do ECMA Script 2015, funciona nativo na plataforma NodeJS e no Browser é necessário usar carregadores de módulos como RequireJS ou SystemJS.

Para declarar um módulo, basta você escolher o que exportar dentro de um arquivo.

NameSpace

?

Componentes:

• São pequenas partes independentes e reusáveis.
• Em angular, são classes que tem determinado ciclo de vida.
• Possuem um template para definir a aparência.
• resumindo, são elementos personalizados.
• Possuem um selector (tag) para ser usada em outras partes da aplicação.
  • Usar o decorator @Component para definir o nome da tag (selector).
  • E informar o caminho do componente (templateUrl).
  • Informar o caminho do arquivo de estilo CSS (styleUrls).
  • Informar em qual módulo Angular o componente está.

Criando nosso primeiro componente:

• dentro do diretório do projeto.
• ng generate component nome-componente – – spec=false (ou)
• ng g c nome-componente – – spec=false (*dois traços juntos sem espaço na opção spec)
• exemplo:

ng g c rodape --spec=false

• o parametro: –spec=true gera arquivos de teste de unidade do componente criado, podemos colocar false para não criar os arquivos de testes.
• –spec está deprecated, usar no lugar a opção abaixo:

--skipTests=true|false

• Sempre que criamos um componente, listamos ele em um módulo, o módulo raiz é o módulo geral que é o app.module.ts, mas dependendo da situação podem ser criados em outros módulos.
• criado em src>app>nome-componente>arquivos-do-componente
• inclui a existência do componente novo no app.module.ts
• personalizar o html do componente.
• chamar a tag do componente no html principal da aplicação (app.component,html) – tag do nosso exemplo: prefix+nome-componente = nad-header

ngOnInit(): é um método para colocar alguma funcionalidade na inicialização do componente, é garantido chamar pelo menos uma vez durante o ciclo de vida do componente.

Property Binding

Property Binding é quando você quer linkar o valor de uma propriedade de um elemento a uma expressão angular que pode avaliar a propriedade de um componente, método ou até umas expressão mais elaborada.

A Sintaxe de Property Binding é feita com colchetes ao redor da propriedade do elemento que você deseja atribuir valor e pode ser aplicada a qualquer propriedade de um elemento do DOM.

One-Way Binding, sempre em um sentido, do componente para o template.

Exemplo:

–No componente:
isGamer: boolean = true;

–No template:
<div [hidden]=”!isGamer” >
Sim, é Gamer!
</div>

Passando valores para um componente

?

Diretivas

• Componentes são diretivas com templates, portanto componentes herdam tudo de diretivas.
• Uma diretiva comum e simples, serve pra adicionar comportamento a um elemento do DOM, mas não tem o template de um componente.
• Temos 3 tipos de Diretivas no Angular:
  • Componentes.
  • Estruturais (que mudam o template ou estrutura do Dom. Ex: ngFor, ngIf, ngSwitch).
  • Atributos (Associa um atributo a um elemento do DOM e um determinado comportamento é aplicado aquele elemento).
• Podem vir acompanhadas de um asterisco (*).

Operador de Navegação Segura

?

Eventos de Componentes

?