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).

TylerH
  • 20,799
  • 66
  • 75
  • 101
Jakob Jingleheimer
  • 30,952
  • 27
  • 76
  • 126

8 Answers8

782

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

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

Source

matthias krull
  • 4,389
  • 3
  • 34
  • 54
Jakob Jingleheimer
  • 30,952
  • 27
  • 76
  • 126
  • 4
    yes, this bit me the other day. Somewhat related answer http://stackoverflow.com/questions/13811948/different-ng-includes-on-the-same-page-how-to-send-different-variables-to-each/13812605#13812605 – jaime Dec 19 '12 at 00: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 '13 at 13:51
  • 39
    @Gepsens: it makes sense once you know. It would be nice if the documentation mentioned it explicity though. – Jakob Jingleheimer Feb 18 '13 at 19:21
  • 7
    I agree, we definitely need a documentation effort on Angular, and a layout system. – Gepsens Feb 25 '13 at 21:40
  • huh, helped thank you! Fortunately docs now say that string to pass is: angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in quotes, e.g. src="'myPartialTemplate.html'". – trainoasis Feb 27 '14 at 12:17
  • If it's a variable make sure it's in double quotes
    – Rick Jun 01 '14 at 16:03
  • work perfect here too! :) thanks @jacob. Guys don't forget that it's no work when dev LOCALLY because the browser's Same Origin Policy and Cross-Origin Resource protection! – Thales P Aug 25 '14 at 21:27
  • 1
    Seriously. *ridiculous*. You'd think they'd mention that its an expression, despite how obvious it *seems*. – dudewad Aug 10 '15 at 19:52
  • For ASP.mvc I'm not sure but I think the server blocks on the Views folder. I.e. only allows internal requests. I shifted to Templates and it all worked fine. I'm not sure how to see this in the debugger to verify if anyone has any suggestions. – CYoung Oct 05 '16 at 00:48
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

Kalpesh Prajapati
  • 1,703
  • 1
  • 12
  • 15
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' ">

Benjamin McFerren
  • 822
  • 5
  • 21
  • 36
  • 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`. – Jakob Jingleheimer Nov 21 '13 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. – Jason Spick Mar 10 '14 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>

Balance
  • 198
  • 1
  • 5
9

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>
Bruno
  • 6,623
  • 5
  • 41
  • 47
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>
GG.
  • 21,083
  • 14
  • 84
  • 130
Jackal
  • 2,591
  • 3
  • 25
  • 29
  • 2
    You should not combine `ng-view` and `ng-inclue` on the same element; the src (see [templateUrl](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider#when)) should be configured in your router. – Jakob Jingleheimer Jun 25 '15 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 05 '18 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'` – Jakob Jingleheimer Feb 06 '18 at 00: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 06 '18 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. – Jakob Jingleheimer Feb 06 '18 at 13:54
  • @jacob thanks, so when i provide an absolute path, it does load the view. however, it doesn't automatically load controller. if in the same binding i provide ng-controller for that view, it triggers a controller load but they still don't see m to be connected (view loads empty) – Sonic Soul Feb 06 '18 at 15:32
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>
jayaweb
  • 11
  • 5
-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>
Rohit Parte
  • 3,365
  • 26
  • 26