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 avanzado: Gestión de archivos en PHP

Instalar librerías externas e iconos

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Angular es un poderoso framework, sin embargo se limita únicamente al aspecto lógico. Para acelerar el proceso visual, en este curso usaremos Bootstrap y Font Awesome, que nos dan funcionalidades de maquetado e imágenes de forma inmediata, reduciendo así nuestro código.
05:08

Transcripción

En esta lección vamos a aprender cómo insertar íconos dentro de cada uno de los registros que tenemos en nuestra aplicación. Yo acá estoy trabajando mi aplicación, y voy a descargar una librería que se llama Font Awesome, se encuentra en la dirección "fontawesome.io". Puedes descargarla directamente en la pantalla principal. Haces clic en "Download" y vas a descargar un archivo comprimido, donde vas a encontrar más o menos estos mismos archivos. Vamos a necesitar copiar la carpeta "css" y la carpeta "fonts". Una vez que tengas copiados estos archivos, vamos a pegarlos dentro de nuestro proyecto en la carpeta "assets". Vamos a encontrar una carpeta que se llama "src", donde se encuentra el código fuente de nuestra aplicación, y donde hemos estado trabajando es en la carpeta "app", que es donde se encuentra el código de la aplicación, y en este punto debes copiar la información dentro de la carpeta "assets". Esta es una carpeta especial donde podemos guardar la información como en este caso de "css", de tipografías, pero también podemos guardar imágenes o cualquier otro archivo que sea algún recurso para nuestra aplicación, y que necesitemos que sea estático y que se encuentre dentro de la información final del proyecto. Ahora, dicho eso ya tenemos acá la carpeta "css" y la carpeta "fonts"; debes instalarlas exactamente en esta misma posición. Vamos a tener "assets" y dos carpetas. Vamos a buscar dentro de la carpeta "css"; vemos acá dos archivos, uno que se llama "font-awesome.css" y otro "font-awesome.min.css". El que vamos a utilizar es precisamente "font-awesome.min" porque ya viene minificado. ¿Cómo lo vamos a insertar en nuestro proyecto? Bueno, vamos a buscar dentro también de la carpeta fuente "src", vamos a buscar el archivo "index.html". El archivo "index.html" es la base de nuestra aplicación; acá está toda la información estática, nuestra aplicación. Vamos a poder ver que acá está una etiqueta que se llama "app-root" donde se está cargando nuestra aplicación. Está la parte dinámica del contenido, vemos que esto es básicamente todo el "body", pero si nosotros queremos insertar algo más, por ejemplo una librería, un JavaScript, o DSSS, ver inventos como Bootstrap, o jQuery, o cualquier otra librería que desees insertar, puedes hacerlo dentro de este documento. En este caso, yo voy a instalar Font Awesome utilizando la etiqueta "link", como cualquier otro archivo de "css"; vamos a poner "rel", y la relación va a ser un "stylesheet", una hoja de estilos. Vamos a definir la ruta a nuestro documento utilizando la propiedad "href" y vamos a definir lo que se encuentre dentro de "assets", que es una carpeta que va a estar disponible en nuestro proyecto: "assets/css/font-awesome.min.css". Te recomiendo que siempre utilices la versión minificada, porque es la que va a utilizar la menor cantidad de datos dentro de tu aplicación. Dicho eso, esperamos a compilar, esta parte es importante; es importante que se compile una vez más la aplicación. En este caso, yo estoy ejecutando el servidor, que va a hacer una compilación cada vez que yo hago un cambio, pero si no se hace la compilación, no vamos a tener disponible los archivos dentro de la carpeta "assets". Ahora que ya tenemos el resultado, vamos a revisar nuestra aplicación. Tenemos acá los archivos en los que estamos trabajando. No hay ningún cambio visible aún, vamos a insertar los íconos. ¿Cómo insertamos los íconos? Bueno, vamos a entrar una vez más a Font Awesome, vamos a buscar la sección "Íconos", y vamos a ver que acá tenemos una lista, son bastantes íconos, y vamos a buscar alguno que se relacione con "documento". Por ejemplo, vamos a escribir "document", para desplegar en "documento", y tenemos acá uno que se llama "file", y vamos a hacer clic acá, y vemos que nos muestra un archivo y nos da acá un código como lo podemos desplegar. Como ya tenemos acceso al "css" de Font Awesome, así que nada más tenemos que utilizar estas clases, en este caso, "fa-file-text", que es la que muestra este ícono, y lo vamos a meter dentro de una etiqueta, en este caso es una "i". Vamos a buscar dónde se está generando la lista; en el caso de mi aplicación, tengo acá una serie de componentes donde estoy desplegando cada uno de los archivos, así que, voy a buscar dónde está la plantilla que genera el nombre de este documento. En este caso, es un componente llamado "item-archivo". Voy a buscar la plantilla, y tenemos acá el nombre del archivo con el tipo de archivo. Ahora yo voy a poner acá el código que acabo de copiar de Font Awesome, donde me aparece que demuestre un "file text", o un archivo de texto. Vamos a guardar, y vamos a ver el resultado final que se está incluyendo un ícono por cada uno de los diferentes archivos que se encuentran en mi aplicación.

Angular 2 avanzado: Gestión de archivos en PHP

Aprende a crear vínculos entre PHP y Angular 2 mediante un ejemplo práctico en el que trabajarás del lado del servidor con PHP y la parte web con la tecnología Angular de Google.

3:20 horas (33 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:19/04/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.