3. Proyecto base: qué contiene y primer "Hola Mundo"

Reconocer el esqueleto antes de programar.

Requisitos

Herramienta	Para qué	Verificar
Node.js (LTS)	Ejecuta las herramientas de compilación	node -v
npm	Gestor de paquetes (viene con Node)	npm -v
Angular CLI	Crear, generar, compilar y servir el proyecto	ng version

npm install -g @angular/cli
ng new students-app        # Stylesheet: CSS · SSR: No
cd students-app
ng serve

ng serve compila y levanta la aplicación en http://localhost:4200; al guardar cualquier archivo, recompila y refresca el navegador.

Elementos principales del proyecto

students-app/
├── angular.json      ← configuración de construcción y ejecución
├── package.json      ← dependencias y comandos del proyecto
├── public/           ← activos estáticos que se copian sin procesar
└── src/
    ├── index.html    ← la única página HTML de la SPA
    ├── main.ts       ← arranca la aplicación
    ├── styles.css    ← estilos globales
    └── app/          ← componentes, rutas, modelos y servicios
        ├── app.component.ts
        ├── app.component.html
        ├── app.component.css
        ├── app.config.ts
        └── app.routes.ts

Elemento	Qué es
src/main.ts	Arranca la aplicación
src/app/	Componentes, rutas, modelos y servicios
public/	Activos estáticos que se copian sin procesar
angular.json	Configuración de construcción y ejecución
package.json	Dependencias y comandos del proyecto

Nombres de archivo según la versión

A partir de Angular 20 el CLI genera nombres sin sufijo (app.ts, app.html, clase App). Son equivalentes; en el curso usamos el estilo con sufijo (app.component.ts, clase AppComponent).

Primer "Hola Mundo"

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Hola Mundo';
}

src/app/app.component.html

<main>
  <h1>{{ title }}</h1>
  <p>
    Mi primera vista con Angular
  </p>
</main>

{{ }} es interpolación: lleva un valor de TypeScript al HTML. Cuando title cambia, Angular actualiza la vista; no hay que tocar el DOM a mano.

Prueba en clase

Ejecutar ng serve, abrir http://localhost:4200 y cambiar el valor de title. El navegador se actualiza solo.

¿Cómo llega AppComponent a la pantalla?

flowchart LR
    I["index.html<br/>&lt;app-root&gt;"] --> M[main.ts]
    C["app.config.ts<br/>providers"] --> M
    M -- bootstrapApplication --> A[AppComponent]

index.html contiene una etiqueta que el navegador no conoce:

src/index.html

<body>
  <app-root></app-root>
</body>

main.ts arranca Angular y le indica qué componente dibujar en ella (el que tiene selector: 'app-root'):

src/main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

app.config.ts registra las capacidades globales de la aplicación (rutas, cliente HTTP). Es el equivalente a una clase @Configuration de Spring:

src/app/app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),     // lo usaremos en Servicios
  ],
};

Comandos del día a día

Comando	Qué hace
ng serve	Servidor de desarrollo con recarga automática
ng generate component … (ng g c)	Genera un componente
ng generate service … (ng g s)	Genera un servicio
ng generate interface … (ng g i)	Genera un modelo
ng build	Compila para producción en dist/
ng test	Ejecuta las pruebas unitarias

Siguiente: Componentes.