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>