El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Angular 2 práctico: Sitio de consumo de videos

Incluir Bootstrap en Angular

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección nos tomaremos una pausa de la programación de nuestra aplicación para asignarle hojas de estilos, reajustar componentes y darle los detalles estéticos a la capa visual de nuestro proyecto Angular 2.
07:05

Transcripción

En esta lección vamos a aprender a instalar elementos adicionales dentro de nuestro proyecto. Por ejemplo, vamos a instalar Bootstrap. Bootstrap es uno de los "frameworks" más populares de JavaScript y CSS que nos ayudan a generar páginas web muy rápido porque ya tiene elementos predefinidos. Vamos a entrar a Bootstrap dentro de la dirección "getboostrap.com" y vamos a entrar acá dentro de la sección "Getting started", donde nos da instrucciones de cómo instalar Bootstrap. En este caso, vamos a utilizar la opción "CDN", esto se refiere a una versión que se encuentra almacenada dentro de un servidor externo. Voy a copiar este código tal cual aparece acá, simplemente lo voy a copiar y voy a dar clic en "Mi Proyecto" de Angular. En este caso estoy trabajando un proyecto creado con la línea de comandos. Voy a buscar dentro de mi aplicación, la carpeta "src", y acá vamos a encontrar un archivo llamado "index.html". Vamos a abrirlo y vamos a encontrar el archivo HTML que da origen a mi aplicación. Puedes ver, de hecho acá, que está una etiqueta llamada "app-root" que lo que hace es básicamente cargar el módulo inicial de Angular y a partir de esto vamos a poder ver nuestra aplicación. Lo que vamos a hacer es muy simple, básicamente, voy a instalar Bootstrap solamente con pegar el código que está en la página web. Vamos a instalar una versión mimificada de Bootstrap. Acá aparece un tema opcional, este lo voy a borrar y vamos a dejar también la versión mimificada de JavaScript. También es importante que instalemos, cada vez que utilicemos Bootstrap, que también instalemos jQuery, el cual podemos encontrar en "jquery.com". Y es importante mencionar que jQuery y Angular no tienen ningún problema de compatibilidad, así que vamos a entrar en la sección de descarga y vamos a buscar la opción CDN que nos permite utilizar jQuery de la misma forma que hemos utilizado Bootstrap. Ahora voy a utilizar CDN. Voy a copiar este código que está acá, voy a irme directamente de nuestra aplicación y voy a agregar esa línea donde se incluye jQuery. En este caso, estoy utilizando tres diferentes "scripts" que se incluyen dentro de servidores externos; y eso es importante la mención porque no todos los casos vamos a necesitar archivos externos, es posible que de alguna forma necesites utilizar archivos que se encuentren dentro de tu servidor. En todos los casos puedes descargar estos archivos, simplemente te estoy dando una opción, pero vamos también a trabajar un archivo dentro de nuestro servidor. Voy a guardar el documento "index.html", y voy a utilizar otra librería que me parece muy interesante que ayuda mucho a hacer páginas web muy rápido y es una que se llama "Font Awesome". Font Awesome nos permite, a través de CSS y de tipografías, incluir íconos que nos van a ayudar a generar imágenes relativamente sencillas como las que aparecen acá. Y que nos van a ayudar a trabajar interfases de una forma mucho más sencilla. Ahora, ¿cómo instalar esto? Vamos a ir a la sección de "Descarga" y vamos a descargar un archivo. Ya lo he descargado previamente y lo tengo dentro de mi proyecto. Te lo voy a mostrar. Lo tengo dentro de la carpeta "Assets". Eso es importante porque acá es donde nosotros vamos a trabajar todos los archivos externos que no se traten específicamente en nuestra aplicación Angular. Cualquier cosa que tenga que ver con imágenes, CSS, tipografías todo lo que se relacione con esto, lo vamos a poner dentro de la carpeta"Assets". Una vez que esté ahí, lo que vamos a hacer es que lo enlazaremos con nuestro documento, y ¿cómo hacemos eso? Sencillamente, vamos a buscar el documento "index.html", en cualquier parte dentro de la etiqueta "head", y vamos a enlazarlo como cualquier otro documento; en este caso vamos a poner un enlace al CSS de Font Awesome, en este caso vamos a utilizar la etiqueta "link" "rel" y vamos a utilizar el parámetro "stylesheet", para definir que estamos importando una hoja de estilos, y ponemos una referencia con la propiedad "href"; en este caso estamos apuntando a la carpeta "Assets", así que vamos a poner "Assets" y vamos a definir cuál es el archivo que vamos a trabajar. Veamos dentro de la carpeta CSS que tenemos dos versiones: Tenemos una versión mimificada y te voy a dar un tip dentro de Visual Studio. Podemos hacer clic derecho dentro de cualquier archivo y podemos copiar la ruta de acceso. Voy a pegarle acá. Voy a borrar toda la información adicional. Yo ya sé que la ruta es a partir de "Assets" y no tengo que pensar tanto en el nombre del archivo. Esta es solo una forma de hacerlo más rápido y entonces vamos a apuntar al archivo que está dentro de "Assets" "CSS" "Font Awesome" y utilizamos la versión mimificada que utiliza la extensión "mim.css" Cerramos esta etiqueta y ya estamos listos para probar nuestra aplicación. Voy a abrir la terminal y a asegurarme de que me encuentro en la carpeta de mi proyecto "sitios-video" en este caso y voy a incluir el comando "ngserv" para crear un servidor rápido y poder ver mi aplicación que está acá trabajando. Ya está utilizando Bootstrap. Podemos ver que hay un ligero cambio en las tipografías, pero vamos a aplicarlo para que podamos ver los componentes en acción. Voy a buscar un componente que ya he creado que se llama "header" y voy a modificarlo. Ya tengo algunas líneas de CSS listas, así que voy a buscar el archivo "header.component.css" para modificar la apariencia y también voy a utilizar el archivo "header.component.html" donde tengo también un código que utiliza Bootstrap. Voy a reemplazar la información que está acá. Vamos a guardar y vamos a ver el resultado. Tenemos acá el encabezado de mi aplicación que ya está utilizando su propio CSS y estoy utilizando también algunos componentes de Bootstrap. Esta es una forma que tenemos de incluir elementos de interfaz rápidamente utilizando, en este caso, Bootstrap y Font Awesome.

Angular 2 práctico: Sitio de consumo de videos

Aprende a crear un sitio web de consumo de vídeos con Angular 2, desarrollando el back-end y conectando con el servidor local, terminando por la personalización del reproductor.

2:41 horas (26 Videos)
Actualmente no hay comentarios.
 

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.