How the right way to use ng-include

Question

I'm beginner on Angular.js and am having some problems with the directive ng-include.

I want to display contents of header.html inside index.html

Well, here's my tree example:

myapp
.    public
.    .     lib
.    .     .  angular.js
.    .     .  
.    header.html
.    index.html

Header.html code:

<h1>Hello Angular</h1>

Index.html code:

<html ng-app>
  <head> 
    <meta charset="utf-8">
    <script src="public/lib/angular.js"></script> 
  </head> 
  <body>  
    <ng-include src="'header.html'"></ng-include> 
  </body>   
</html>

When i run index.html, i have something like this:

<!-- ngInclude: undefined -->

the easiest way to check you're input it right or wrong, make an anchor with `href="header.html"`, then see the result there. I don't know how you started your app, so I cannot sure anything. — Kai, Feb 24 '15 at 17:39
This should work. See http://stackoverflow.com/questions/25499228/angular-ng-include-what-file-path-would-i-use. There's something happening that's not shown in your question. — isherwood, Feb 24 '15 at 17:42
Refer to [this](http://stackoverflow.com/questions/13943471/angularjs-ng-include) — Arkantos, Feb 24 '15 at 17:45
Also you almost certainly want to be using a directive here, not an include — David says Reinstate Monica, Feb 24 '15 at 17:57

score 0 · Answer 1 · answered Feb 24 '15 at 17:43

0

I'm not sure if there's an ng-include tag to include other templates. We usually do it this way

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

answered Feb 24 '15 at 17:43

Arkantos

6,530
2
16
36

Custom elements are a valid option (with a few IE caveats). – isherwood Feb 24 '15 at 17:48
also, if you do it this way it should be
...only use src= if you're using the ng-include tag. – scottier Aug 20 '15 at 18:59

score 0 · Accepted Answer · answered Feb 24 '15 at 17:57

0

Are you accessing the app through a web server or by accessing the file through file:// protocol? In the latter case it won't work due to browser's security restrictions. The solution would be to install Apache or Nginx and access the app through something like http://localhost/myapp/index.html.

answered Feb 24 '15 at 17:57

Matjaž Drolc

356
4
9

I'm looking for an alternative that does not need to use a web server or ajax to import HTML files but it seems that will not be possible – Alexandre Thebaldi Feb 24 '15 at 18:37
You could use inline template by using [the script directive](https://docs.angularjs.org/api/ng/directive/script). You can see an example at the bottom of the linked page. – Matjaž Drolc Feb 25 '15 at 00:36

How the right way to use ng-include

2 Answers2