It is possible to put the ng-include directive inside a head

Question

It is possible to put the ng-include directive inside a head

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

Greetings I'm using angularjs in the front end but my web application is not a Single Page Application, it's a classic application where the browser makes a request to the server for each page that the user requests.

I want to abbreviate my code in each html page and build a master page using angularJS. I managed to abbreviate the <header> , the menu and the <footer> but I can not abbreviate the <head> since when I put a directive ng-include or a custom directive everything I put in does not load on the page.

Because I have many tags <script> of many javascript scripts that I have, and it is difficult every time I add a new script I have to add it in all the pages.

When I try to add an angular directive in the head tag, the content that should be added is not added.

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

this is the template where is the content that should go inside the 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

I would like to put the contents of my head in a separate file to be able to reuse it in all my pages, if I wanted to add something I only add it in the external file and so I do not have to modify each page, I already do this with my footer and I header but for some reason it does not work in the 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

It is possible to include my scripts at the end of the document using ng-include example

This would be contained within the scriptsPartial.html file

<!--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>

How would you include this file using ng-include since this would be a lot of scripts that are in the html but are not contained within an html tag as a div . I could not do <div ng-include=""></div> since this code would not make sense to enter it inside a div tag. Is it possible to use ng-include to include html code in this case the declaration of my scripts without this ng-include being inside a tag, or is it bad practice? Now that I think about it, it does not seem right to fill the head of so many scripts I prefer to put them at the bottom of the page with ng-include . In which tag could I place my ng-include to introduce these scripts

EDIT 3

I added my ng-include in the following way but the scripts do not load. I can see that they are added to the page with the firefox console inspector, but if I check the network part they are not loaded. I can also see that they did not load because some elements of my page that depend on these scripts do not work.

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

I also tried this way but it's the same

<ng-include
  src="/MyWebApp/resources/angular/templates/seccionesMasterPage/srciptsPartial.html"
  [onload="/MyWebApp/resources/angular/templates/seccionesMasterPage/srciptsPartial.html"]>
</ng-include>

javascript html angularjs

asked by Bill_Data23 06.06.2016 в 20:39

source

2 answers

0

I think it's more a matter of logic.

If the script that is responsible for processing the directives is inside the template to be included ... it will not process it.

Insert everything related to Angular at the foot of the 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>

And try loading the rest of the head in the corresponding position.

Greetings,

PD: Edited, add the example code.

answered by 06.06.2016 в 21:00

Compare hours in Java Open activity from a push notification

score 1 · Accepted Answer

Answering your question if possible .

You just have to be careful with three things

Because the <head> can only have a single parent element, the <html> , make sure that the bootstrap of your application ( angular.bootstrap or ng-app ) is made in this element.

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

On very rare occasions, bootstrapping only the head makes sense, so you need to go up one level.

That you are using it as an attribute (or class) of the <head> element since otherwise it is illegal html

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

Imagine having

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

This is obviously not legal

Make the URL accessible. If you use absolute urls, you may not be getting the correct file from the server and you would have something like that.

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

and your page would not have an element <head>

Here I leave an example in plunkr working. The classes I include are loaded dynamically after ng-include has loaded the file head.html . Basically the same thing you're trying to do.

link

You can not include the load of the file angular.js in the same template that you are trying to load and the angular one can not take control of the application and you will have an empty head. You must put it just before closing the <body> tag and you must also create the application module in the same place as I show you in the example.

Update

You should not load directives and controllers in this way. The reason is that angular processes the DOM only once using all the definitions that have been declared at that time.

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

If the code with the definitions comes after the DOM has processed, it will not work since this does not make you a new bootstrap of the application when new scripts are executed.