Online: 1863
Online: 1863
Online: 1863
In AngularJS, templates are the combination of HTML elements, directives, filters, attributes and expressions. Below are very simple example of a template.
<script>
var members = [
{ username: 'SheoNarayan', address: 'Hyderabad' },
{ username: 'Munna', address: 'Bokaro' },
{ username: 'Jay', address: 'Aurangabad' },
{ username: 'Sreeni', address: 'New York' }
];
var app = angular.module('app', []);
app.controller('MemberController', function($scope) {
$scope.Members = members;
});
</script>
</head>
<body ng-app="app">
<p>AngularJS basic template</p>
<h4>Listing item from the collection</h4>
<div ng-controller="MemberController">
<ul>
<li ng-repeat="member in Members">
{{$index + 1}}. Name: {{member.username }} | Address: {{ member.address}}
</li>
</ul>
</div>
</body>
In above code snippet, highlighted codes are basic example of template. In this, we have used ng-repeat directive to repeat the number of records in the Members collection.
In the script block, we have created a members collection (JSON code) and in the controller, we have simply set the $scope.Members to the member collection.
When the page loads, the data from Members are repeated and their properties values are set into <li> element.
Above templates where very basic in nature, there are many other ways to display dynamic templates or loading the template data from other html file. Those are achieved via ngView, $route and templateUrl that we cab see here and here.
Views: 10991 | Post Order: 13
