<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.js"></script>
<link href="style.css" rel="stylesheet" />
<script type="text/ng-template" charset="utf-8" id="teen-internal.html">
<tr>
<td>{{teen.name}}</td>
<td>{{teen.birthday}}</td>
<td>{{teen.happy}}</td>
</tr>
</script>
<script src="script.js"></script>
</head>
<body>
<h1>AngularJS - Different templating methods </h1>
<ul>
<li>Inline templates - in body of HTML</li>
<li>Defined within Javascript</li>
<li>Template included within script tags</li>
<li>Template in a separate external HTML file</li>
</ul>
<div ng-controller="PersonCtrl">
<h2>Teens - using inline template</h2>
<table>
<tr>
<th>Name</th>
<th>Birthday</th>
<th>Happy?</th>
</tr>
<tr ng-repeat="teen in teens">
<td>{{teen.name}}</td>
<td>{{teen.birthday}}</td>
<td>{{teen.happy}}</td>
</tr>
</table>
<h2>Teens - using javascipt-defined template</h2>
<table>
<tr>
<th>Name</th>
<th>Birthday</th>
<th>Happy?</th>
</tr>
<tr ng-repeat="teen in teens" teen-javascript teen="teen"></tr>
</table>
<h2>Teens - using script tag defined template</h2>
<table>
<tr>
<th>Name</th>
<th>Birthday</th>
<th>Happy?</th>
</tr>
<tr ng-repeat="teen in teens" teen-internal teen="teen"></tr>
</table>
<h2>Teens - using external HTML file as template</h2>
<table>
<tr>
<th>Name</th>
<th>Birthday</th>
<th>Happy?</th>
</tr>
<tr ng-repeat="teen in teens" teen-external teen="teen"></tr>
</table>
</div>
</body>
</html>
// Instantiate the app, the 'myApp' parameter must match what is in ng-app
var myApp = angular.module('myApp', ['ngResource']);
// Create services for each Toddler, Teen, Adult
/**
* Teen is a service that calls a local .json file teens.json
* The query method is added to allow returning an array of multiple Teen objects
*/
myApp.factory('Teen', function($resource) {
return $resource('teens.json');
});
/**
* Use a javascript-based template
*/
myApp.directive('teenJavascript', function() {
return {
restrict: 'AE',
scope: {
teen: '='
},
template: '<tr><td>{{teen.name}}</td><td>{{teen.birthday}}</td><td>{{teen.happy}}</td></tr>'
};
});
/**
* Use a template from an external HTML file
*/
myApp.directive('teenExternal', function() {
return {
restrict: 'AE',
scope: {
teen: '='
},
templateUrl: 'teen-external.html'
};
});
/**
* Use a template from a <script> tag
*/
myApp.directive('teenInternal', function() {
return {
restrict: 'AE',
scope: {
teen: '='
},
templateUrl: 'teen-internal.html'
};
});
// Create the controller, the 'PersonCtrl' parameter must match an ng-controller directive
myApp.controller('PersonCtrl', function ($scope, Teen) {
// Teens are from static json file
$scope.teens = Teen.query();
});
body {
font-size: 24px;
}
[
{
"name": "Teen One",
"birthday": "1/1/2001",
"happy": true
},
{
"name": "Teen Two",
"birthday": "2/2/2001",
"happy": true
},
{
"name": "Teen Three",
"birthday": "3/3/2001",
"happy": false
}
]
<tr>
<td>{{teen.name}}</td>
<td>{{teen.birthday}}</td>
<td>{{teen.happy}}</td>
</tr>