AngularJS Includes

  • To embed HTML or angularjs External file, we can use Includes directive in AngularJS application.
  • The ng-include directive is used to include the external HTML content into the application.
  • The external HTML content can also contains AngularJS code.
  • To access files from different domain, we can add a whitelist of domains and/or legal files in the config function of our AngularJS application.
  • $sceDelegateProvider is used to white list domains and/or legal files.
  • Be sure that the server on the destination allows cross domain file access.
  • cross domain file access can be done only when destination server allows.

Syntax for includes in AngularJS:

<element ng-include="URL"></element>

Parameter Values:

Parameter Description
ng-include Source URL of the file.
onload Script to execute onload.
autoscroll To scroll the page after the content is loaded

Sample code for Includes in AngularJS:

 Tryit<!DOCTYPE html>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="
        angular.min.js"> </script>
        <div ng-app="myApp" ng-controller="includeCtrl" >
                <h3>Includes HTML In AngularJS</h3>
                <div ng-include="'welcome.html'">"</div>
                <h3>Includes Angular Code In AngularJS</h3>
                <div ng-include="'technology.html'">"</div>
                var app = angular.module("myApp", []);
                app.controller("includeCtrl", function($scope, $http) {
                    $ = [ "HTML", "AngularJS", "CSS", "C", 
                "JAVA", "PHP", ];

Includes embedded Angularjs code from technology.html:

    <li ng-repeat="data in technology">{{data}}>   
  • technology.html file will call above angularjs code to list the content from $

Includes embedded HTML code from welcome.html:

<p>Welcome to Wikitechy!</p>
  • welcome.html file will call above HTML code to print the paragraph from external html file.

Code Explanation for Includes in AngularJS:

Code Explanation for AngularJS Includes

  1. The ng-controller is a directive to control the AngularJS Application.
  2. The ng-include directive is used to include the “welcome.html”. It will execute the HTML code inside this <div> tag.
  3. The ng-include directive is used to include the “technlogy.html”. It will execute the Angular code inside this <div> tag.
  4. The “includeCtrl” used to create the controller for the Application with $scope object argument.
  5. The $ is a collection of data stored in the $scope object.

Sample Output for Includes in AngularJS:

Sample Output for AngularJS Includes

  1. The content “Welcome to Wikitechy!” is included from “welcome.html“.
  2. The list of content is included from “technology.html”.

Related Searches to angularjs includes