AngularJS – Includes

The HTML does not support to include the client side code from the other files. Consider the example, if you want to develope the application for numberic operations. If we define or write the functionality in a separate files; that separate files can re-used across multiple application where we want. For performing this application we just include the functionality file( already specified). This technique norally include statment. But the include statments are available in java and .net programming.

This tutorial looks at other ways files (files which contain external HTML code) can be included in the main HTML file.

  1. Client Side includes
  2. Server Side Includes
  3. How to include HTML file in AngularJS




Client Side includes

The Javascript is the common way to include the HTML code.
Which can be used to manipulate the content in an HTML page on the fly because JavaScript is a programming language.
The below steps shows how this can be accomplished.

Step1) Define a file called Subpage.html and add the following code to the file.

This is an included file




Step 2) Create a file called index.html, which is your main application file and add the below code snippet.

  1. In the body tag, there is a div tag which has an id of Content. This is the place where the code from the external file ‘Subpage.html’ will be inserted.
  2. There is a reference to a jquery script. JQuery is a scripting language built on top of Javascript which makes DOM manipulation even easier.
  3. In the Javascript function, there is a statement ‘$(“#Content”).load(“Subpage.html”);’ which causes the code in the file Sub.html to be injected in the div tag which has the id of Content.
  4. 		 
    		 
    			 
    			 
    		 
    		 
    			

    Server Side Includes

    Server Side Includes are also available for including a common piece of code throughout a site. This is normally done for including content in the below parts of an HTML document.

    1. Navigation menu
    2. Page Header
    3. Page Footer

    How to include HTML file in AngularJS

    The ng-include directives helps to include the functionality from other AngularJS files. In the main AngularJS application, the primary purpose of the “ng-include directive” is used to compile, fetch and include an external HTML fragment.

    Syntax




    <div ng-include = “’includefile.html'”></div>

    Example

    includefile.html


    Id:
    Name:
    Details of Employee: {{empid + ", " + empname}}

    employeedetails.html

    
    
    
    
    




5 thoughts on “AngularJS – Includes

  1. wjvq5

    generic clomid pill can i buy cheap clomid price can you buy generic clomiphene pills can i order clomid online how can i get generic clomiphene can you buy generic clomid for sale where buy generic clomid

  2. Boyd

    Good day! Do you know if they make any plugins to help with Search Engine Optimization? I’m
    trying to get my blog to rank for some targeted keywords
    but I’m not seeing very good results. If you know of any please share.
    Thanks! You can read similar art here: Wool product

  3. wool product

    Good day! Do you know if they make any plugins to help with
    SEO? I’m trying to get my blog to rank for some targeted keywords but
    I’m not seeing very good success. If you know of any please share.
    Thanks! You can read similar art here: Warm blankets

  4. auto approve list

    Hi to every body, it’s my first visit of this web site;
    this weblog carries amazing and really excellent data in support
    of visitors.!

Leave a Reply

Your email address will not be published.