AngularJS ng-include doesn't work

Question

Here is a source of the main.html file

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

    <script>
        var myApp = angular.module ('myApp',[]);
        myApp.controller('myCtrl', function ($scope){
            $scope.name = "Tim";
            $scope.partialStuff = [ 'a', 'b', 'c' ];
            alert(window.angular.version.full);//1.3.14 is displayed
        });
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="myCtrl">
            {{name}}
        <div ng-repeat="partialVar in partialStuff">
            Hello: <div ng-include src="'part.html'"></div>
        </div>
    </div>
</body>
</html>

Also there is a part.html that contains a plain text 'part' - just several symbols.

Both files main.html and part.html are located in the same folder.

When I open main.html in the browser, I don't see three repeats of the content from part.html however I see three Hello:. Seems like part.html is not loaded.

Why?

Thank you.

Please place it within the body tag to make it work

<script type="text/ng-template" id="part.html">
  part
</script>

What's coming up in your network tab, I'm assuming it couldn't load the file? Your app probably has the wrong directory set up. — Mark Pieszak - Trilon.io
– Mark Pieszak - Trilon.io, Commented Apr 8, 2015 at 17:06
any console errors ? if no errors check the network and see whether the templates are loading correctly — Kalhan
– Kalhan, Commented Apr 8, 2015 at 17:06
Nope, no errors. The file part.html is not loaded. (that's in Google Chrome). FF - works fine. The solution is found (please see my comment below). Thank you! — Haradzieniec
– Haradzieniec, Commented Apr 8, 2015 at 17:18

Alessandro Cifani · Accepted Answer · 2015-04-08 17:18:39Z

15

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

should be the correct syntax I believe. More info here

EDIT: also, the file path should be from the root and not relative of the html file.

edited Apr 8, 2015 at 17:18

answered Apr 8, 2015 at 17:03

Alessandro Cifani

1,5193 gold badges12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Scottie Over a year ago

I don't think there should be a double quote followed by a single quote. Use one or the other.

charlietfl Over a year ago

@Scottie yes there should when url is string

Alessandro Cifani Over a year ago

Is the path relative to the root folder and not the html file?

Estus Flask Over a year ago

<div ng-include src=... is not supported but operational syntax.

CodeMilian Over a year ago

I am having a similar issue when I inspect the code I see    but the html is not rendering

Community · Accepted Answer · 2017-05-23 11:54:44Z

5

You cannot import local files directly using the file:// protocol.

You should take a look at: Is it possible to use ng-include without web server?

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 8, 2015 at 17:11

aleger

962 bronze badges

2 Comments

Estus Flask Over a year ago

Actually, you can, but not in every browser. IE and Chrome are the problem ones.

Haradzieniec Over a year ago

Yes. And I've just checked - it works in FF. The question appeared when worked with a Google Chrome. The solution found here: stackoverflow.com/questions/14420337/…

Manish Bansal · Accepted Answer · 2017-12-29 16:26:51Z

0

ng-include can be used as:

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

This will surely include your files like a normal src. ng-include work on local server also.There is no need to put extra server like tomcat to run this file. This will run simply like a html file.

answered Dec 29, 2017 at 16:26

Manish Bansal

9072 gold badges10 silver badges19 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-include doesn't work

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related