EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJs ng-include
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

AngularJs ng-include

AngularJs ng-include

Introduction to AngularJs ng-include

AngularJS ng-include is an In-Built AngularJS directive that is used to include an external HTML file into the current HTML view. The ng-include directive searches for the mentioned HTML file and then compiles it and adds it to the existing Html Page. The value inside this ng-include directive can be an expression and is referred to as a Template URL. This template URL should always be on the same domain and protocol as the application document.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,883 ratings)

Syntax

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

There are various HTML elements with which the ng-include directive is used

Using ng-include as HTML Element

<ng-include src="srcFileUrl" onload="onLoadAction" autoscroll="onScrollAction">
……………………
</ng-include>

Using ng-include as the CSS class

<div class="ng-include: srcFileUrl; [onload: onLoadAction;] [autoscroll: onScrollAction;]">
……………………
</div>

Using ng-include as Attribute

<div ng-include="string” onload="string" autoscroll="string">
…………………………
</div>

How does the ng-include directive work in AngularJS?

In the AngularJS framework, it is very important to know that all the In-Built directive which the AngularJS framework has provisioned will always be denoted with the ng prefix.

The ng-include directive is used to search for an HTML file, compile that HTML file, and finally include the HTML file in the current HTML page where the ng-include directive is used. The template URL, i.e. the value defined inside this ng-include directive, is limited to the same domain and protocol as the application document. The entire mechanism of ng-include works by just calling $sce.getTrustedResourceUrl(value), where $sce is an angularJS service that provides Strict Contextual Escaping.

While using the ng-include directive in your AngularJS application, you might come across CORS issues Cross-Origin Resource Sharing (CORS) on different browsers. In this case, where you need to load templates from other domains or other protocols, then you can add them to your trusted resource URL list, which will set the url as a trusted url in your application.

The ng-include directive is executed at priority level -400 and creates new scope every time it is invoked.

Example of AngularJs ng-include

Different example are mentioned below:

Index.html

<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="templateController">
<h1>View Details</h1>
<h3 ng-click="loadTemplate1()">Load Personal Details</h3>
<div ng-if="loadPersonalTemplate">
<span ng-include="templateUrl1"></span>
</div>
<h3 ng-click="loadTemplate2()">Load Education Details</h3>
<div ng-if="loadEducationTemplate">
<span ng-include="templateUrl2"></span>
</div>
<h3 ng-click="loadTemplate3()">Load Extra Curricular Details</h3>
<div ng-if="loadExtraTemplate">
<span ng-include="templateUrl3"></span>
</div>
</div>
</body>
</html>

Script.js

function templateController($scope) {
$scope.loadPersonalTemplate = false;
$scope.loadEducationTemplate = false;
$scope.loadExtraTemplate = false;
$scope.loadTemplate1 = function() {
$scope.loadPersonalTemplate = true;
$scope.templateUrl1 = "PeronalDetail.html";
};
$scope.loadTemplate2 = function() {
$scope.loadEducationTemplate = true;
$scope.templateUrl2 = "EducationDetail.html";
};
$scope.loadTemplate3 = function() {
$scope.loadExtraTemplate = true;
$scope.templateUrl3 = "ExtraDetail.html";
};
}

PeronalDetail.html

<div> This is the template for personal Details
<div> First Name : XYZ</div>
<div> Last Name : ABC</div>
<div> Age : 25</div>
<div> Gender : Female</div>
<div> Place : Mumbai</div>
</div>

ExtraDetail.html

<div> This is the template for Extra Details
<div> Hobbies : Music, Dance</div>
</div>

EducationDetail.html

<div> This is the template for Education Details
<div> BTech</div>
</div>

The above example shows different ways of using the ng-include directive in HTML view in an AngularJS application. We have taken various HTML elements to showcase the use of the ng-include directive in the HTML template.

Here index.html is the main html element that is loaded at the start. In this html page, different html pages can be included using the ng-include directive of angularJS. As explained above, the ng-include directive takes the input value in string format and should be the html file name that needs to be included.

The included HTML file gets added exactly at that place where it’s being written in index.html.

The included HTML file that is PeronalDetail.html, ExtraDetail.html and EducationDetail.html are small section of html element, which can start with <div> tag start with <span> html element tag.

The AngularJS will fetch for this html file and compile and execute this newly included HTML file and finally append the element to the DOM.

This way, segregation of various HTML sections can be achieved in angularJS by using the ng-include directive. This also provides improved code readability.

<h3 ng-click="loadTemplate1()">Load Personal Details</h3>

On click of Load personal details, controller function loadTemplate1 is invoked.

<div ng-if="loadPersonalTemplate">

If the Boolean value loadPersonalTemplate is true, then only the templateUrl1 will be loaded and included in the current HTML file; if not, this file won’t be loaded. Also, templateUrl1’s value is PeronalDetail.html.

So it will load that HTML file.

<span ng-include="templateUrl1">

This line will include template URL1 in the index.html

On click of each element different template URL is fetched, executed, and compiled in the index.html file

$scope.loadTemplate1 = function() {

This function will update the value of loadPersonalTemplate boolean and set the templateUrl1 to ”PeronalDetail.html.”

<h3 ng-click="loadTemplate2()">Load Education Details</h3>

On click of Load Education details, controller function loadTemplate2 is invoked.

<div ng-if="loadEducationTemplate">

If the Boolean value loadEducationTemplate is true, then only the templateUrl2 will be loaded and included in the current HTML file; if not, this file won’t be loaded. Also, templateUrl2’s value is EducationDetail.html.

So it will load that HTML file.

<span ng-include="templateUrl2">

This line will include template URL 2 in the index.html

On click of each element different template URL is fetched, executed, and compiled in the index.html file

$scope.loadTemplate2 = function() {

This function will update the value of loadEducationTemplate boolean and set the templateUrl2 to “EducationDetail.html.”

<h3 ng-click="loadTemplate3()">Load Extra Curricular Details</h3>

On click of Load Extra-Curricular Details, controller function loadTemplate3 is invoked.

<div ng-if="loadExtraTemplate">

If the Boolean value loadExtraTemplate is true, then only the templateUrl3 will be loaded and included in the current HTML file; if not, this file won’t be loaded. Also, templateUrl3’s value is ExtraDetail.html.

So it will load that HTML file.

<span ng-include="templateUrl3">

This line will include template URL 3 in the index.html

On click of each element different template URL is fetched, executed, and compiled in the index.html file

$scope.loadTemplate3 = function() {

This function will update the value of loadExtraTemplate boolean and set the templateUrl2 to “ExtraDetail.html.”

Output:

Output: 1 – View Details Template

AngularJs ng-include output 1

Output 2: Load Personal Details

AngularJs ng-include output 2

Output 3: Load Education Details

Load Education Details

Output 4: Load Extra-Curricular Details

AngularJs ng-include output 4

Conclusion

ng-include is a directive in AngularJS that comes with a lot of importance in AngularJS application. This directive is used for adding a new HTML element to an existing element. Knowing where and when ng-include will get triggered is very important. There are different HTML tags with which this directive can be used. This directive provides a better code reality and segregating the HTML sections into different html templates.

Recommended Articles

This is a guide to AngularJs ng-include. Here we discuss How does the ng-include directive work in AngularJS along with the examples. You may also have a look at the following articles to learn more –

  1. AngularJS Number Filter
  2. Angular 7 Components
  3. AngularJS Validation
  4. Angular Bootstrap Datepicker
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more