I'm unable to implement partial views correctly using AngularJS. I am referencing an example in the book ProAngularJS (Listing 10-12). However, even the example does not render the partial view when launching the browser.
I am simply selecting the main html file within file Explorer and running it in the browser. There are absolutely no remnants of table.html being displayed as a partial view within the main html page.
I at least expect to see "Action" and "Done" displayed as table headers from the partial view. However, I get nothing.
What am I missing?
Main Page:
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>Directives</title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.todos = [
{ action: "Get groceries", complete: false },
{ action: "Call plumber", complete: false },
{ action: "Buy running shoes", complete: true },
{ action: "Buy flowers", complete: false },
{ action: "Call family", complete: false }];
});
</script>
</head>
<body>
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
<h3 class="panel-header">To Do List</h3>
<ng-include src="'table.html'"></ng-include>
</div>
</body>
</html>
table.html:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Action</th>
<th>Done</th>
</tr>
</thead>
<tr ng-repeat="item in todos" ng-class="$odd ? 'odd' : 'even'">
<td>{{$index + 1}}</td>
<td ng-repeat="prop in item">{{prop}}</td>
</tr>
</table>
ng-includeuses Ajax, it won't work by simply opening likefile://file.htmlyou have to run it through some kind of server.