Updated on Kisan Patel
Use ng-include, you can fetch, compile, and include an external HTML fragment into your current application.
For example, your main HTML file can have different sections like a header, a footer, a sidebar etc. You can put the template for these components in separate HTML files, and include them into your main HTML.
The following is an example code for the usage of the ngInclude directive:
<div ng-include="'menu.html'"></div>
<h1>This is the studentView1</h1>
template/studentView2.html
<h1>This is the studentView2</h1>
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AngularJS ng-include Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="studentController">
<div ng-include="'template/studentView1.html'"></div>
<div ng-include="'template/studentView2.html'"/></div>
</div>
</body>
</html>
<script type="text/javascript">
var myModule = angular.module("myApp", []);
myModule.controller('studentController', function ($scope) {
});
</script>
You can also use ng-include as a standalone element as follow:
<ng-include src="'menu.html'"></ng-include>