Unable to display a partial view in AngularJS

Question

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>

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. — jcreamer898
– jcreamer898, Commented Jul 14, 2014 at 14:54
browser is likely rejecting the ajax call to retrieve template since you are running local file not localhost server — charlietfl
– charlietfl, Commented Jul 14, 2014 at 14:56

jcreamer898 · Accepted Answer · 2014-07-14 15:12:18Z

1

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.

answered Jul 14, 2014 at 15:12

jcreamer898

8,1895 gold badges44 silver badges58 bronze badges

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

1 Comment

Scott Nimrod Over a year ago

I would like to use Visual Studio to spin up the server. How can I do this when building an AngularJS app?

Collectives™ on Stack Overflow

Unable to display a partial view in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related