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