Search code examples
javascriptangularjsangularjs-ng-include

Issue rendering Angular template using ng-include

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>
Solution

  • 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