Publicado · en mejora
Framework · Desde 2016
Angular es un framework web basado en TypeScript y liderado por Google, con enrutamiento, formularios y HTTP incluidos para crear aplicaciones grandes.
Angular es un framework de frontend para crear aplicaciones web con TypeScript. Se publicó por primera vez en 2016 y lo desarrolla como código abierto el equipo de Angular en Google. Pese al nombre, es un framework distinto de AngularJS, que apareció en 2010. La interfaz se construye con componentes formados por una plantilla y una clase de TypeScript, el estado cambiante se sigue con signals y la lógica común se comparte mediante servicios proporcionados por inyección de dependencias.
Como el router, los formularios, HttpClient, la internacionalización y las utilidades de pruebas se distribuyen como paquetes oficiales, Angular es muy habitual en aplicaciones empresariales grandes y paneles de administración que varios equipos mantienen durante años. Su estructura uniforme y sus generadores de código hacen que los proyectos se parezcan entre sí, de modo que los nuevos desarrolladores se orientan rápido. El renderizado en el servidor y la generación de sitios estáticos se resuelven con las mismas herramientas.
La forma más rápida de empezar es instalar Node.js, crear un proyecto con Angular CLI y arrancar el servidor de desarrollo con ng serve. El sitio oficial, angular.dev, ofrece un tutorial interactivo que funciona en el navegador y guías detalladas por tema. Conviene tener nociones de TypeScript, porque el código de Angular se basa en clases, tipos y decoradores.
Cada componente importa directamente los componentes y directivas que usa, así que la interfaz se divide en piezas pequeñas e independientes sin módulos adicionales.
Con signal, computed y effect se declaran el estado y los valores derivados; Angular sabe exactamente qué cambió y actualiza solo las partes afectadas.
El router, los formularios reactivos, HttpClient, la internacionalización y el renderizado en servidor son paquetes oficiales, sin necesidad de elegir bibliotecas básicas.
Angular CLI se encarga de crear proyectos, generar código, el servidor de desarrollo, las pruebas y las compilaciones optimizadas para producción.
Angular CLI funciona sobre Node.js. Instala una versión LTS desde nodejs.org y comprueba que node y npm muestran su versión. Las versiones de Node.js compatibles aparecen en la tabla de compatibilidad de angular.dev.
node --version && npm --versionInstala Angular CLI de forma global con npm. Así tendrás disponible el comando ng; ng version muestra la versión instalada.
npm install -g @angular/cliCrea un proyecto nuevo con ng new y arranca el servidor de desarrollo. Tras responder a las preguntas sobre el formato de estilos y SSR, la aplicación se abre en http://localhost:4200.
ng new my-app && cd my-app && ng serve --openEl decorador @Component convierte una clase en un componente, es decir, una parte de la interfaz. El selector es el nombre de la etiqueta en HTML, {{ }} en la plantilla muestra un valor y (click) enlaza un evento con un método. Un signal se lee llamándolo como una función y se modifica con update; cuando cambia, Angular actualiza la vista automáticamente.
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 te llevan desde la instalación hasta las ideas clave de Angular.
Haz preguntas, comparte tu experiencia e intercambia opiniones sobre Angular.
Todavía no hay debates. Empieza el primero.
0 comentarios
Iniciar sesión · Inicia sesión para dejar un comentario.
Sé el primero en comentar.