Angular 8 - Practice of Course Introduction to Angular 8 - Instrutor Weslley Holanda
This project was generated with Angular CLI version 12.2.1.
- Angular 8
- TypeScript
- Node.js
- Json
- Material Design
- Bootstrap
- Font-Awesome
- formulários e variáveis de template
- criado o método
retrieveById
emCourseService
- alterando o arquivo
course-info.component.html
com o formulário<form #courseForm="ngForm" *ngIf="course" ...
- validação dos campos e adicionando class aos elementos dinamicamente
- campos requeridos e tipos de valores esperados
- evento de botões, desabilitando botão
- validação do formulário ao enviar
- criado o método
- adicionada as classes components
app-nav-bar
eerror404Component
- rotas pelo
RouterModule
- não se usa tag
selector:
no component alvo quando se está utilizando rotas - no modules.ts, adicionar ao @NgModule, imports RouterModule, que espera recebeu um array de rotas
- rotas nativas, ex:
path:''
para raiz epath:'**'
para Error404 - rotas personalizadas, ex:
path: 'destino', component: DestinoComponent
- informar o destino da rota com
<router-outlet></router-outlet>
- rotas nativas, ex:
- não se usa tag
- rotas pelo
[routerLink]
- ex: atribuir o alvo com routerLink com os argumentos num array
<a [routerLink]="['/destino/destino_sub', objeto.id]" ...
- criar o componente para ser alvo dos links, declarar emdeclarations
no module.ts - ainda no module.ts, emRouterModule
, passar o path com o alvo e o id,path: 'destino/destino_sub/:id', component: DestinoComponent
- na class alvo do link,implements OnInit
, e a Injeção de dependência na classconstructor(private activatedRoute: ActivatedRoute) { }
- atribuindo uma class de estilo para o link ativo:routerLinkActivate="activeExemplo"
- ex: atribuir o alvo com routerLink com os argumentos num array
- Injeção de Dependência:
@Injectable
eprovidedIn: 'root'
para criar a injeçãoconstructor(private courseService: CourseService) { };
onde deseja obter o mesmo objeto
- não é uma boa prática, nas classes de serviços utilizar variáveis que possam ser modificadas pelos metodos dela, utilizar variaveis estaticas que nao serão alteradas entre os metodos.
- implementação do filtro da lista utilizando elemento two-way data binding
- pipe - altera a forma de como a propriedade é exibida no template
- ex. nativos
| date: 'dd/MM/yyyy'
e| lowercase
- personalizar um próprio pipe:
- criar:
@Pipe({ name: 'nomeDoPipe' })
,implements PipeTransform
,import { Pipe, PipeTransform } from '@angular/core';
- usar:
| nomeDoPipe: '-': ' '
e declarar a class do Pipe no module.ts correspondente
- criar:
- ex. nativos
- diferença entre os atributos
template
etemplateUrl
do @Component - adicionar tag do component ao html -> Ex: no arquivo da class do componente, dar nome ao atributo
selector: 'app-course-list'
e chamar com a tag<app-course-list></app-course-list>
no ponto do html que desejar exibir o elemento - instalar pacotes externos:
npm install bootstrap
enpm install font-awesome
- src / style.css:
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~font-awesome/css/font-awesome.min.css';
- stop dev server and Run
ng serve
- criação de classe
Course
para representar um novo tipo - criação de array vazio do novo tipo Course:
courses: Course[] = [];
- implements
OnInit
engOnInit(): void
- estrutura de repetição de linhas:
<tr *ngFor="let course of courses"/>
- importar imagens para a pasta
src/assets/images
- passar parametro da variável para o atributo do elemento
<img [src]="course.imageUrl"
- implements
OnChanges
engOnChanges(): void
@Input()
torna a variável elegível a receber informação de um componente externo- atributo
styleUrls
do @Component recebe um array de folhas de estilos
- interpolação -> Ex: {{variavel}}
- importar módulos
- components
@Component
- One-way data binding -> Ex: <input [ngModel]="nameFirst" name="nameFirst" >
- Two-way data binding -> Ex: <input [(ngModel)]="nameLast" name="nameLast" >
Presentation of the folder structure of an application's base project in Angular and important files
- package.json / angular.json
- src / index.html / main.ts / styles.css
- src / assets
- app / app.module.ts / app.component.ts / app.component.html / app.component.css / app.component.spec.ts
-
Create project
ng new NAME_PROJECT
-
Run
ng serve
for a dev server. Navigate tohttp://localhost:4200/
. The app will automatically reload if you change any of the source files.