Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular 2 avanzado: Trabajo con APIs

Crear una aplicación y agregar componentes

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
En esta lección aprenderemos a usar la línea de comandos de Angular para automatizar la creación de una aplicación. Aprenderemos también los comandos de la consola para crear componentes dentro de una aplicación.
06:44

Transcripción

En esta lección vamos a aprender cómo crear nuestro proyecto desde cero. Yo estoy acá trabajando en una carpeta que tiene un "folder" llamado'angular'. Voy a abrir la consola, –estoy trabajando dentro de Visual Studio Code– y voy a abrir esta carpeta llamada'angular' y vamos a crear acá una nueva aplicación utilizando la línea de comandos de Angular. Así que vamos a poner que "ng new" para crear un nuevo proyecto y le vamos a poner "lista- de- pendientes". Vamos a crear una lista con tareas pendientes utilizando Angular 2 e interactuando con una API que está desarrollado en Node. Una vez terminado el proceso de creación de nuestro proyecto, vamos a entrar a la carpeta en la que se encuentra el archivo que hemos generado. Voy a escribir dentro de la consola "cd", en este caso "lista de pendientes". Estoy ahora dentro de mi aplicación y vemos que tengo ahora todos los archivos y configuraciones necesarias para comenzar a trabajar, de hecho, voy a crear un par de componentes. Voy a crear un componente que va a ser el encabezado y otro que va a ser el pie de página de mi aplicación. Para hacer eso, voy a escribir el comando "ng g" y voy a definir un componente, en este caso "component", y una vez definido el comando "component", voy a ingresar el nombre que va a tener mi componente, en este caso "encabezado". Presionamos Enter y ya se ha creado el encabezado que podemos acceder desde la carpeta'src/ app' y acá tengo el encabezado de mi aplicación. Voy a crear otro componente utilizando el mismo comando "ng, g component" y en vez de llamarlo encabezado lo vamos a llamar "pie- de- página", separado por guiones. Ya tenemos dos componentes. Ahora vamos a entrar para modificar nuestra aplicación. Voy a entrar directamente al documento'app . component. html' Acá es donde se encuentra la información de mi documento. Como ves acá lo que tenemos es un "h1" y lo que tiene es una información dinámica que dice "title". Vamos a ejecutar este proyecto dentro de un servidor y para hacerlo voy a entrar también a la línea de comandos y voy a definir "ng serve" y con este comando voy a activar un servidor que va a mostrar mi documento en la dirección'localhost: 4200', tal como se indica acá. Vamos a copiarla y vamos entrar al navegador. Acá está mi aplicación trabajando en el puerto 4200, dentro del servidor local, y aunque yo esté utilizando otros servidores no importa qué tecnología estén utilizando, que sea en Apache, que sea en Node, no importa el servidor en el que esté trabajando, únicamente mi aplicación va a estar disponible en el 4200, así voy a poder acceder a la información que esté en ella. Por ahora me parece un título que dice "app works! ", que es el texto por defecto que va a aparecer dentro de mi aplicación. Vamos a borrar esta información. Si guardo, vamos a ver que se actualiza automáticamente dentro de nuestro servidor y también se borra la información, porque en este documento llamado "app. component" es que está la plantilla principal de mi aplicación. Voy a insertar dos módulos dentro de esta aplicación, así que para hacerlo, simplemente tengo que invocarlos, utilizando el selector que se ha creado dentro de cada uno de ellos. Por ejemplo, vamos a buscar el componente "encabezado" que se encuentra dentro de una carpeta y dentro de esta carpeta encontramos los archivos de programación, la plantilla, el CSS y también un archivo que nos va a servir para hacer las pruebas de control de calidad. Voy a tomar específicamente el archivo donde está la plantilla y vamos a ver que aparece un texto que dice "encabezado works! ". Este es el texto que se genera automáticamente. También vamos a ver en el documento donde está la programación, que es'encabezado. component. ts', vamos a encontrar que aparece una propiedad llamada "selector". Como puedes ver, dice "app -encabezado". El estándar siempre va a ser que se va a generar el nombre del encabezado con el prefijo "app". Vamos a copiar este nombre y volvamos otra vez a la plantilla principal de nuestra aplicación; recordemos que era "app . component. html". Hace un momento acabo de eliminar la información que estaba ahí y ahora voy a incluir una etiqueta, tal cual como incluyo cualquier otra etiqueta de HTML, pero esta vez va a tener el nombre del selector de mi componente, y al incluirla dentro de mi aplicación vamos a ver cómo aparece el texto "encabezado works! ". Yo voy a utilizar un código HTML que ya tenía predefinido para modificar este componente, así que vuelvo entrar a encabezado y vamos a entrar ahora a la plantilla, en este caso el archivo'. component. html', vamos a borrar el texto que está apareciendo ahora y voy a cambiarlo por un "div" con una clase de encabezado. Vamos a guardar y voy a entrar también al CSS de esta plantilla y voy a agregarle un CSS básico para que se despliegue un texto en mi aplicación. Volvemos al resultado y vamos a ver que ya tenemos la primera parte de nuestra aplicación, ya se está mostrando un encabezado. Vamos a incluir finalmente un pie de página utilizando el mismo principio y vamos a incluir una etiqueta que va a tener el prefijo "app". Y como ya sabemos cuál es el estándar que utiliza para hacer los nombres, sé que va a ser el nombre del componente "pie-de-página", así que vamos a agregarlo: "pie- de página" y vamos a cerrar esta etiqueta y ahora sí ya tenemos nuestra aplicación utilizando dos diferentes componentes.

Angular 2 avanzado: Trabajo con APIs

Comprende el funcionamiento de una API y cómo llevar a cabo sus procesos, así como controlar su funcionamiento mediante Angular 2, gracias a este ejemplo práctico.

3:02 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:4/05/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.