3

Saludos ando usando angularjs en el front end pero mi aplicación web no es una Single Page Application, es una aplicacion clásica en donde el browser hace una peticion al servidor por cada pagina que el usuario solicite.

Quiero abreviar mi código en cada página html y construir un master page usando angularJS. Logré abreviar el <header>, el menu y el <footer> pero no logro abreviar el <head> ya que cuando pongo una directiva ng-include o un custom directive todo lo que coloque dentro no se carga en la página.

Debido a que tengo muchos etiquetas <script> de muchos scripts javascript que tengo, y resulta dificil cada vez ue agrego un nuevo script tengo que agregarlo en todas las paginas .

Cuando intento agregar una directiva angular en la etiqueta head, el contenido que debería agregarse no se agrega.

<head ng-include="'/SpringMVCTemplateAnn/resources/angular/templates/seccionesMasterPage/head.html'">

este es el template donde esta el contenido que debería ir dentro del head

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="/SpringMVCTemplateAnn/resources/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="/SpringMVCTemplateAnn/resources/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="/SpringMVCTemplateAnn/resources/dist/css/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/SpringMVCTemplateAnn/resources/dist/css/sb-admin-2.css" rel="stylesheet">
<!--ESTILO PARA TABLAS SMART-->
<link href="/SpringMVCTemplateAnn/resources/angular/controladores/actividad/estilo.css" rel="stylesheet">
<!-- LIBRERIAS ANGULAR -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="/SpringMVCTemplateAnn/resources/angular/app.js"></script>


<!--ANGULAR CONTROLADORES-->
<script src="/SpringMVCTemplateAnn/resources/angular/controladores/cliente/clienteController.js"></script>
<script src="/SpringMVCTemplateAnn/resources/angular/controladores/usuario/usuarioController.js"></script>

<!--ANGULAR RUTAS-->
<script src="/SpringMVCTemplateAnn/resources/angular/routes.js"></script>

<!--ANGULAR SERVICIOS-->
<script src="/SpringMVCTemplateAnn/resources/angular/servicios/cliente/clienteServicio.js"></script>
<script src="/SpringMVCTemplateAnn/resources/angular/servicios/usuarioServicios/usuarioServicio.js"></script>

EDIT

Quisiera poner el contenido de mi head en un archivo aparte para poder reutilizarlo en todas mis páginas, si quisiera agregar algo solo lo agrego en el archivo externo y así no tengo que modificar cada página, ya logre hacer esto con mi footer y me header pero por alguna razón no funciona en el head

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head ng-include="mihead.html"> <--- aqui quisiera poner la ruta en donde se encuentre todo el contenido de mi head en un archivo aparte para poder reutilizarlo en todas las paginas

EDIT 2

Es posible incluir mis scripts al final del documento usando ng-include ejemplo

Esto estaría contenido dentro del archivo scriptsPartial.html

<!--ANGULAR CONTROLADORES-->
<script src="/SpringMVCTemplateAnn/resources/angular/controladores/cliente/clienteController.js"></script>
<script src="/SpringMVCTemplateAnn/resources/angular/controladores/usuario/usuarioController.js"></script>

<!--ANGULAR RUTAS-->
<script src="/SpringMVCTemplateAnn/resources/angular/routes.js"></script>

<!--ANGULAR SERVICIOS-->
<script src="/SpringMVCTemplateAnn/resources/angular/servicios/cliente/clienteServicio.js"></script>
<script src="/SpringMVCTemplateAnn/resources/angular/servicios/usuarioServicios/usuarioServicio.js"></script>

Como incluiría este archivo usando ng-include ya que esto sería un montón de scripts que estan en el html pero no están contenidos dentro de una etiqueta html como un div. No podría hacer <div ng-include=""></div> ya que este código no tendría sentido introducirlo dentro de una etiqueta div. ¿Es posible usar ng-include para incluir código html en este caso la declaracion de mis scripts sin que este ng-include este dentro de una etiqueta, o es mala práctica? Ahora que lo pienso mejor no me parece bien llenar el head de tantos scripts prefiero ponerlos al final de la página con ng-include. En que etiqueta podría colocar mi ng-include para introducir estos scripts

EDIT 3

Agregué mi ng-include de la siguiente forma pero los scripts no cargan. Puedo ver que se agregan a la página con el inspector de consola de firefox, pero si reviso la parte de red estos no se cargan. También puedo ver que no se cargaron porque algunos elementos de mi página que dependen de estos scripts no funcionan.

<div ng-include="'/MyWebApp/resources/angular/templates/seccionesMasterPage/srciptsPartial.html'">
</div>

También intenté de esta forma pero es lo mismo

<ng-include
  src="/MyWebApp/resources/angular/templates/seccionesMasterPage/srciptsPartial.html"
  [onload="/MyWebApp/resources/angular/templates/seccionesMasterPage/srciptsPartial.html"]>
</ng-include>
1
  • Saludos, quisiera poner la ruta en donde se encuentre todo el contenido de mi head en un archivo aparte para poder reutilizarlo en todas las paginas el 6 jun. 2016 a las 18:59

2 respuestas 2

2

Respondiendo a tu pregunta si es posible.

Sólo debes tener cuidado con tres cosas

  1. Debido a que el <head> sólo puede tener un sólo elemento padre, el <html>, asegurate que el bootstrap de tu aplicación(angular.bootstrap o ng-app) se hace en este elemento.

    <html ng-app="app"></html>
    

    En muy raras ocasiones hacerle bootstrap sólamente al head tiene sentido así que necesitas subir un nivel.

  2. Que lo estas usando como atributo(o clase) del elemento <head> ya que de otra forma es html ilegal

    <head ng-include="..."></head>
    

    Imagina tener

    <html>
        <ng-include>
            <head>
            </head>
        <ng-iclude>
        <body>
        </body>
    </html>
    

    Esto evidentemente no es legal

  3. Que la url sea accesible. Si usas urls absolutas puede que no te esté llegando el fichero correcto desde el servidor y te quedaría algo así.

    <html>
         <!--  ngInclude: '/head.html' -->
         <body></body>
    </html> 
    

    y tu página no tendría elemento <head>

Aquí te dejo un ejemplo en plunkr funcionando. Las clases que incluyo se cargan dinámicamente luego que ng-include ha cargado el fichero head.html. Básicamente lo mismo que estás intentando tú.

http://plnkr.co/edit/AqeuS6?p=preview

No puedes incluir la carga del fichero angular.js en la misma plantilla que estás intentando cargar ya el angular no podrá tomar el control de la aplicación y te quedará un head vacío. Debes ponerlo justo antes de cerrar la etiqueta <body> y también debes crear el módulo de la aplicación en el mismo lugar como te muestro en el ejemplo.

Update

No deberías cargar directivas y controllers de esta forma. La razón es que angular procesa el DOM una sóla vez usando todas las definiciones que se le han declarado en ese momento

angular.module('app').directive(...).controller(...)

Si el código con las definiciones llega luego de que angular haya procesado el DOM no te funcionará ya que este no te hace un nuevo bootstrap de la aplicación cuando se ejecutan nuevos scripts.

6
  • saludos tu respuesta esta muy bien explicada y con un ejemplo muy practico, se que esto se escapa de la pregunta pero si decido dejar el header como esta, he incluir los scripts al final del documento con un ng-include, cual seria la forma de hacerlo? es posible usar un ng-include sin q este sea contenido dentro de una etiqueta html, edite mi pregunta con un ejemplo el 6 jun. 2016 a las 23:31
  • @Bill_Data23 Si es posible. Fíjate en la doc que dice que puede usarse como elemento, clase y atributo. En realidad no tiene nada de malo que uses un div ya que el resultado será el mismo(un div o un custom-element y dentro tus scripts). Pienso que si quieres usar buenas prácticas no deberías usar ng-include para manipular tu layout. Si estas usando angular y no quieres un SPA deberías usar el motor de plantillas de tu server para generar los master page. De lo contrario usa ui-router y un SPA para lograr el mismo efecto.
    – devconcept
    el 7 jun. 2016 a las 12:11
  • gracias chequie la documentacion he intente declarar el ng-include de las dos formas asi <ng-include src="string" [onload="string"] [autoscroll="string"]> ... </ng-include> y poniendolo dentro de un <div ng-include="'mi ruta" si reviso el codigo con el inspecor de firefox puedo ver q los scripts se agregan dentro de la etiqueta pero no se cargan si reviso la parte de Red veo que no se han cargado y tmb veo que no se cargaron porque no funcionan elementos en mi pagina que necesitan de esos scripts, edite mi pregunta el 7 jun. 2016 a las 12:55
  • @Bill_Data23 Por eso en mi comentario anterior te recomendé usar el motor de plantillas de tu server. Lo que estás intentando no es una buena idea. Mira este plunker y verás que ocurre lo mismo que a tí, la directiva <test> no se carga. La causa es que cuando se carga tu código y tus directivas angular ya procesó todo el DOM e ignoró todo lo que no entendía en ese momento. La definición de tu código llegó luego de manera asincrónica pero angular no repite el procesamiento por lo que la página te queda vacía. Los ficheros llegaron pero tarde.
    – devconcept
    el 7 jun. 2016 a las 13:59
  • gracias excelente explicacion cargare mi master page on algun template engine como FreeMarker, pero si no es para incluir templates, cual seria el uso del ng-include, crei que como angularJS esra un framework especificamente para front end , era mucho mejor que cualquier template engine, gracias el 7 jun. 2016 a las 15:02
0

Creo que es más cuestión de lógica.

Si el script que se encarga de procesar las directivas, está dentro del template a incluir... no lo va a procesar.

Inserta todo lo referente a Angular en el pie del html.

<!DOCTYPE html>
<html ng-app="appModule" ng-controller="appController" lang="es">

<!-- contenido del head -->
<ng-include src="'./partials/head.html'"></ng-include>

<body layout="column">

<!-- contenido del body -->

<!-- angular -->
<script src='../src/sources/angular/1.5.5/angular.min.js'></script>
<!-- resto de librerías de angular o scripts -->

</body>
</html>

Y prueba a cargar el resto del head en la posición que corresponde.

Saludos,

PD.: Editado, añado el código de ejemplo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.