Angular standalone components
Raphael Ramos
Posted on April 14, 2023
Vídeo desenvolvendo na prática:
A estrutura do Angular é baseada em componentes.
Os Componentes são partes de interface. Blocos compostos por um template, um estilo e uma classe.
Antes do Angular 14 era necessário um módulo, que é um mecanismo para agrupar components, directives, pipes e services relacionados.
Mas agora com as APIs do standalone components, pode ser totalmente independente, deixando NgModule opcional, o que torna a criação de aplicativos Angular mais simplificada.
Os módulos não foram descontinuados e ainda podem ser usados. Inclusive é possível usar componentes com módulos e sem na mesma aplicação.
Eu tenho criados novos componentes das aplicações com essa API, mas ainda não migrei as anteriores.
Etapas executas no vídeo:
Criamos o projeto
ng new angular-standalone
Criamos o componente verses passando a flag --standalone
ng generate component verses --standalone
Ao usar a flag, foi criado nosso componente sem o arquivo de módulos e com o sinalizador standalone: true e imports dentro do arquivo de componente.
@Component({
selector: 'app-verses',
standalone: true,
imports: [CommonModule],
providers: [],
templateUrl: './verses.component.html',
styleUrls: ['./verses.component.css']
})
Também criamos o serviço chamado verses na mesma pasta para consumo da API
ng generate service verses/verses
@Injectable({
providedIn: 'root'
})
export class VersesService {
constructor(private httpClient: HttpClient) { }
getVerse(): Observable<Verse> {
return this.httpClient.get<Verse>('https://www.abibliadigital.com.br/api/verses/nvi/sl/23').pipe(take(1));
}
}
Vamos adicionar o serviço e modulo HttpClientModule no nosso componente
@Component({
selector: 'app-verses',
standalone: true,
imports: [CommonModule, HttpClientModule],
providers: [VersesService],
templateUrl: './verses.component.html',
styleUrls: ['./verses.component.css']
})
Para carregar a rota desse componente em lazy loading, o que faz carregar apenas ao acessar a rota, usamos o loadComponent;
{
path: '',
title: 'Verses',
loadComponent: () => import('./verses/verses.component')
.then(c => c.VersesComponent)
}
Se você está em uma versão do Angular anterior a 13, recomendo o upgrade devido a ganhos de performance que essa versão traz.
Na versão 14 foi introduzido principalmente o standalone components, e se tornou estável na versão 15.
Posted on April 14, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.