October 12, 2016

AngularJs ng-include

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.

Note : To include template you have to wrap template by double quotes and single quotes as – ng-include=”‘anotherpage.html'” .

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:

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
 <script>
var myApp = angular.module("myApp", []);
 myApp.controller("myController", function($scope) { 
 // controller code goes here..
 $scope.myHeading = "Welcome to Tutorialsplane.com!";
 $scope.myTitle = "Simple Learning ..";
});
</script>
</head>
<body>  
<div ng-app="myApp">  
<div ng-controller="myController"> 
 <div ng-include="'anotherpage.html'"></div>
</div>
</body>  
</html>

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'”).

AngularJs ng-include