Esse exercício foi feito antes da aula, na verdade é da semana 3. Eu refiz abaixo.
Clique aqui para ver o código
Aqui eu pensei em criar uma tabela, porém não quis extrapolar o que foi solicitado.
Este projeto foi criado para acompanhamento do curso de Angular com a empresa MJV. Aqui deixarei registrado anotações importantantes e também meus exercícios separados por semana.
Ao criar o projeto angular ele vem com as configurações padrão, você pode criar componetes (pastas) para "montar" sua aplicação, como por exemplo: Header.
Esse compenete poder ser compartilhado com outros componentes para facilidar no desenvolvimento. Não esquça de passar a rota dos componentes criados que fica no documento TS pra o app.component.html que será o responsável por carregar o projeto.
- npm intall -g @angular/cli
programa operável ou um arquivo em lotes.
Resolvi esse problema excluindo o nodeJs e instalando novamente. Após isso desintalei o angular e limpei o cache com os comandos:
npm uninstall -g angular-cli npm uninstall --save-dev angular-cli npm cache clean
Depois reinicei o pc e instalei o angular cli novamente: npm install -g @angular/cli
- ng new
- nmp install
Os Modules gerenciam os components e é com eles que nós podemos modularizar nossa aplicação. Resumindo, bem a grosso modo: É como se o Module fosse um cômodo e os Components os móveis que preenchem aquele cômodo. Com os módulos você cria seções para a mesma aplicação.
- ng generate module
Dentro da pasta app.modules.ts >
Exemplo:
Dentro da pasta modules.ts >
Exemplo:
Vá dentro dos componetes exportados e copie a rota no arquivo TS pra colar no app.componet.html
Exemplo de rota:
Para fazer interpolação de TypeScript com HTML:
- Crie as variáveis dentro do arquivo TS, depois coloque detro das tags no arquivo HTML
Exemplo:
- ng g pipe shared/pipes/phone Material de consulta: Angular Document
- Serve para trocas de página da aplicação
Para começar crie um projeto com ng new nomeProjeto> Escolha utilizar o routing> Repare que isso gerará um arquivo chamado routing:
Agora no app componet não pode apagar tudo, lá terá uma rota:
OBS: Um exemplo de como é feito está aqui nesse projeto na semana 5, criei a pasta login, depois a pasta login/componets depois o módulo de login, depois foi criado a pasta login/pages (sem a tag app rota porque será via routing) depois foi digitado o comando para criação da pages.
Crie seus módulos> Para criar as páginas digite o comando: ng g c caminho/nomepagina --skip-selector>depois de criado você deve exportá-la>no app importe o modulo da página no app módule> no app routing crie as rotas de navegação:
Agora pra arrumar pelo menu de navegação: Dentro da page coloque o header(ele será responsável pela navegação das pages), conteúdo e footer (lembre-se que são componentes != de pages):
Dentro do header que será compartilhado com todas as pages crie uma função que recebe a url e importe o router.
navigateByUrl(url: string) {
this.router.navigateByUrl(url);
}
Depois dento da tag HTML em header crie a condição com a troca:
A segunta maneira é entrar no shared module e importar o routerModule e depois colocar o [routerLink]:
Para que o usuário seja direcionado direto para a pagina desejada dentro do app component deixe o seguinte comando:
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent }
];- ng g s nome
Automaticamente será criado um novo arquivo com a seguinte estrutura:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ProductsService {
constructor() { }
}O papel dessa service será gerenciar os dados de produtos, na semana 6 continuei meu projeto da semana 5 retirei o array de produtos de produtos e criei as funções dentro do services para retornarem os produtos.
Depois criei uma nova tela para exibir detalhes
getProducts() {
return this.products;
}
getById(id: number) {
return this.products.find((product) => { product.id === id});
}- ng serve -o
- ng g component
- ng g d