405

I’m trying to include an HTML snippet inside of an ng-repeat, but I can’t get the include to work. It seems the current syntax of ng-include is different than what it was previously: I see many examples using

<div ng-include src="path/file.html"></div>

But in the official docs, it says to use

<div ng-include="path/file.html"></div>

But then down the page it is shown as

<div ng-include src="path/file.html"></div>

Regardless, I tried

<div ng-include="views/sidepanel.html"></div>
<div ng-include src="views/sidepanel.html"></div>
<ng-include src="views/sidepanel.html"></ng-include>
<ng-include="views/sidepanel.html"></ng-include>
<ng:include src="views/sidepanel.html"></ng:include>

My snippet is not very much code, but it’s got a lot going on; I read in Dynamically load template inside ng-repeat that that could cause a problem, so I replaced the content of sidepanel.html with just the word foo, and still nothing.

I also tried declaring the template directly in the page like this:

<script type="text/ng-template" id="tmpl">
    foo
</script>

And running through all the variations of ng-include referencing the script’s id, and still nothing.

My page had a lot more in it, but now I’ve stripped it down to just this:

<!-- index.html -->
<html>
<head>
<!-- angular includes -->
</head>
<body ng-view="views/main.html"> <!-- view is actually set in the router -->
    <!-- views/main.html -->
    <header>
        <h2>Blah</h2>
    </header>
    <article id="sidepanel">
        <section class="panel"> <!-- will have ng-repeat="panel in panels" -->
            <div ng-include src="views/sidepanel.html"></div>
        </section>
    </article>
<!-- index.html -->
</body>
</html>

The header renders, but then my template doesn’t. I get no errors in the console or from Node, and if I click the link in src="views/sidepanel.html" in dev tools, it takes me to my template (and displays foo).

8 Answers 8

782

You have to single quote your src string inside of the double quotes:

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

Source

9
  • 4
    yes, this bit me the other day. Somewhat related answer stackoverflow.com/questions/13811948/…
    – jaime
    Dec 19, 2012 at 0:16
  • 62
    The reason for this is that any string in ng tags is in fact evaluated as an angular expression. '' tells it that it's a string expression.
    – Gepsens
    Feb 17, 2013 at 13:51
  • 39
    @Gepsens: it makes sense once you know. It would be nice if the documentation mentioned it explicity though. Feb 18, 2013 at 19:21
  • 7
    I agree, we definitely need a documentation effort on Angular, and a layout system.
    – Gepsens
    Feb 25, 2013 at 21:40
  • 1
    Seriously. ridiculous. You'd think they'd mention that its an expression, despite how obvious it seems.
    – dudewad
    Aug 10, 2015 at 19:52
135
    <ng-include src="'views/sidepanel.html'"></ng-include>

OR

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

OR

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

Points To Remember:

--> No spaces in src

--> Remember to use single quotation in double quotation for src

2
  • 8
    The ng-include="'...'" syntax definitely looks better. Jul 15, 2014 at 14:50
  • so I'm assuming ng-include doesn't exist in comment format? Jan 10, 2017 at 16:47
50

For those trouble shooting, it is important to know that ng-include requires the url path to be from the app root directory and not from the same directory where the partial.html lives. (whereas partial.html is the view file that the inline ng-include markup tag can be found).

For example:

Correct: div ng-include src=" '/views/partials/tabSlides/add-more.html' ">

Incorrect: div ng-include src=" 'add-more.html' ">

2
  • 6
    Actually, this is not exactly correct: the path CAN be relative, but it is relative to the html file from which the app was instantiated. In your "incorrect" example, that would work if add-more.html was in the same directory as app.html. In my answer, views/ is in the same directory as app.html. Nov 21, 2013 at 20:38
  • In the case with Laravel and placing the structure in the public folder (public/app/templates/includes) and the calling file is (public/app/templates/index.php) the include path needed to be (app/templates/includes/filetoinclude.php). I could not get relative to work. Mar 10, 2014 at 13:38
10

For those who are looking for the shortest possible "item renderer" solution from a partial, so a combo of ng-repeat and ng-include:

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'" />

Actually, if you use it like this for one repeater, it will work, but won't for 2 of them! Angular (v1.2.16) will freak out for some reason if you have 2 of these one after another, so it is safer to close the div the pre-xhtml way:

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>

1
  • this is years later, but this was precisely what I needed for working in a <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>. Thanks! Feb 4, 2020 at 21:40
10

Maybe this will help for beginners

<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="custom.css">
  </head>
  <body>
    <div ng-include src="'view/01.html'"></div>
    <div ng-include src="'view/02.html'"></div>
    <script src="angular.min.js"></script>
  </body>
</html>
7

This worked for me:

ng-include src="'views/templates/drivingskills.html'"

complete div:

<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>
6
  • 2
    You should not combine ng-view and ng-inclue on the same element; the src (see templateUrl) should be configured in your router. Jun 25, 2015 at 18:50
  • @jacob so how would you load this as a route?? because i can get my view to load, and i can get my controller to trigger, but they're not connected, view loads empty
    – Sonic Soul
    Feb 5, 2018 at 21:28
  • @SonicSoul use ngRouter and set it as the template. Or if you mean use route params in the path, just use it like a JavaScript expression: someVar + 'some string' Feb 6, 2018 at 0:52
  • @jacob i already use ngRouter but i don't know how to load that route in ng-include .. if i use a route in src= it just loads entire site not just the view :( if i load it by relative path to html, it does not load the controller with the view
    – Sonic Soul
    Feb 6, 2018 at 13:05
  • @SonicSoul are you trying to load a template nested in a view that is loading via ngRouter? If so, I think the value you provide to src should be an absolute path in your project's directory structure (not an app route). If you're trying to set the route template using ngInclude, that's wrong. Beyond that, this was 6 years ago, and I haven't used AngularJS in probably 3+ years. Feb 6, 2018 at 13:54
0

try this

<div ng-app="myApp" ng-controller="customersCtrl"> 
  <div ng-include="'myTable.htm'"></div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("customers.php").then(function (response) {
        $scope.names = response.data.records;
    });
});
</script>
-1

On ng-build, file not found(404) error occur. So we can use below code

<ng-include src="'views/transaction/test.html'"></ng-include>

insted of,

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.