ANGULAR

ANGULAR

Componentes
1. TEMPLATE
2. METADATA
  1. imports (módulos)
  2. providers (serviços)
  3. declarations (components)
3. CRIAR
  1. AUTO
    1. ng g c <nomedocomponent>
      1. Atualiza o app.module AUTO
  2. MANUAL
    1. 1. CRIAR DIRETÓRIO
    2. 2. CRIAR <nome>.component.ts
    3. 2.1 DECLARAR CLASSE
    4. 2.2 DEFINIR ANOTAÇÃO
    5. 2.3 APONTAR COMPONENT
    6. 3. DECLARAÇÃO NO MÓDULO
    7. 4. UTILIZAR TAG HTML
Serviços
1. CRIAR
  1. ng g s <nomedoservico>
  2. 1. Crie dentro do diretório do módulo
  3. 2. Como o serviço é ligado ao componente crie variáveis no componente para nome do portal e um array de cursos por exemplo
  4. 3. Crie um método getCursos() abaixo do construtor que return a lista de cursos
  5. 4. Faça a importação do serviço para o componente
  6. 5. Declare uma variável para serviços e faça sua instância
  7. 6. Atribua um valor a variavel com o this
  8. 7. O angular se comunica com o servidor por meio de um objeto http, utilize a injeção de dependência para automatizar essa tarefa
  9. 8. Para esta injeção utiliza-se o decorator @Injectable presente no serviço: constructor (variavelService:servicoCriado)
  10. 9. Com a variável criada utilizaremos o this para chamar o método getCursos() da seguinte forma: this.cursos = this.variavelService.getCursos();
  11. 10. Por fim adicione o provider no módulo
DataBinding
1. Interpolação {{ }}
2. Property Binding (images)
3. Event Binding (button)
4. Two way binding (forms)
Requisitos
1. NodeJS
  1. 2. npm install node
2. Npm
  1. 1. sudo apt-get npm
3. Angular cli
  1. 3. npm install -g @angular/cli
4. Typescript
  1. 4. npm install -g typescript
Módulos
1. CRIAR
  1. 1. ng g m <nomedomodulo>
  2. 2. Ao criar um novo componente o app.module é atualizado seu import bem como sua declaração apague os dois
  3. 3. Declare o componente no módulo criado e o importe
  4. 4. Agora o componente pertence ao módulo não há necessidade de importá-lo no app.module.ts
  5. 5. Coloque a tag do componente criado no app.component.html
  6. 6. Para que o componente fique visível a aplicação adicione o metadado exports:[component]
  7. 7. Faça a importação do módulo criado no app.module.ts em cima e em baixo
  8. 8. Ao criar um novo componente o módulo é atualizadp para utilizar a tag html adicione o componente ao metadado exports
Diretivas
1. Diretivas de atributos
  1. Modifica a aparência
    1. <h2 [style.color]="'red'">Olá {{ nomeusuario }}
    2. ngStyle
2. Diretivas estruturais
  1. Modifica a estrutura do DOM
    1. <h2 *ngIf="logado">Olá {{ nomeusuario }}</h2>
    2. *ngFor="let funcionario of funcionarios"
3. Componentes
  1. Template
    1. <lista-pessoas></lista-pessoas>
  2. Angular Material
    1. npm install --save @angular/material @angular/cdk
Data-binding
1. Interpolação
  1. Componente -> Template
2. Property-binding
3. Event-binding
4. Two way data-binding
  1. ngModel (FormsModule)
5. Binding de propriedade com INPUT
  1. 1. Crie um novo componente
  2. 2. Este componente será o card de funcionarios
  3. 3. Para separar esta função em um componente mova o código para seu respectivo html e no lugar coloque a tag html <do-componente>
  4. 4. As variáves não irão funcionar pois saíram do escopo do app, para isso, é necessário criar uma nova variável dentro do componente criado para que ela fique visível novamente, dessa vez com o uso do decorador @INPUT
  5. 5. Além disso, no app.html deve-se passar a propriedade do funcionário que está sendo iterado por meio do property binding
  6. BInding de eventoscom OUTPUT e EVENTMITTER
    1. 1. Crie um componente para o formulário do usuário
    2. 2. Mova o código que está no app html para o componente criado
    3. 3. Utilize a tag html no lugar onde o código foi retirado
    4. 4. Perceba que mais umas vez as variáveis e funções já não pertecem mais ao escopo do componente criado, por este motivo, não irão funcionar!
    5. 5. A declaração da variável o do método devem ser criadas no novo componente pegue-as do app.componente e coloque-as no novo componente, exceto o array de funcionarios, o app precisa dele.
    6. 6. Mas se mover quebra o método adicionar, esse cabaré é resolvido com o EMITTER
    7. 7. Crie uma variável que instancia ele. new EventEmitter não esqueça sua importação e com o decorator @Output()
    8. 8. Feito isso, vá no app.component.html ecrie um binding de evento (variavelCriada)="metodoDoAppComponent"
    9. 9. Instacie um objeto de funcionario com const funcionario
    10. 10. Abaixo do dessa instânca coloque this.funcionarioAdicionado.emit (funcionario);
    11. 11. Quando acontecer algo no componente filho que é de interesse do pai (appcomponente) para ter conhecimento do está acontecendo é necessário um bind de evento que irá chamar o método do pai
    12. 12. O método do pai aoAdicionar irá receber um parametro funcionario e adicionar ele com push
    13. 13. Este parametro não esta sendo declarado no app,component.ts, para iss, no app.component.html no método de binding de evento faça aoAdicioonar($event) ele fará a ligação do que está sendo feito no parametro do .emit
Roteamento

Next up

Description

Resource summary

Media attachments

Similar

	Created by Tayrone Torres over 6 years ago