Issue rendering Angular template using ng-include

Question

Can anyone please let me know why my template in htmlpage1.html is not rendering?

Code in main.js:

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
});

htmlpage1.html:

<div>this is my template</div>

index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
    <div data-ng-include data-ng-src="'HtmlPage1.html'"></div>
</body>
</html>

Dan Mindru · Accepted Answer · 2015-03-25 16:58:51Z

2

Make sure the filename and template name you provide in index.html are the same - it's case sensitive -> rename your html file to HtmlPage1.html. You can set the template file in data-ng-include, like so <div data-ng-include="'HtmlPage1.html'"></div>

Here's a working example: http://jsbin.com/casoza/1/edit

answered Mar 25, 2015 at 16:58

Dan Mindru

6,1244 gold badges30 silver badges42 bronze badges

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

Collectives™ on Stack Overflow

Issue rendering Angular template using ng-include

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related