SIS 414 TECNOLOGIAS EMERGENTES ING.

VIVIANA TITO RODRIGUEZ

Angular

Instalar Angular con Cli

Instalar la última versión de Angular CLI, para instalar Angular13:

npm install -g @angular/cli@latest

Una vez instalado Angular13 CLI y ya podemos generar un nuevo proyecto de

Angular en una dirección que elijamos
ng new NombreDelProyecto
SIS 414 TECNOLOGIAS EMERGENTES ING. VIVIANA TITO RODRIGUEZ

Si nos preguntará si queremos usar un formato específico para los estilos css, le
daremos a Enter directamente.

Esperamos a que el asistente acabe de generar nuestro proyecto de

Angular13.

Ahora entraremos al directorio de nuestro proyecto y habilitaremos el servidor

local de pruebas para Angular:

cd NombreDelProyecto

ng serve

Ahora tendremos disponible la web App de Angular 13 en http://localhost:4200/

SIS 414 TECNOLOGIAS EMERGENTES ING. VIVIANA TITO RODRIGUEZ

TRABAJO (opcional):
SIS 414 TECNOLOGIAS EMERGENTES ING. VIVIANA TITO RODRIGUEZ

¿Qué es un componente y cómo funciona?

Una aplicación angular está compuesta por componentes, los componentes son pequeñas
partes de lógica de la aplicación, que van a estar representando a un trozo de la pantalla,
puedo tener un componente para el header, el body o cuerpo, una lista etc

Todos los ficheros para que funcionen tienen que ser registrados aquí: app.module.ts
SIS 414 TECNOLOGIAS EMERGENTES ING. VIVIANA TITO RODRIGUEZ

Crear un componente
Creamos un fichero

.ts se refiere a typescript, que es el lenguaje q estaremos usando

SIS 414 TECNOLOGIAS EMERGENTES ING. VIVIANA TITO RODRIGUEZ
SIS 414 TECNOLOGIAS EMERGENTES ING. VIVIANA TITO RODRIGUEZ

Usamos la etiqueta <fruta> en la plantilla html.

Hacemos correr el servidor: ng serve

SIS 414 TECNOLOGIAS EMERGENTES ING. VIVIANA TITO RODRIGUEZ

Luego separamos la plantilla en línea en un archivo diferente

Creamos nuestro fichero HTML fruta.component.html

SIS 414 TECNOLOGIAS EMERGENTES ING. VIVIANA TITO RODRIGUEZ