What is the correct syntax of ng-include?

javascript html angularjs syntax include

317,965

Solution 1

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

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

Source

Solution 2

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

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

    <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

Solution 3

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' ">

Solution 4

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>

Solution 5

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>

View more solutions

317,965

Author by

Jakob Jingleheimer

Updated on July 27, 2022

Comments

Jakob Jingleheimer almost 2 years
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:
```

<html>
<head>

</head>
<body ng-view="views/main.html"> 
    
    <header>
        <h2>Blah</h2>
    </header>
    <article id="sidepanel">
        <section class="panel"> 
            <div ng-include src="views/sidepanel.html"></div>
        </section>
    </article>

</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).
jaime over 11 years

yes, this bit me the other day. Somewhat related answer stackoverflow.com/questions/13811948/…
Gepsens about 11 years

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.
Jakob Jingleheimer about 11 years

@Gepsens: it makes sense once you know. It would be nice if the documentation mentioned it explicity though.
Gepsens about 11 years

I agree, we definitely need a documentation effort on Angular, and a layout system.
Jakob Jingleheimer over 10 years

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.
trainoasis about 10 years

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'".
Jason Spick about 10 years

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.
Rick almost 10 years

If it's a variable make sure it's in double quotes <div ng-include="myVariable"></div>
Pier-Luc Gendreau almost 10 years

The ng-include="'...'" syntax definitely looks better.
Thales P over 9 years

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!
Jakob Jingleheimer almost 9 years

You should not combine ng-view and ng-inclue on the same element; the src (see templateUrl) should be configured in your router.
dudewad over 8 years

Seriously. ridiculous. You'd think they'd mention that its an expression, despite how obvious it seems.
CYoung over 7 years

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.
OzzyTheGiant over 7 years

so I'm assuming ng-include doesn't exist in comment format?
Sonic Soul about 6 years

@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
Jakob Jingleheimer about 6 years

@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'
Sonic Soul about 6 years

@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
Jakob Jingleheimer about 6 years

@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.
Sonic Soul about 6 years

@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)
Eric D. Johnson about 4 years

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!