AngularJS | Includes
Embedding html page within html is not supported by HTML that’s why we used AngularJS Include Directives. By using ng-controller directive we can easily do the task.
Syntax:
<element ng-include=" ">content...<element>
Example:
<!DOCTYPE html><html><head> <script src= </script> <title>ng-include directives</title></head> <body ng-app=""> <center> <h1 style="color:green;">GeeksforGeeks</h1> <div ng-include="'geeks.html'"></div> </center></body></html> |
Output:
Including AngularJS code:Similar to previous case you include the html file by using ng-include similarly it can contain AngularJS code.
Example:
GeeksforGeeks.html table:
<table> <tr ng-repeat="x in courses"> <td>{{ x.Course }}</td> <td>{{ x.Duration }}</td> </tr></table> |
Code:
<!DOCTYPE html><html><head> <script src= </script></head><body> <div ng-app="geeks" ng-controller="customersCtrl"> <div ng-include="'Geekstable.html'"></div> </div> <script> var app = angular.module('geeks', []); app.controller('customersCtrl', function($scope, $http) { $http.get("customers.php").then(function (response) { $scope.courses = response.data.records; }); }); </script></body></html> |
Output:
Include Cross Domains:If you want to include files from another domain then you can add a whitelist of legal files or domains in the config function of your application.
Sample code:
<!DOCTYPE html><html> <script src= </script><body ng-app="myApp"> <div ng-include="'filel_path_from_anotherDomain'"></div> <script> var app = angular.module('myApp', []) app.config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist(['filel_path_from_anotherDomain']); }); </script></body></html> |
