Olá leitores do blog Cursos Legais! É um prazer tê-los aqui para explorar o mundo do desenvolvimento web com o framework Angular. Se você está ansioso para aprender como construir aplicações web dinâmicas e interativas usando Angular, você está no lugar certo. Neste curso passo a passo, vamos cobrir desde os conceitos básicos até a construção de 10 exemplos práticos de aplicações utilizando o Angular.

Passo 1: Introdução ao Angular e Preparação do Ambiente

Vamos começar nossa jornada entendendo o que é o Angular e como configurar nosso ambiente de desenvolvimento.

Instale o Node.js: O Angular requer o Node.js. Você pode baixá-lo em https://nodejs.org/.
Instale o Angular CLI: Abra o terminal ou prompt de comando e execute o seguinte comando para instalar a Angular CLI: npm install -g @angular/cli.

Passo 2: Criando um Projeto Angular e Entendendo Componentes

Vamos aprender como criar um novo projeto Angular e entender os conceitos básicos de componentes.

Exemplo 1: Criando um Componente e Exibindo Dados

Crie um novo projeto: Abra o terminal e execute ng new meu-projeto-angular.
Navegue para a pasta do projeto: cd meu-projeto-angular.
Crie um novo componente: ng generate component meu-componente.
Abra o arquivo src/app/meu-componente/meu-componente.component.ts e substitua o conteúdo pelo seguinte código:

typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-meu-componente',
  template: '<h1>Olá, Mundo!</h1>'
})
export class MeuComponenteComponent {}

Adicione o novo componente ao template principal em src/app/app.component.html: <app-meu-componente></app-meu-componente>.
Execute o projeto: No terminal, execute ng serve e acesse http://localhost:4200 no seu navegador.

Passo 3: Trabalhando com Serviços e Injeção de Dependências

Vamos aprender como criar serviços e injetá-los nos componentes.

Exemplo 2: Criando um Serviço para Dados

Crie um novo serviço: ng generate service meu-servico.
Abra o arquivo src/app/meu-servico.service.ts e substitua o conteúdo pelo seguinte código:

typescript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MeuServicoService {
  dados: string[] = ['Dado 1', 'Dado 2', 'Dado 3'];
}

Injete o serviço no componente src/app/meu-componente/meu-componente.component.ts:

typescript
import { Component } from '@angular/core';
import { MeuServicoService } from '../meu-servico.service';

@Component({
  selector: 'app-meu-componente',
  template: '<h1>Meus Dados:</h1><ul><li *ngFor="let dado of dados">{{ dado }}</li></ul>'
})
export class MeuComponenteComponent {
  dados: string[];

  constructor(private meuServico: MeuServicoService) {
    this.dados = meuServico.dados;
  }
}

Passo 4: Roteamento e Navegação entre Páginas

Vamos aprender como configurar o roteamento entre diferentes páginas em uma aplicação Angular.

Exemplo 3: Configurando Roteamento para Páginas

Crie um novo componente para a página: ng generate component minha-pagina.
Configure o roteamento em src/app/app-routing.module.ts:

typescript
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MeuComponenteComponent } from './meu-componente/meu-componente.component';
import { MinhaPaginaComponent } from './minha-pagina/minha-pagina.component';

const routes: Routes = [
  { path: 'meu-componente', component: MeuComponenteComponent },
  { path: 'minha-pagina', component: MinhaPaginaComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Crie um menu de navegação em src/app/app.component.html:

html
<ul>
  <li><a routerLink="/meu-componente">Meu Componente</a></li>
  <li><a routerLink="/minha-pagina">Minha Página</a></li>
</ul>
<router-outlet></router-outlet>

Conclusão

Parabéns! Você concluiu a primeira parte deste curso introdutório ao Angular. Agora você tem uma compreensão sólida dos conceitos fundamentais do Angular e criou alguns exemplos práticos. Continue explorando e aprimorando suas habilidades em desenvolvimento web com Angular.

Sobre o Autor

Este curso foi elaborado por Rodrigo Ferreira da Silva, um analista de desenvolvedor de sistemas e big data apaixonado por compartilhar conhecimento sobre programação e tecnologia.

Continue sua jornada de aprendizado e construção de aplicações incríveis com o Angular!

Básico de Angular