CODEWITHSUNDEEP
angularjsangularjs-ng-include
Aleski
Aleski

Reputation: 1442

ng-include Won't Work Without <Body> Tags

I am starting to get to grips with a lot of the angularjs tutorials out on the net and I seem to have stubbled upon something that my googlefu cant seem to crack.

Below is my html. In my app.js I simply instantiate the angular module and declare 'ui-router' as a dependancy, nothing flash.

<body id="home">

<!-- INIT: app -->
<div class="container" ng-app="app">

    <!-- GET: Header partial -->
    <div ng-include src="'templates/header.html'"></div>

    <!-- INIT: Angular-ui-router -->
    <div ui-view>

    </div>

    <!-- GET: Footer partial -->
    <div ng-include src="'templates/footer.html'"></div>
</div>

<!-- GET: Various Vendor JS files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="vendorjs/bootstrap.min.js"></script>
<script src="vendorjs/angular.js"></script>
<script src="vendorjs/angular-ui-router.js"></script>

<!-- GET: My own app JS files -->
<script src="js/app.js"></script>

</body>

Now for some reason, the files that are included using ng-include need to have <body></body> tags wrapped around their content or nothing is displayed.

I haven't seen this mentioned anywhere so is there something awry here as I'm totally lost. The current work around is fine but It feels funky.

NOTE: I am using live-server package from npm live-server to have my local file refresh in the browser on save. I don't think this is the issue as even if I simply just open the index.html file it still doesn't work (but that's because of chrome's safety rules).

Cheers!

Upvotes: 1

Views: 540

Answers (1)

Stephen &#211; Connor
Stephen &#211; Connor

Reputation: 376

Yep, had the same problem with ng-include and Live-Server not loading the partial. ng-include displays the partial in my localhost but not live-server.

This issue has been fixed in the latest version of live-server. So I updated my live-server to version 0.7.1 and ng-include now works just fine.

GitHub - tapio commented 15 days ago "I've published version 0.7.1 to npm which seems to fix this issue. Feel free to test and report any further problems. :)" GitHub live-server issue

Upvotes: 1

Related Questions