CODEWITHSUNDEEP
angularjsangularjs-directive
Scott Nimrod
Scott Nimrod

Reputation: 11595

Unable to display a partial view in AngularJS

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>

Upvotes: 1

Views: 705

Answers (1)

jcreamer898
jcreamer898

Reputation: 8189

Are you running it just by opening the file?

Since ng-include uses Ajax, it won't work by simply opening like file://file.html you have to run it through some kind of server.

An easy way to test things if you're a node person is to use this...

https://github.com/andrewpthorp/simple-http-server

You can install it with npm install simple-http-server, and then spin up a server in any directory with nserver -p PORT.

Upvotes: 1

Related Questions