- The ng-include directive is used to include the external HTML content into the application.
- The external HTML content can also contain AngularJS code.
- The included files must be located on the same domains as the document.
- The ng-include directive creates new scope.
- The ng-include directive compile at priority level 400.
Syntax for ng-include Directive in AngularJS:
||Source URL of the file.
||Script to execute onload.
||To scroll the page after the content is loaded
Sample code for ng-include Directive in AngularJS:
- Set of data has been used in our AngularJS Application.
- Viewable HTML contents in AngularJS Application.
- Controller logic for the AngularJS application.
Sample code for technology.html:
Sample code for welcome.html:
Code Explanation for Ng-include in AngularJS:
- The ng-controller is a directive to control the AngularJS Application.
- The “ng-include” directive is used to include the “welcome.html”.
- The “ng-include” directive is used to include the “technlogy.html”.
- The “includeCtrl” used to create the controller for the Application with $scope object argument.
- The $scope.technology is a collection of data stored in the $scope object.
Sample Output for ng-href directive in AngularJS:
- The content “Welcome to Wikitechy!” is included from “welcome.html“.
- The list of content is included from “technology.html”.
Related Searches to angularjs ng-include directive
ng-include not working
ng-include relative path
ng include pass variable
ng-include vs ng-view