If you are interested to learn about the AngularJs API
With AngularJS, you can include HTML from an external file. 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.
<div ng-app = "" ng-controller = "studentController">
<div ng-include = "'main.htm'"></div>
<div ng-include = "'subjects.htm'"></div>
</div>AngularJS Includes
With AngularJS, you can include HTML content using the ng-include directive:
Example
<body ng-app=""> <div ng-include="'myFile.htm'"></div> </body>
Include AngularJS Code
The HTML files you include with the ng-include directive, can also contain AngularJS code:
myTable.htm:
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>Include the file “myTable.htm” in your web page, and all AngularJS code will be executed, even the code inside the included file:
Example
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-include="'myTable.htm'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>
Include Cross Domains
By default, the ng-include directive does not allow you to include files from other domains. To include files from another domain, you can add a whitelist of legal files and/or domains in the config function of your application:
Example:
<body ng-app="myApp">
<div ng-include="'https://tryit.w3schools.com/angular_include.php'"></div>
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'https://tryit.w3schools.com/**'
]);
});
</script>
</body>tryAngularJS.htm
<html>
<head>
<title>Angular JS Includes</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<div ng-include = "'/angularjs/src/include/main.htm'"></div>
<div ng-include = "'/angularjs/src/include/subjects.htm'"></div>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>main.htm
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>
<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
</table>subjects.htm
<p>Subjects:</p>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>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.
AngularJS Sample Application
| Enter first name: | |
| Enter last name: | |
| Name: | Mahesh Parashar |
Subjects:
| Name | Marks |
|---|---|
| Physics | 70 |
| Chemistry | 80 |
| Math | 65 |
| English | 75 |
| Hindi | 67 |
