AngularJS - include url template

Angularjs ng-include can be used to include inline or external (url) templates. This tutorial will cover including url template using ng-include.

ng-include usage

As element:
<ng-include
  src="string"
  [onload="string"]
  [autoscroll="string"]>
...
</ng-include>

As attribute:
<ANY
  ng-include="string"
  [onload="string"]
  [autoscroll="string"]>
...
</ANY>

Template used for this tutorial

Url: /demo2/ng/hello-template.html

<b>Hello {{someValue}}!</b>

Example – include template url as element

Note that since src attribute is a string constant, it needs to be wrapped in single quotes.

<div ng-app="myApp" ng-controller='MyCtrl'>
  <ng-include src="'/demo2/ng/hello-template.html'"></ng-include>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope) {
  $scope.someValue = "template world";
});
</script>

refresh

try it online

Example – include template url as attribute

Note that since ng-include attribute is a string constant, it needs to be wrapped in single quotes.

<div ng-app="myApp" ng-controller='MyCtrl'>
  <div ng-include="'/demo2/ng/hello-template.html'"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope) {
  $scope.someValue = "template world";
});
</script>