Simple ng-include not working

javascript html angularjs angularjs-scope

101,753

Solution 1

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>

 <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

Solution 2

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>

Solution 3

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.

Solution 4

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>

Solution 5

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!

View more solutions

101,753

Author by

Oam Psy

Updated on July 05, 2022

Comments

Oam Psy almost 2 years

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.

DRiFTy about 10 years

To add to this, you need to wrap the path in single quotes: src="'partials/structure/header.html'"
Catfish almost 10 years

Doh i forgot to check for 404's in the console. My path was wrong.
Brad Bird over 9 years

@DiscGolfer This is quite vital information. I checked my code for ages before this worked! +1
DeBraid over 9 years

Can someone elaborate on why you must pass string literal? Seems like a major GOTCHA that could be avoided, perhaps I am missing something?
Pieter Herroelen over 9 years

It's been this way at least since 1.0 (github.com/angular/angular.js/blob/…) and I guess the authors thought it was more flexible to define it as an angular expression.
Ferruccio about 9 years

It's much more flexible. I've used it to embed function calls which generate the appropriate url on the fly.
Soundar Rathinasamy about 9 years

You saved my time! Thank you
clark about 9 years

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 <div ng-app>. Absurd.
wirlez almost 9 years

This one helped me out. Not even w3schools mention this.
Pankaj over 8 years

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 over 8 years

For the above answers, it was assumed that the ng-app is already applied and we are using ng-include inside it.
csharpsql over 8 years

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.
DotNet Fan over 8 years

Better to add ng-app="myApp" to the opening <html> tag, but not to <div>
Mohammad Kermani over 7 years

Why does this happen?
sean.boyer about 7 years

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.
Momin over 6 years

Welcome to Stackoverflow. It would be better if you checkout How to Answer page for future endeavor at Stack overflow. -Thank you
Abr001am about 6 years

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.
Christian Luneborg about 6 years

No, that doesn't work on IE11 and Chrome. Only works on FF.
Christian Luneborg about 6 years

...or in the body tag <body ng-app="">
Rohit Parte over 5 years

If 404(File not found) occur, then we can use <ng-include src="'views/transaction/test.html'"></ng-include> instead of, <div ng-include src = "'views/transaction/test.html'"></div>