Simple ng-include not working

Question

Im playing with AngularJS for the first time, and im struggling to use ng-include for my headers and footer.

Here's my tree:

myApp
assets
   - CSS
   - js
        - controllers
        - vendor
             - angular.js
             - route.js
             ......
             ......
             ......
        main.js
pages
   - partials
        - structure
              header.html
              navigation.html
              footer.html
   index.html
   home.html

index.html:

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>AngularJS Test</title>

    <script src="/assets/js/vendor/angular.js"></script>
    <script src="/assets/js/vendor/route.js"></script>
    <script src="/assets/js/vendor/resource.js"></script>
    <script src="/assets/js/main.js"></script>

</head>
    <body>          

        <div ng-include src="partials/structure/header.url"></div>
        <div ng-include src="partials/structure/navigation.url"></div>    

        <div id="view" ng-view></div>   

        <div ng-include src="partials/structure/footer.url"></div>
    </body>
</html>

main.js

var app = angular.module("app", ["ngResource", "ngRoute"]);


app.config(function($routeProvider) {

$routeProvider.when("/login", {
    templateUrl: "login.html",
    controller: "LoginController"
});

$routeProvider.when("/home", {
    templateUrl: "home.html",
    controller: "HomeController"
});

$routeProvider.otherwise({ redirectTo: '/home'});

});

app.controller("HomeController", function($scope) {
    $scope.title = "Home";
});

home.html

<div>
<p>Welcome to the {{ title }} Page</p>
</div>

When i go on the home.html page, my header, nav and footer are not appearing.

possible duplicate of [AngularJS ng-include](http://stackoverflow.com/questions/13943471/angularjs-ng-include) — sp00m, Apr 10 '14 at 14:59

Pieter Herroelen · Accepted Answer · 2019-01-31T22:43:16.920

151

You're doing an include of header.url instead of header.html. It looks like you want to use literals in the src attribute, so you should wrap them in quotes, as was mentioned in the comments by @DRiFTy.

Change

 <div ng-include src="partials/structure/header.url"></div>
 <div ng-include src="partials/structure/navigation.url"></div>    

 <div id="view" ng-view></div>   

 <div ng-include src="partials/structure/footer.url"></div>

to

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

 <div id="view" ng-view></div>   

 <div ng-include src="'partials/structure/footer.html'"></div>

If this is not working, check the browser console if there are any 404's

edited Jan 31 '19 at 22:43

answered Apr 10 '14 at 15:03

Pieter Herroelen

5,977
2
29
37

86

To add to this, you need to wrap the path in single quotes: `src="'partials/structure/header.html'"` – DRiFTy Apr 10 '14 at 15:07
1

Doh i forgot to check for 404's in the console. My path was wrong. – Catfish Aug 14 '14 at 14:51
3

@DiscGolfer This is quite vital information. I checked my code for ages before this worked! +1 – Brad Bird Oct 15 '14 at 10:37
1

Can someone elaborate on why you must pass string literal? Seems like a major GOTCHA that could be avoided, perhaps I am missing something? – DeBraid Jan 21 '15 at 22:36
It's been this way at least since 1.0 (https://github.com/angular/angular.js/blob/2430f52bb97fa9d682e5f028c977c5bf94c5ec38/src/ng/directive/ngInclude.js) and I guess the authors thought it was more flexible to define it as an angular expression. – Pieter Herroelen Jan 22 '15 at 08:59
2

It's much more flexible. I've used it to embed function calls which generate the appropriate url on the fly. – Ferruccio May 06 '15 at 18:07
My problem was that I was trying to use a relative path when it needs to be an absolute path, it is implies in this answer but not specifically stated. – csharpsql Jan 20 '16 at 11:27
If 404(File not found) occur, then we can use instead of,
– Rohit Parte Jan 25 '19 at 04:39

score 100 · Answer 2 · answered Apr 14 '15 at 09:08

100

I had a similar problem with a simple ng-include not rendering:

<div ng-include="views/footer.html"></div>

I wrapped the file path in single quotes and it now renders:

<div ng-include="'views/footer.html'"></div>

answered Apr 14 '15 at 09:08

cfranklin

1,500
1
13
14

I got this thing by hit and trial. But, still don't know what's the use of the ' inside " ? Why only " creates problems – Pankaj Dec 06 '15 at 20:17
1

Why does this happen? – Mohammad Kermani Sep 03 '16 at 07:28
2

You need to wrap string literals (e.g. your file path) with single quotes because anything within the full quotes will be evaluated as code, so without the single quotes, the Angular compiler will thing you have a function somewhere with the name of your file path. – sean.boyer Apr 11 '17 at 16:27

score 18 · Answer 3 · answered Mar 14 '15 at 19:01

18

i had a similar problem that landed me here.

ng-include was not populating the contents of my partial, but there were no console errors, nor 404's.

then i realized what i did.

fix for me: make sure you have ng-app outside of the ng-include! so obvious. the price of being an Angular noob.

answered Mar 14 '15 at 19:01

GraehamF

1,971
24
24

2

JEEZ, this is hard info to track down. I know that sounds ridiculous, but **so many** articles leave this part out. Even a couple "Hello World" tutorials didn't mention it. I took finding this answer then finding a working JSfiddle to learn I needed `
`. Absurd.
– clark May 17 '15 at 03:42
This one helped me out. Not even [w3schools](http://www.w3schools.com/angular/angular_includes.asp) mention this. – wirlez Jul 01 '15 at 09:24

score 2 · Answer 4 · answered Nov 12 '15 at 16:52

2

I also came across this issue. And this is what worked for me.

So instead of writing this:<div ng-include="'html/form.htm'"></div>

You want to add ng-app="". So it should look like this: <div ng-app="" ng-include="'html/form.htm'"></div>

answered Nov 12 '15 at 16:52

Tim Anishere

796
6
7

1

For the above answers, it was assumed that the ng-app is already applied and we are using ng-include inside it. – Pankaj Dec 06 '15 at 20:19
Better to add ng-app="myApp" to the opening tag, but not to
– DotNet Fan Jan 25 '16 at 15:08
...or in the body tag `` – Christian Luneborg Apr 17 '18 at 14:14

score 2 · Answer 5 · answered Jun 23 '16 at 13:38

I was struggling with the same issue and have done almost all what was advised in different stacks but it didn't work for me. On Console, I was getting the Error:

"Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."

Later I realised, I have to use a local web server (MAMP, WAMP etc.) to make it work.

Please be careful of the above error message. Chances are you are not using a local web server to run you website.

score 2 · Answer 6 · answered Jan 06 '17 at 12:50

2

I just figured this one out!

For me, I was using a CDN for importing my angular.min.js file that apparently wasn't working. I switched to:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

and included ng-app="" in my body tag:

<body ng-app="">
<div ng-include="'testfile.html'"></div>

and it's working fine now. Cheers!

answered Jan 06 '17 at 12:50

FiringBlanks

1,998
4
32
48

No, that doesn't work on IE11 and Chrome. Only works on FF. – Christian Luneborg Apr 16 '18 at 21:28

score 1 · Answer 7 · edited Mar 21 '16 at 00:09

1

Yes, without the '', ng would try to evaluate the contents inside the ng-include("")

This evaluation is another reason why you don't put {{}} inside these directives.

edited Mar 21 '16 at 00:09

Misa Lazovic

2,805
10
32
38

answered Mar 20 '16 at 23:23

Achuth I

11
1

score 1 · Answer 8 · edited Jan 18 '18 at 04:25

1

ng-include is not working in chrome as well as in explorer but works in Firefox, so this could be compatibility issues. To be sure, try generating the report in Firefox or Edge or another browser.

edited Jan 18 '18 at 04:25

jthill

55,082
5
77
137

answered Jan 18 '18 at 03:45

Himesh V R

19
1

1

Welcome to Stackoverflow. It would be better if you checkout [How to Answer](https://stackoverflow.com/help/how-to-answer) page for future endeavor at Stack overflow. -Thank you – Momin Jan 18 '18 at 03:55
It's true that chrome browser known for its overpreventive policies blocks scripts to call pages from File:// origin this is why you can't render angular partials in chrome. neverthless this is right assumption and can take part of the multiplicity of causes that are possible to thwart the functioning of ng-view/ng-include. – Abr001am Mar 04 '18 at 23:43

score 0 · Answer 9 · answered Mar 29 '18 at 07:06

I Too had similar issue: Silly mistake was causing IT , I had below textArea EG:

<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" > `

Wasn't closed properly Corrected below :

<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" ></textarea> 

<div ng-switch="vm.frmDOA.isGenerateDebitNote">
                <ng-include src="vm.showupload()"></ng-include>
            </div>

Thought to post it may help any one I digged hours to solve ....

score 0 · Answer 10 · answered Oct 22 '19 at 19:24

0

the ng-include file works for files fetched from the web server only (needs something like http://mywebsite/myinclude.html link). It does not work if you fetch file from local folder directly (c:\myinclude.html will not work)

answered Oct 22 '19 at 19:24

James Dsouza

23
2

score -1 · Answer 11 · answered Jun 18 '19 at 13:41

-1

The ng-include directive should just work normal if you're viewing your file via some server (localhost or online) and NOT viewing your file directly under file system like (file:///yourpath/index.html).

This example from w3schools should work fine.

answered Jun 18 '19 at 13:41

zeeawan

6,667
2
50
56

Simple ng-include not working

11 Answers11