Admin

tutorial completo de Angular, passo a passo, cobrindo exatamente onde cada coisa é feita, quando usar e para quê serve.
Vou estruturar em tópicos para que fique fácil de consultar.

📘 Tutorial Completo de Angular (Passo a Passo)

1. 🟢 O que é Angular

Framework front-end criado pelo Google.
Baseado em TypeScript.
Permite criar aplicações web SPA (Single Page Application).
Sua arquitetura se divide em:
- Modules (Módulos) – agrupam partes da aplicação.
- Components (Componentes) – blocos visuais e lógicos.
- Templates (HTML) – a interface exibida ao usuário.
- Services (Serviços) – regras de negócio e conexão com APIs.
- Routing (Roteamento) – navegação entre páginas.

2. 📂 Estrutura do Projeto (`ng new my-app`)

Ao criar um projeto, você terá algo assim:

src/
 ├── app/
 │    ├── app.component.ts        → Lógica principal do app
 │    ├── app.component.html      → Template principal
 │    ├── app.component.css       → Estilo do app
 │    ├── app.module.ts           → Declara módulos e componentes
 │    └── app-routing.module.ts   → Configuração das rotas
 ├── assets/                      → Imagens e arquivos estáticos
 ├── environments/                → Configurações por ambiente
 ├── styles.css                   → Estilo global da aplicação
angular.json                      → Configuração do Angular

3. 🧩 Componentes

Um componente é a menor parte visual/lógica do Angular.

Criar um componente:

ng generate component produtos

Isso gera:

produtos.component.ts → código e lógica (TypeScript).
produtos.component.html → interface (HTML).
produtos.component.css → estilos locais.
produtos.component.spec.ts → testes.

👉 Exemplo prático (produtos.component.ts):

export class ProdutosComponent {
  titulo = "Lista de Produtos";
  produtos = ["Óculos", "Lente", "Armação"];
}

👉 No produtos.component.html:

<h2>{{ titulo }}</h2>
<ul>
  <li *ngFor="let item of produtos">{{ item }}</li>
</ul>

4. 📦 Módulos

O arquivo app.module.ts é o coração da aplicação.

declarations → componentes usados.
imports → bibliotecas externas (ex: FormsModule, HttpClientModule).
providers → serviços.
bootstrap → componente inicial (normalmente AppComponent).

Exemplo (app.module.ts):

@NgModule({
  declarations: [AppComponent, ProdutosComponent],
  imports: [BrowserModule, FormsModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. 🔗 Templates e Data Binding

Interpolação

<p>{{ titulo }}</p>

Property Binding

<img [src]="imagemUrl">

Event Binding

<button (click)="comprar()">Comprar</button>

Two-way Binding

<input [(ngModel)]="nome">
<p>Olá, {{ nome }}!</p>

6. ⚙️ Services e Injeção de Dependência

Criar um serviço:

ng generate service produto

Exemplo (produto.service.ts):

@Injectable({ providedIn: 'root' })
export class ProdutoService {
  getProdutos() {
    return ["Óculos", "Lentes", "Armações"];
  }
}

Consumir no componente:

constructor(private produtoService: ProdutoService) {}

ngOnInit() {
  this.produtos = this.produtoService.getProdutos();
}

7. 🌍 HTTPClient (Consumindo APIs)

Importar no módulo:

import { HttpClientModule } from '@angular/common/http';

Criar serviço:

constructor(private http: HttpClient) {}

getProdutos() {
  return this.http.get('https://api.exemplo.com/produtos');
}

Consumir no componente:

this.produtoService.getProdutos().subscribe(data => {
  this.produtos = data;
});

8. 🛣️ Routing e Navegação

Configuração (app-routing.module.ts):

const routes: Routes = [
  { path: 'produtos', component: ProdutosComponent },
  { path: '', redirectTo: '/produtos', pathMatch: 'full' }
];

Linkar no HTML:

<a routerLink="/produtos">Ver Produtos</a>
<router-outlet></router-outlet>

9. 📝 Formulários

Template-driven

<form #form="ngForm" (ngSubmit)="enviar(form)">
  <input name="nome" ngModel required>
  <button type="submit">Enviar</button>
</form>

Reactive Forms

form = new FormGroup({
  nome: new FormControl('', Validators.required)
});

10. 🎨 Estilização

Local: component.css → afeta só o componente.
Global: styles.css → afeta tudo.
Libs: Angular Material, Tailwind, Bootstrap.

11. 🔄 Pipes

Usando pipes prontos:

<p>{{ preco | currency:'BRL' }}</p>
<p>{{ data | date:'dd/MM/yyyy' }}</p>

Criar um pipe customizado:

ng generate pipe capitalize

12. 🏗️ Diretivas

*ngIf → Condição.
*ngFor → Loop.
ngClass → aplica classes dinamicamente.
ngStyle → aplica estilos dinamicamente.

13. 📏 Boas Práticas

Criar módulos por área (ex: ProdutosModule, ClientesModule).
Usar serviços para lógica de negócio.
Manter componentes apenas com lógica de interface.
Organizar rotas em arquivos separados.

14. 🚀 Deploy

Buildar:

ng build --configuration production

Hospedar:

Firebase (firebase deploy)
GitHub Pages (ng deploy)
Vercel/Netlify → arrastar a pasta dist/.

✅ Com isso você já tem um guia completo do Angular, desde "onde coloco o CSS" até "como consumir API e fazer deploy".

Cancel

Tutorial Completo de Angular (Passo a Passo)