AngularJS - Includes

HTML does not support embedding HTML pages within the HTML page. To achieve this functionality, we can use one of the following options −

• Using Ajax − Make a server call to get the corresponding HTML page and set it in the innerHTML of HTML control.

• Using Server Side Includes − JSP, PHP and other web side server technologies can include HTML pages within a dynamic page.

Using AngularJS, we can embed HTML pages within an HTML page using ng-include directive.

Example

tryAngularJS.htm

   
      
      
      
      
   
   
   
      
AngularJS Sample Application
      
      

         

         

      
      
      
      
   

main.htm

   

      
Enter first name:
      

   
   
   

      
Enter last name: 
      

   
   
   

      
Name: 
      
{{student.fullName()}}
   

subjects.htm

Subjects:

   

      
Name
      
Marks
   
   
   

      
{{ subject.name }}
      
{{ subject.marks }}
   

Output

To execute this example, you need to deploy testAngularJS.htm, main.htm, and subjects.htm to a web server. Open the file testAngularJS.htm using the URL of your server in a web browser and see the result.