Ejercicios Angular2

Ejercicio0001

• Crear un proyecto nuevo usando angular-cli

• Primero, crear sólo la estructura de carpetas. Después instalar las dependencias con npm o yarn
• Segundo, crear el proyecto de la manera estándar

• Sugerencia:

• Examinar la Guía rápida de la herramienta Angular-cli

Ejercicio0002

• Sobre el proyecto generado en el ejercicio 0001, añadirle un componente. Probar de las dos maneras, todo en la clase y en archivos distintos
• Sugerencia: en el repo, ver: angular\ejemplos\ejemplo0002

Ejercicio0003

• Sobre el proyecto generado en el ejercicio 2, añadirle un servicio y asociarlo a un componente. Crear un segundo servicio y asociarlo al módulo
• Sugerencia: en el repo, ver: angular\ejemplos\ejemplo0003 y 04

Ejercicio0004

• Crear un nuevo proyecto y añadir un nuevo tubo personalizado

• ng g pipe concatenar
• El tubo opera sobre un string y recibe como parámetro una nueva string que concatena a la primera

• Sugerencia: en el repo, ver: angular\ejemplos\ejemplo0015

Ejercicio0005

1. Vamos a emplear un Api para pruebas disponible en la red
2. Acceder a esta url desde el navegador: https://jsonplaceholder.typicode.com/posts/1 y ver el resultado
3. Crear un nuevo proyecto: ng new nombre-del-proyecto
4. Crear un servicio: ng g service Usuario
5. Empleando el objeto “http” predefinido por Angular, realizar una petición “get” a la url del punto 2 y mostrar los datos recibidos por consola y en la página del componente principal de la aplicación (app.component.html)
6. Sugerencia: en el repo, ver: angular\ejemplos\ejemplo0009 y 10

Ejercicio0006

• En este ejercicio no usaremos CSS
• Crear un nuevo proyecto: ng new nombre-del-proyecto
• Añadir un nuevo componente: ng g nombre-form

• En la plantilla del componente, crear un formulario con una “label”, un “input type=’text’...” y un botón de enviar (“input type=”submit”...). EL formulario debe usar un ngSubmit
• Al pulsar el botón de enviar, mostrar un mensaje por consola con el contenido del campo de texto
• Fuera del formulario, mostrar el valor del campo de texto. Sugerencia: emplear un enlace unidireccional, del componente a la página

• Sugerencia: en el repo, ver: angular\ejemplos\ejemplo0017

Ejercicio0007

• Crear un nuevo proyecto preparado para usar el router: ng new nombre-del-proyecto --routing
• Añadir tres componentes nuevos (ng g component nombre), llamados primero, segundo y no-encontrado
• Configurar el archivo app-routing.module.ts con las rutas asociadas a cada componente
• Colocar en app.component.html los enlaces para las rutas (routerLink) y definir la zona donde Angular debe mostrar bajo demanda los componentes (router-outlet)
• Sugerencia: en el repo, ver: angular\ejemplos\ejemplo0022