Search code examples
javascripthtmlangularjsangularjs-ng-include

Ng-include not populating div

On my webpage I have multiple instances where the same table will be shown. So instead of having the table hard coded in every time I'm using ng-include from AngularJS. But for some reason once I place the table inside its own html page and put an ng-include in its place it just doesn't appear on the page at all. The only clue i get is in the console log it has an error stating "angular.js:9827 GET http://localhost:58893/Dashboards/project-information.html 404 (Not Found)"

index.cshtml

<div class="ibox-content" id="ibox-2"><!--DIV CONTENT-->
    <div class="active content table-responsive" ng-include="'project-information.html'"></div>
</div>

project-information.html

<table class="table selectOption">
<thead>
    <tr>
        <th>#</th>
        <th>Project </th>
        <th>Name </th>
        <th>Phone </th>
        <th>Company </th>
        <th>Date</th>
    </tr>
</thead>
<tbody>
    <!--Angular; Repeats all of the content in the dTIMS project array-->
    <tr class="option" ng-repeat="product in projectCtrl.products">
        <td>{{  product.id  }}</td>
        <td>{{  product.name  }}</td>
        <td>{{  product.supervisor  }}</td>
        <td>{{  product.phone  }}</td>
        <td>{{  product.company  }}</td>
        <td>{{  product.date  }}</td>
    </tr>
</tbody>

app.js

app.controller('ProjectController', function () {
    this.products = projects
});

header.cshtml

<html ng-app="dTIMSApp">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script type="text/javascript" src="~/Scripts/app.js"></script>
    </head>
    <body ng-controller="ProjectController as projectCtrl">
        ....call to the index page inside here
    </body>
</html>

enter image description here

Solution

  • Some servers doesn't allow to access views folder.

    Create a folder "includes" on your existing Scripts folder, and put html into.

    On ng-include, use the new path:

    <div 
    class="active content table-responsive" 
    ng-include="'/Scripts/includes/project-information.html'">
</div>