tutorial completo de Angular , passo a passo, cobrindo exatamente onde cada coisa é feita, quando usar e para quê serve . Vou estrutura...

 

 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)

1. Importar no módulo:

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

2. Criar serviço:

constructor(private http: HttpClient) {}

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

3. 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

1. Buildar:

ng build --configuration production

2. 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".