Angular: o que é, para que serve e um Guia para iniciar no framework JavaScript

Angular: o que é, para que serve e um Guia para iniciar no framework JavaScript | Alura Cursos Online

import { Injectable } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs'; 
@Injectable({ 
  providedIn: 'root' 
}) 
export class DataService { 
  private apiUrl = 'https://exemplo.com/api'; // URL da API 
  constructor(private http: HttpClient) {} 
  getData(): Observable<any> { 
return this.http.get<any>(`${this.apiUrl}/endpoint`); 
  } 
}

import { Component, OnInit } from '@angular/core'; 
import { DataService } from './data.service'; 
@Component({ 
  selector: 'app-example', 
  template: '<button (click)="fetchData()">Fetch Data</button>', 
}) 
export class ExampleComponent implements OnInit { 
  constructor(private dataService: DataService) {} 
  ngOnInit() {} 
  fetchData() { 
    this.dataService.getData().subscribe((data) => { 
   // Manipule os dados recebidos aqui 
}); 
  } 
}

import { CommonModule } from '@angular/common'; 
import { Component } from '@angular/core'; 
@Component({ 
  selector: 'app-hello', 
  imports: [CommonModule], 
  standalone: true, 
  templateUrl: './hello.component.html', 
  styleUrl: './hello.component.css' 
}) 
export class HelloComponent {}

import { CommonModule } from '@angular/common'; 
import { Component } from '@angular/core'; 
@Component({ 
  selector: 'app-hello', 
  imports: [CommonModule], 
  templateUrl: './hello.component.html', 
  styleUrl: './hello.component.css' 
}) 
export class HelloComponent {}

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Nayanne Batista

Inscreva-se em nossa Newsletter

O que é Angular?

Explore por tópico

O que é AngularJS ou Angular.js? Quais as diferenças para o Angular atual?

Por que usar Angular Framework na sua aplicação front end?

Angular Framework vs. React: diferenças entre frameworks front end

Angular CLI

O que você precisa saber antes de começar com o Angular: pré-requisitos básicos

TypeScript no Angular

Componentes

Como funciona o ciclo de vida de componentes no Angular?"

Data binding

Diretivas

1) Diretivas Estruturais

2) Diretivas de Atributo

Serviços

Injeção de Dependências

Comunicação com Servidor

Módulos

Propósitos dos Módulos

1) Organização

2) Escopo de Funcionalidade

3) Reutilização

Módulo raiz (root module) no Angular

Standalone components

Lazy loading

Rotas

RxJS

Signals

Animações

Acessibilidade

Angular material

Testes

Build

Lançamentos regulares e versões LTS

Principais mudanças da versão 21

Vitest como Test Runner padrão

Estabilização de Signals: linkedSignal e resource

Fim do suporte (EOL) para versões legadas

Refinamento da Hidratação Incremental

Remoção automática de propriedades obsoletas

Como aprender mais sobre o tema

Aprenda mais sobre ANGULAR gratuitamente

Leia também