{"id":46391,"date":"2019-01-09T09:09:42","date_gmt":"2019-01-09T03:39:42","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=46391"},"modified":"2020-01-31T10:47:43","modified_gmt":"2020-01-31T05:17:43","slug":"ng-include-in-angularjs","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/ng-include-in-angularjs\/","title":{"rendered":"AngularJS ng include – 2 Best Ways to Include HTML Code in File"},"content":{"rendered":"

In our last session, we discussed ngmodel in AngularJS<\/strong><\/a>. Here, we will start a new topic, ng include or AngularJS Include. Along with this, we will study how to include HTML code into a file: client side include and server side include in AngularJS with their syntax and examples.<\/p>\n

So, are you ready to explore the ng include in AngularJS?<\/p>\n

\"ng<\/a>

AngularJS ng include – 2 Best Ways to Include HTML Code<\/p><\/div>\n

1. What is ng-include in AngularJS?<\/h2>\n

AngularJS provides functionality to include another angularJS file<\/strong> in the current file. By using ng-include directive<\/a><\/strong> we can perform this task.<\/p>\n

Suppose you have to use a single code or single logic multiple times so, rather than writing the same logic again and again, it’s better to write it once and use it again whenever required. This can be performed with ng-include in AngularJS. We can write the logic that we want to execute multiple times at different places in a single file and then we can include that file whenever and wherever we want that logic.<\/p>\n

The concept of include is present in .net and java<\/strong>.<\/p>\n

2. How to Include\u00a0HTML Code of One File to Another File?<\/h2>\n

There are two best ways to include HTML Code in a file.<\/p>\n

a. Client Side Include<\/h3>\n

For client side include in AngularJS, we can use a JavaScript programming language to embed the code of one file into another file.<\/p>\n

Create a file DemoOne.htm<\/p>\n

<div>This file is to be included.<\/div><\/pre>\n
i. Example of Client Side ng include<\/h4>\n
Create another file Main.html where DemoOne.htm includes.<\/p>\n
<html> \r\n  <head> \r\n  <script src=\"\/jquery.js\"><\/script> \r\n  <script> \r\n  $(function(){\r\n  $(\"#Content\").load(\"DemoOne.htm\"); \r\n  });\r\n    <\/script> \r\n  <\/head>\r\n\r\n<body> \r\n    <div id=\"Content\"><\/div>\r\n   <\/body> \r\n<\/html><\/pre>\n
Output:<\/strong><\/p>\n
This file is to be included<\/p>\n
Do you know what is AngularJS MVC Architecture and how it works?\u00a0<\/a><\/strong><\/p>\n
\u2018$(\u2018#context\u2019).load(\u201cname_of_HTMLfile\u201d);\u2019 is the statement in a javascript function, which we use for inserting the code of an external file in the main file. Here, name_of_HTML file is the name of an external file whose logic you want to access in an external file.<\/p>\n
b. Server Side Includes<\/h3>\n
The\u00a0Server side includes in AngularJS, are available throughout a site as a small piece of code. We can use it for the navigation menu, page header, page footer. It can accept various extensions, some of them are .shtml, .stm, .shtm, .cgi.<\/p>\n
Syntax:<\/strong><\/p>\n
#include virtual=\"navigation.shtm\"<\/pre>\n
Virtual is a command in the above syntax used to specify the target or destination relative to the\u00a0particular domain. If we want to specify the path of a directory of a file, we can use “file parameter” (navigation.shtm is the name of a file that the user wants to include).<\/p>\n
3. Purpose of ng include<\/h2>\n
We can use ng include in AngularJS mainly for these three purposes:<\/p>\n