AngularJs ng-include: You can include another html file using ng-include directive. We sometimes need to include Html content from another html file so in that case we can use this directive. Here in this tutorial we are going to explain how you can use this directive to include another html file in AngularJs. You can also use our online editor to edit and run the code online.
AngularJs ng-include Example
Let us create a simple example to include the Another Html-
AngularJs ng-include Example:
<div ng-include="'anotherpage.Html'"></div> |
In the above example we have included another html template in the div.
Learn More
Let us have some more example about the ng-include.
Include AngularJs Code : Access JavaScript
You can directly access the AngularJs JavaScript inside the included template simply as below –
AngularJs ng-include Example:
<div ng-app="myApp"> <div ng-controller="myController"> <div ng-include="'anotherpage.html'"></div> </div> </div> |
In the above example we have two scope variables – $scope.myHeading and $scope.myTitle. You can access these scope variables in included template simply as below –
anotherpage.html Template
anotherpage.Html Page contains the following html, you can access the scope variables as-
AngularJs Access JavaScript Part:
<h1>Another Template</h1>
<h2>{{myHeading}}</h2>
<h3>{{myTitle}}</h3>
|
ng-include in Angularjs not working
We sometimes face issue regarding the ng-include not working. So make sure you have kept following things in mind –
- 1. No blank spaces in template path (ng-include=”‘anotherpage.html'”).
- 2. Remember to use single quotation in double quotation for another page path(ng-include=”‘anotherpage.html'”).