Lançado · em melhoria
Framework · Desde 2016
Angular é um framework web baseado em TypeScript e liderado pelo Google, com roteamento, formulários e HTTP integrados para criar grandes aplicações.
Angular é um framework de front-end para criar aplicações web com TypeScript. Foi lançado em 2016 e é desenvolvido como código aberto pela equipe do Angular no Google. Apesar do nome, é um framework diferente do AngularJS, que surgiu em 2010. A interface é montada com componentes formados por um template e uma classe TypeScript, o estado que muda é acompanhado com signals e a lógica compartilhada fica em serviços fornecidos por injeção de dependências.
Como o roteador, os formulários, o HttpClient, a internacionalização e as ferramentas de teste vêm em pacotes oficiais, o Angular é muito usado em grandes aplicações corporativas e painéis administrativos mantidos por várias equipes ao longo de anos. A estrutura padronizada e os geradores de código deixam os projetos parecidos entre si, o que ajuda quem chega à equipe a se localizar rápido. Renderização no servidor e geração de sites estáticos usam as mesmas ferramentas.
O jeito mais rápido de começar é instalar o Node.js, criar um projeto com o Angular CLI e subir o servidor de desenvolvimento com ng serve. O site oficial, angular.dev, tem um tutorial interativo que roda no navegador e guias detalhados para cada assunto. Saber o básico de TypeScript ajuda bastante, já que o código Angular é feito de classes, tipos e decorators.
Cada componente importa diretamente os componentes e diretivas que usa, então dá para dividir a interface em partes pequenas e independentes sem módulos extras.
Com signal, computed e effect você declara o estado e os valores derivados; o Angular sabe exatamente o que mudou e atualiza só as partes afetadas.
Roteador, formulários reativos, HttpClient, internacionalização e renderização no servidor são pacotes oficiais, sem precisar escolher bibliotecas básicas.
O Angular CLI cuida da criação do projeto, geração de código, servidor de desenvolvimento, testes e builds de produção otimizados em um só fluxo.
O Angular CLI roda sobre o Node.js. Instale uma versão LTS pelo nodejs.org e confira se node e npm mostram suas versões. As versões do Node.js suportadas estão na tabela de compatibilidade do angular.dev.
node --version && npm --versionInstale o Angular CLI globalmente com o npm. Assim o comando ng fica disponível; ng version mostra a versão instalada.
npm install -g @angular/cliCrie um novo projeto com ng new e inicie o servidor de desenvolvimento. Depois de responder às perguntas sobre o formato de estilos e o SSR, o app abre em http://localhost:4200.
ng new my-app && cd my-app && ng serve --openO decorator @Component transforma uma classe em um componente, ou seja, um pedaço da interface. O selector é o nome da tag usada no HTML, {{ }} no template exibe um valor e (click) liga um evento a um método. Um signal é lido chamando-o como uma função e alterado com update; quando ele muda, o Angular atualiza a tela automaticamente.
src/app/app.ts
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Hello, {{ name() }}!</h1>
<button (click)="increment()">Clicked {{ count() }} times</button>
`,
})
export class App {
protected readonly name = signal('Angular');
protected readonly count = signal(0);
increment() {
this.count.update((value) => value + 1);
}
}
npm install -g @angular/cli
ng new hello-angular
cd hello-angular
ng serve --openSeis capítulos que levam você da instalação aos conceitos essenciais de Angular.
Tire dúvidas, compartilhe experiências e troque opiniões sobre Angular.
Ainda não há discussões. Comece a primeira.
0 comentários
Fazer login · Faça login para deixar um comentário.
Seja o primeiro a comentar.