AngularJS > Components

Templates in AngularJS

What are templates in AngularJS?

In AngularJS, templates are the combination of HTML elements, directives, filters, attributes and expressions. Below are very simple example of a template.

        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;
<body ng-app="app">
    <p>AngularJS basic template</p>
    <h4>Listing item from the collection</h4>

    <div ng-controller="MemberController">
            <li ng-repeat="member in Members">
               {{$index + 1}}.  Name: {{member.username }} | Address: {{ member.address}}


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.

Complex templates

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: 2981 | Post Order: 13

Write for us