Etiquetas

Angular (inicio)


Curso Angular desde Cero - Clase 1

¿Qué es Angular?

Angular es un framework de JavaScript desarrollado por Google para crear aplicaciones web modernas.

Con Angular puedes desarrollar:

  • Sistemas administrativos
  • Dashboards
  • ERP
  • CRM
  • Sistemas escolares
  • Aplicaciones empresariales
  • Aplicaciones móviles (Ionic)

Ejemplo:

Sistema de Ventas
├── Inicio
├── Clientes
├── Productos
├── Ventas
├── Reportes
└── Configuración

Todo eso puede hacerse con Angular.

Requisitos

Necesitas instalar:

1. Node.js

Descarga la versión LTS desde:

https://nodejs.org

Verifica la instalación:

node -v

Ejemplo:

v22.5.0

También verifica npm:

npm -v

2. Visual Studio Code

Descárgalo desde:

https://code.visualstudio.com

3. Instalar Angular CLI

Angular se crea mediante una herramienta llamada Angular CLI.

Instálala:

npm install -g @angular/cli

Verifica:

ng version

Obtendrás algo parecido a:

Angular CLI: 20.x.x
Node: 22.x.x

Crear el primer proyecto

Abre una terminal.

Escribe:

ng new mi-primer-proyecto

Angular preguntará algunas opciones.

¿Quieres habilitar SSR?

Responde:

No

¿Qué tipo de estilos quieres?

Selecciona:

CSS

(Después aprenderemos SCSS.)

Angular comenzará a crear el proyecto.

Verás algo parecido a:

CREATE src/app
CREATE angular.json
CREATE package.json

Entrar al proyecto

cd mi-primer-proyecto

Ejecutar el proyecto

ng serve

o

ng serve --open

Aparecerá:

✔ Compiled successfully.

Ahora abre:

http://localhost:4200

Verás la página de bienvenida de Angular.

¿Qué creó Angular?

La estructura es algo así:

mi-primer-proyecto/
│
├── src/
│
├── app/
│
├── assets/
│
├── public/
│
├── angular.json
│
├── package.json
│
└── tsconfig.json

Lo importante es src.

Dentro:

src
│
├── app
│     ├── app.ts
│     ├── app.html
│     ├── app.css
│     └── app.routes.ts
│
├── main.ts
└── styles.css

¿Qué hace cada archivo?

main.ts

Es el punto de entrada.

Cuando ejecutas:

ng serve

Angular comienza aquí.

app.ts

Es el componente principal.

Aquí vive tu aplicación.

app.html

Es el HTML que ves en pantalla.

app.css

Los estilos del componente principal.

styles.css

Estilos globales.

Tu primer cambio

Abre:

src/app/app.html

Borra todo.

Escribe:

<h1>Hola Angular</h1>
<p>Mi primera aplicación.</p>

Guarda.

El navegador se actualizará automáticamente.

Verás:

Hola Angular
Mi primera aplicación.

Crear un componente

En Angular todo gira alrededor de componentes.

Crear uno es muy sencillo.

ng generate component components/inicio

o la forma corta:

ng g c components/inicio

Angular creará:

inicio/
inicio.ts
inicio.html
inicio.css
inicio.spec.ts

¿Qué es un componente?

Un componente tiene tres partes:

HTML
+
CSS
+
TypeScript

Ejemplo:

Inicio
├── inicio.html
├── inicio.css
└── inicio.ts

Cada pantalla normalmente es un componente.

Abrir el componente

En:

inicio.html

Escribe:

<h2>Bienvenido al sistema</h2>
<p>Curso de Angular.</p>

¿Cómo mostrar ese componente?

En Angular moderno (componentes standalone), abre src/app/app.html y coloca el selector del componente generado, por ejemplo:

<app-inicio></app-inicio>

Si Angular te muestra un error indicando que el componente no está importado, verifica que el componente sea standalone (es el comportamiento por defecto en versiones recientes) y que esté incluido en los imports del componente principal.

¿Qué aprenderemos después?

En las siguientes clases veremos:

  1. Variables
  2. Interpolación ({{ }})
  3. Eventos ((click))
  4. Property Binding ([ ])
  5. Two-way Binding
  6. Directivas (@if, @for)
  7. Componentes
  8. Servicios
  9. Rutas
  10. Formularios
  11. Consumo de APIs
  12. Autenticación (Login)
  13. JWT
  14. CRUD completo
  15. Conexión con PHP, Node.js o .NET
  16. Despliegue a producción

Ejercicio de esta primera clase

  1. Instala Node.js.
  2. Instala Angular CLI con npm install -g @angular/cli.

  3. Crea el proyecto:

    ng new mi-primer-proyecto

  4. Entra a la carpeta:

    cd mi-primer-proyecto

  5. Ejecuta:

    ng serve --open
  6. Modifica src/app/app.html para mostrar un mensaje personalizado y verifica que aparezca en el navegador.

Cuando tengas esto funcionando, continuamos con la Clase 2, donde aprenderás cómo funcionan los componentes, el data binding y TypeScript, que son la base de cualquier aplicación Angular.


 

Suscribirse a: Entradas (Atom)