TALLER DE INTRODUCCION A ANGULAR

1. Instalar nodejs:

https://nodejs.org/es/

2. Instalar cliente angular:

https://cli.angular.io/

3. Ejecutar el comando

4. Ejecutar el comando

5. En el navegador

http://localhost:4200/

6. En la página index.html se observa la etiqueta <app-root></app-root>

7. En el archivo app.component.ts se hace referencia a ese selector:

8. En app.component.html se encuentra el contenido inicial de la página.

9. Para crear un nuevo componente: Ejecutar el comando

10. Instalar Bootstrap en index.html

11. Copiar cualquier navbar de la página:

https://getbootstrap.com/docs/4.1/components/navbar/

12. Pegar el navbar seleccionado en el archivo: navbar.component.html

13. En app.component.html llamar el componente app-navbar:

14. Crear un nuevo componente llamado variables

15. En app.component.html llamar el componente variables app-variables

16. En el archivo variables.components.ts declarar la variable nombre:

17. En el archivo variables.component.html llamar a la variable nombre:

18. Pasar a mayúscula el valor de la variable nombre de la siguiente forma:

19. Declarar la variable “nota” como numérica en el archivo variables.component.ts y hacer el

su respectivo llamado en el archivo variables.component.html

20. Sumar 100 a variable nota de la siguiente manera y observar los cambios:

21. En el archivo variables.component.html agregar un botón:

Se observa el llamado a una función en Typescript cambia un poco con el tradicional

javascript que se ha trabajado.

22. En el archivo variables.component.ts implementar la función cambiar_nombre dentro de

la clase VariablesComponent. Guardar y probar en el navegador.
 Observar los cambios

23. En el archivo app.module.ts agregar el componente forms

24. En el archivo variables.component.html agregar un input tipo text:

*En [(ngModel)]=model: los paréntesis son para emitir un evento y las llaves cuadradas son
para recibir un evento, por lo tanto esta caja de texto va a emitir y a recibir valores y además
se está enlazando a la variable nombre. Observar cómo al escribir algo en este campo se
actualizan los demás campos enlazados a la variable nombre.

25. Crear un nuevo componente llamado atributos

26. Guardar la siguiente imagen en la carpeta: assets/img

27. Colocar la etiqueta correspondiente al modulo de atributos en el archivo
app.component.html

28. En el archivo atributos.component.ts declarar la variable nombre_alt

29. En el archivo atributos.component.html agregar la imagen de la siguiente manera:

*Se observa cómo el atributo alt al encerrarlo en llaves cuadradas toma el valor de la
variable nombre_alt declarado anteriormente

30. En el archivo atributos.component.ts declarar la variable url_imagen

31. Actualizar el atributo src de la imagen:

* Lo anterior para imágenes dinámicas

32. Crear un nuevo componente llamado estructurales

33. Colocar la etiqueta correspondiente al módulo de estructurales en el archivo

app.component.html
34. En el archivo estructurales.components.ts declarar la variable “mostrar”:

35. En el archivo estructurales.components.html colocar dos títulos “Mostrar” y “No mostrar”

36. La directiva ngIf permite hacer evaluaciones lógicas o variables booleanas, en este caso
para hacer visible o no un texto. Colocar la directiva ngIf como se muestra a continuación y
observar los resultados:

37. En el archivo estructurales.components.ts declarar un arreglo de strings:

38. Usando la directiva ngFor puede imprimirse el arreglo de la siguiente forma:

39. En la carpeta /src/assets crear una nueva carpeta llamada data y guardar el archivo
dinosaurios.json que se encuentra en la plataforma virtual.

40. Crear un componente llamado http

41. Se debe crear un servicio para poder compartir información, métodos o procedimientos
entre componentes, para eso se debe ejecutar el comando:

42. En el archivo app.modules.ts importar el servicio anteriormente creado

(dinosaurios.service), y de una vez importar también el módulo httpCliente propio de
angular que sirve para hacer HTTP y hacer peticiones a servicios REST.
43. En el archivo http.components.ts importar el servicio:

44. Se hace una inyección de código. En el archivo http.components.ts

45. En el archivo dinosaurios.service.ts se debe importar el módulo HttpClient, e inyectarlo en

el constructor:

46. En el archivo dinosaurios.service.ts crear la función cargarDinosaurios, y observar en la

consola del navegador los resultados:
47. En el archivo http.component.html escribir el siguiente html y observar en el navegador los
cambios: