AngularJS Tutorial - ng-include

Use ng-include to fetch, compile, and include an external HTML fragment into your current application.

The URL of the template is restricted to the same domain.

Example

The following code shows how to ng-include.


<!--from  w w  w.  ja v a  2s .  com-->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body>
  <div ng-app>
  <script type="text/ng-template" id="/tpl.html">
      I am from a template.
  </script>
  <ng-include src="'/tpl.html'"></ng-include>
</div>  
</body>
</html>

The code above is rendered as follows:

ng-include creates a new child scope.

To use a particular scope, invoke the ng-controller="YourController" directive on the same DOM element.

<div ng-include="/myTemplateName.html"
            ng-controller="MyController"
            ng-init="name =  'World'">
     Hello {{  name  }}
</div>