0

This is an edit of the original question:

When using the ng-include directive to reuse my header HTML on all pages, there is a slight delay in loading/rendering the top navbar. To alleviate the problem, I'm attempting to point ng-include to a header.html file that contains <script type='text/ng-template' id='header.html>...</script> so that it pre-loads the partial.

But I can't seem to get it to work. I've only had success when sticking the contents of header.html directly in index.html, which defeats the purpose of reusing the header code.

The docs for script only give an example of using an inline template, and the docs for ngInclude don't use script in the example templates.

Can ngInclude load a file that uses angular's script directive?

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <title>Testing</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/custom.css">
  <script src='lib/angular/angular.js'></script>
  <script src='js/main.js'></script>
</head>
<body>

<div ng-controller="HeaderCtrl">
  <div ng-include src="header.url"></div>
  <!-- script works when it is put directly in index.html:
  <script type="text/ng-template" id="header.html">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav">
          <li>
            <a class="brand" href="#">Test</a>
          </li>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </div>
    </div>
  </div>
  </script>
  -->
</div>
</body>
</html>

header.html:

<script type="text/ng-template" id="header.html">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav">
          <li>
            <a class="brand" href="#">Test</a>
          </li>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </div>
    </div>
  </div>
</script>

main.js:

"use strict";
// I've also tried this with "use strict"; removed

var myApp = angular.module('myApp', []);

function HeaderCtrl($scope) {
    $scope.header = {name: "header.html", url: "header.html"};
}
billyw
  • 388
  • 1
  • 5
  • 15
  • 2
    use either approach and just remove the extra quotes around url. Read `ng-include` docs – charlietfl Dec 12 '13 at 22:04
  • Your first approach should be the best solution. Maybe show some code so we can troubleshoot why it didn't work on your side. – NicolasMoise Dec 12 '13 at 22:04
  • @NicolasMoise I've updated the question so that it focuses on the first approach, and included some code as requested. – billyw Dec 12 '13 at 23:44

2 Answers2

2
<div ng-include src="header.url"></div>

should be

<div ng-include src="'header.url'"></div>

Not sure if this is what rjm226 meant by 'double quotes were necessary'. Both double and single are necessary for ng-include. I've been tripped up by this recently.

edhubbell
  • 2,218
  • 1
  • 16
  • 17
1

This works perfectly. Tried it on my server. Double quotes were necessary. What is with the "use strict"; That breaks it on my end.

rjm226
  • 1,203
  • 1
  • 11
  • 21
  • `"use strict";` came from a tutorial I was following. There's a post on it [here](http://stackoverflow.com/a/1335881/2166274). I just re-pasted the code above on my server and, in both Firefox and Chrome, I'm still seeing the top navbar load a fraction of a second after the rest of the content. I take that you're not having the same behavior. Thanks for the response. – billyw Dec 12 '13 at 22:41
  • are you loading the header at the top of all of your partials? – rjm226 Dec 12 '13 at 22:47