AngularJS ng include – 2 Best Ways to Include HTML Code in File

In our last session, we discussed ngmodel in AngularJS. 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.

So, are you ready to explore the ng include in AngularJS?

ng include Tutorial

AngularJS ng include – 2 Best Ways to Include HTML Code

1. What is ng-include in AngularJS?

AngularJS provides functionality to include another angularJS file in the current file. By using ng-include directive we can perform this task.

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.

The concept of include is present in .net and java.

2. How to Include HTML Code of One File to Another File?

There are two best ways to include HTML Code in a file.

a. Client Side Include

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

Create a file DemoOne.htm

<div>This file is to be included.</div>

i. Example of Client Side ng include

Create another file Main.html where DemoOne.htm includes.

<html> 
  <head> 
  <script src="/jquery.js"></script> 
  <script> 
  $(function(){
  $("#Content").load("DemoOne.htm"); 
  });
    </script> 
  </head>

<body> 
    <div id="Content"></div>
   </body> 
</html>

Output:

This file is to be included

Do you know what is AngularJS MVC Architecture and how it works? 

‘$(‘#context’).load(“name_of_HTMLfile”);’ 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.

b. Server Side Includes

The Server 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.

Syntax:

#include virtual="navigation.shtm"

Virtual is a command in the above syntax used to specify the target or destination relative to the particular 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).

3. Purpose of ng include

We can use ng include in AngularJS mainly for these three purposes:

  • Fetch the external HTML fragments in our main angular application.
  • To compile the external HTML fragments in our main angular application.
  • To include the external HTML fragments in our main angular application.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">

<div ng-include="File.htm'"></div>

</body>
</html>
s"></script>
<body ng-app="">

Recommended Reading -Different Ways for Data Binding in AngularJS

Code of File.htm

<!DOCTYPE html>
<html>
<body>

<h1>Include Header</h1>

<p>Using ng-include, this text has been included into the HTML page!

</p>

</body>
</html>

Output:

Include Header

Using ng-include, this text has been included in the HTML page!

In the above code with the ng-include directive, you have to specify the name of the file which we want to include in our main file.

Syntax:

<div ng-include="name_of_html_file">
</div>

Since angular uses the HTML language for the view part. In HTML it is not possible to embed HTML pages to achieve this, we can use Ajax or server side includes. While knowing a case of angular, we can use an ng-include directive to achieve the same functionality.

Do you know how to create AngularJS modules?

Note: By default, there is a constraint on a URL of a template that a particular URL is restricted to the same domain and protocol for that particular document only. We can do so by calling $sce.getTrustedResourceUrl on it. To load templates from other protocols or domains you may either wrap them or whitelist them as a trusted value.

So, this was all about ng-include in AngularJS. Hope you liked our explanation.

3. Conclusion

Therefore, we can conclude that include directive provides a way for code reusability. Using ng-include directive, we can access one angular file in another angular file. Without using ng-include in AngularJS we have to write the same code of one file again in another file to perform the same logic.

Hence, we can say that ng- include directives are used for injecting the code of an external file in our main file so that, we can reuse the logic present in the external file in the main file without re-writing it. Furthermore, if you have any query, feel free to ask in the comment box.

Related Topic – 10 Reasons to learn Angular JS

Leave a Reply

Your email address will not be published. Required fields are marked *