En esta clase vamos a ver la integración composta con el framework front end para trabajar con todo
lo que HTML5 y CSS para tener diseño bastante más robusto y atractivos.
Un mejor Lucasfilm.
Y lo vamos a instalar de la forma más fácil posible.
Hay diferentes forma para poder instalar y configurar vostra en nuestro proyecto.
Por ejemplo, podemos utilizar una instalación a través de Angular si elige, o bien podemos integrar
de forma manual copiar las hojas de estilos y lo JavaScript correspondiente en nuestro index punto HTML
del proyecto, que es justamente lo que vamos a hacer ahora.
Pero después, más adelante, vamos a configurar de otra forma Bust.
Vamos a ir a la página oficial de Vostra.
Creo que muchos ya lo conocen, pero de todas formas acá lo tenemos.
Entonces, get vostra que la página oficial Get pústula puntocom nos vamos a downloads y acá vamos a
copiar a través del repositorio CDN.
Vamos a copiar las librerías, la hoja de estilo.
Vos también CSS y vos tresmil jotes.
Ahora nos vamos a nuestro proyecto angular, cerramos y vamos a abrir el index.
Entonces justamente en este index que nuestra página principal de arranque donde tenemos la etiqueta
y selector a Pepe Ruth, acá vamos a incluir los estilos dentro de.
Ahí lo tenemos.
Pero lo lleva escribir todo lo que haya escrito.
Es bueno tenerlo al final, por ejemplo, lo vamos a dejar justo al final en el bote.
Acá entonces todo lo que oiga estilo dentro del Gilead y todo lo que ya escribí debajo.
Al final en el bote.
Y ahí lo tenemos.
Ahí tenemos la instalación integrada.
Después, obviamente, lo vamos a hacer de la mejor forma posible.
Una manera mucho más optimizada y recomendada.
Pero por ahora lo vamos a hacer de esta manera.
Así que vamos a guardar y ya tenemos integrado nuestro vostra.
Ahora el siguiente paso, es decir, el manual, y vamos a crear nuestro jeeter.
Entonces nos vamos acá al buscador.
Colocamos nav var, por ejemplo, acá nav.
Acá tenemos diferentes ejemplos.
Acá tenemos menú de navegación.
Tenemos otros tipos.
Hay un montón de ejemplos que podemos utilizar.
Vamos a ocupar el primero, el más completo, copian acá un clic en Copy y volvemos al auto.
Pero lo vamos a copiar en el componente, en el app component, así que nos vamos acá en el app component.
HTML, que sería nuestro componente principal.
Básicamente podría ser nuestro layout, el index.
Básicamente no se toca salvo para colocar algún tipo de estilos como Busta o JavaScript que sean globales,
pero para todo el diseño básicamente no se toca.
Lo que podríamos tocar y manipular es el componente.
El app compone componente principal y acá podríamos tener nuestro menú justo al comienzo.
Después, obviamente, también lo vamos a mejorar, a optimizar.
Vamos a crear componentes, por ejemplo, un componente específico para el IDER que contener el menú
de navegación, un componente para el cuerpo, el body, que sería el contenido principal dinámico que
va cambiando según las rutas de los componentes.
Y finalmente vamos a tener el footer.
También podríamos tener un sidebar.
En fin, por ahora en esta clase vamos a dejar el menú de navegación a secas en App Component, que
básicamente podría ser nuestro layout.
Lo vamos a guardar y ejecutamos.
Recordemos que instalamos un plugins.
Si nos vamos con control Koma nos vamos a package.
Instalamos un plugin.
Es un paquete que se llama Myo y de terminal y podemos acceder a la consola acá con el signo más.
Esa era la consola y podemos ejecutar comandos de Angular Angular Ziel ahí directamente.
Entonces con ingi ser menos open enter.
Ahí se está abriendo la aplicación y acá la tenemos.
Se fijan acá ella se incluye el vostra.
De hecho cambió la fuente ya distinto, está centrado hacia la izquierda y tenemos el menú de navegación.
Acá el track dump no funciona.
Es fundamental.
Cuando estemos trabajando con Angular es habilitar la consola, por ejemplo, con F12, con la tecla
F12.
Esa es una forma.
O bien se pueden ir al al menú acá al costado superior derecho.
Nos vamos.
Amorth Tools y Developer Tools.
Eso sería otra forma.
Entonces la consola importante porque detecta cualquier error que pueda ocurrir.
Y justamente en la consola.
Acá podemos ver un error.
Un error en el bus.
Miren en el archivo JS de vostra que acabamos de incluir justamente acá está lanzando un error y eso
se debe al drop down y es porque nos falta alguna, alegrarías?
Entonces acá está ocurriendo un error.
Acá no se encuentra definido la librería que necesaria para que funcione el los dropdown menu.
Entonces hay que agregar esta dependencia y volvamos a la página de Buttercup y nos vamos al OUM.
Vamos a descargar y acá sí estamos utilizando JavaScript compilado justamente con Angular a través de
The Script.
Necesitamos incluir el Vickery y Proper antes antes del del vostra admin.
Entonces lo copiamos.
Volvemos a autom y tenemos que copiar antes.
Se copia justo arriba del postren bien.
Guardamos una vez guardado.
Volvemos al Akroon.
Al proyecto y el error.
Está funcionando sin ningún problema.
Incluso funciona el drop down menu ya está perfectamente integrado.
Entonces, por eso es importante siempre tener la consola habilitada.
Bueno, estamos trabajando con Angular en todo momento.
Por ejemplo, si estamos en AUTOM y nos vamos al app component.
Y acá tenemos, por ejemplo, curso y profesor.
Por ejemplo, si concatenados, más un concatenar y se me olvidó colocar, por ejemplo, en la cadena
o la variable y guardamos automáticamente.
Acá no muestra el problema que está ocurriendo.
Entonces es importante siempre desarrollar con la consola habilitada de Krom.
Perfecto.
Bien, quedamos hasta acá.
Cualquier duda que tengan la revisamos en el foro.
Hasta la próxima.