Angularjs ng-include can be used to include internal or external (separate url) templates. This tutorial will cover including inline 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>
Example – include inline template 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="'t1'"></ng-include>
<script type="text/ng-template" id="t1">
<b>Hello {{someValue}}!</b>
</script>
</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 t1";
});
</script>Example – include inline template 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="'t1'"></div>
<script type="text/ng-template" id="t1">
<b>Hello {{someValue}}!</b>
</script>
</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 t1";
});
</script>
