Quick Contact


    AngularJSng-include

    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.

    How to Include HTML Code of One File to another File?

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

    • Client Side Include
    • Server Side Includes
    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>

    Example

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

    	< html>
    	< head>
    	< scriptsrc="/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.

    ‘$(‘#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.

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

    Purpose of ng include

    Enroll Yourself in Live Classes For Online Summer Training.

    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="">
    	
    Code of File.html
    	< !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.

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.