MÓVILES 2- APRENDIZAJE SOBRE ANGULAR CLI

JULIÁN ALBERTO ORTIZ VALENCIA

INGENIERÍA EN SISTEMAS

SEMESTRE 8

2023

Angular CLI
 Angular CLI es una herramienta de línea de comandos que facilita la creación, el

desarrollo y el mantenimiento de aplicaciones web en Angular. Angular CLI proporciona una

interfaz de línea de comandos para generar componentes, servicios, directivas y otros

artefactos de Angular, así como para ejecutar pruebas unitarias y de integración, construir y

empaquetar la aplicación para su implementación en producción.

Para esta práctica se desarrollaron varios ejercicios interesantes, pero antes que todo

se creó el ambiente de configuración actualizando npm para la instalación del software de

Angular CLI para esto se ejecutó el siguiente comando npm install -g @angular/cli.

Con la instalación realizada, se procedió a crear la carpeta del proyecto con el

comando ng new +nombre proyecto, Obtuve un error por el path de la ruta de node,pero

pude solucionarlo ingresando desde mi computador a Sistema>Configuración avanzada del

sistema>Variables de entorno y estableciendo el Path como C:\User\-usuario-\AppData\

Roaming\npm, Guarde los cambio y reinicie el equipo para continuar con el ejercicio.

Después de realizar esta configuración en las Variables de entorno pude usar el

comando ng de Angular CLI.

Se creó la carpeta proyecto0001 y se inicializa el servidor con el comando ng serve -

o, En la siguiente imagen se muestra la ejecución del comando.

 Esto levanta el servicio en el puerto http://localhost:4200/. En los archivos generados se

eliminó el contenido de app.component.html y se reemplazó por una etiqueta de texto y un saludo,

como se aprecia en la siguiente imagen.

 Con la interpolación se realizó un ejercicio diferente para traer los datos de

app.component.ts a la vista html con los símbolos {{*variable*}}, se cambió un poco los estilos en

el archivo de styles.css (Siendo este el estilizado global para el proyecto) que se encuentra en el root.

El resultado es el siguiente.
 Se hizo uso de las directivas *ngIf y *ngFor (Se usan como atributos) la primera para

validaciones lógicas como se puede ver el la siguiente imagen. y la segunda es una directiva

estructural también, que representa una plantilla para cada elemento de una colección. La directiva se

coloca en un elemento, que se convierte en el padre de las plantillas clonadas.

 Se realizó un ejercicio de un contador con la misma lógica haciendo uso de los eventos, en

este caso también como un atributo se establece el evento Click donde se hace un llamado al método

incrementar y decrementar.
 Se desarrolló un ejercicio con los inputs, para mostrar el valor de una variable, haciendo uso

de la directiva ngModel esta directiva crea una instancia de FormControl a partir de un modelo de

dominio y la vincula a un elemento de control de formulario. Para hacer uso de esta directiva se

importó en el archivo app.modules.ts como se muestra en la imagen.

 Como resultado final de la práctica, se desarrolló una tabla un poco dinámica con el fin de

poder realizar un pequeño CRUD, como se muestra en el resultado final de la vista en la siguiente

imagen:

Problema