AngularJS. Añadiendo el menú superior.
By ercobo | Published | No hay comentarios
Una vez que en la entada anterior hemos conseguido que se integre bootstrap con angular, es el momento de comenzar a personalizar la aplicación para nuestros fines.
Como voy a utilizar parte de un desarrollo anterior hecho con Codeigniter, Bootstrap y JQuery, parte del código está ya hecho, solo hay que adaptarlo a nuestra nueva disposición para que se muestre adecuadamente.
Pero antes de empezar, habrá que preparar el entorno. En mi caso he decidido separar las funciones de «frontend» y de «backend», por lo que voy a generar una estructura de carpetas dentro del proyecto de la forma adecuada. También voy a colocar los recursos del proyecto en una carpeta «assets», que a su vez tendré separada por los elementos que lo componen y por las dos funciones.
Al final nos encontramos en este momento con una estructura como la siguiente:
Como se puede ver, «assets» está separado en los tipos de elementos (css, js, media), y a su vez «media» está separado en sus tipos de elementos (iconos, imagenes, videos, etc), y dentro de cada una esta dividida por su ámbito de accion (frontend, backend y global). Esta estructura es la elegida por mi, por lo que cada cual puede optar por crear la que quiera, pero para sencillez a la hora de encontrar los elementos, recomiendo que al menos la carpeta «assets» esté creada dentro de la carpeta «src/app».
Una vez realizado y colocado los elementos que vayamos a utilizar, modificaremos el archivo «nav.component.html» que creamos en la sección anterior para que quede de esta forma:
Nota: cabe aclarar que aún no he colocado las rutas de los enlaces (elementos «a»), por lo que aunque en nuestra app de prueba ya se vean los resultados, los enlaces no funcionan.
Tambien he modificado el archivo index.html, para que muestre de favicon el logotipo adecuado, y no el de angular.
