Subscribe via RSS Feed

Angular Templates

June 4, 2014 5 Comments

In Angular, templates are written with HTML that contains Angular-specific elements and attributes. Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser.

These are the types of Angular elements and attributes we can use:

Directive — An attribute or element that augments an existing DOM element or represents a reusable DOM component.
Markup — The double curly brace notation {{ }} to bind expressions to elements is built-in Angular markup.
Filter — Formats data for display.
Form controls — Validates user input.

Now let us see how we can use templates in angular? In the below we have a example where we are using router to change the templates on click of an hyperlink. Everytime we click a hyperlink as well as one template is never changing, the other template is unlike. In this set of codes we will be seeing that each of the template has a template url addressed to another html page. Where we can find the rest of the info.

Let us look into the codes to understand more.

Html file:

<!DOCTYPE html>

<!-- define angular app -->
<html ng-app="scotchApp">

  <!-- SCROLLS -->
  <link rel="stylesheet" href="//" />
  <link rel="stylesheet" href="//" />

  <!-- SPELLS -->
  <script src=""></script>
  <script src="//"></script>
  <script src="script.js"></script>

<!-- define angular controller -->

  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">Angular Template Example</a>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>


  <div id="main">

    <!-- angular templating -->
		<!-- this is where content will be injected -->
    <div ng-view></div>




javascript file:

// create the module and name it scotchApp
	var scotchApp = angular.module('scotchApp', ['ngRoute']);

	// configure our routes
	scotchApp.config(function($routeProvider) {

			// route for the home page
			.when('/', {
				templateUrl : 'pages/home.html',
				controller  : 'mainController'

			// route for the about page
			.when('/about', {
				templateUrl : 'pages/about.html',
				controller  : 'aboutController'

			// route for the contact page
			.when('/contact', {
				templateUrl : 'pages/contact.html',
				controller  : 'contactController'

	// create the controller and inject Angular's $scope
	scotchApp.controller('mainController', function($scope) {
		// create a message to display in our view
		$scope.message = 'Everyone come and see how good I look!';

	scotchApp.controller('aboutController', function($scope) {
		$scope.message = 'Look! I am an about page.';

	scotchApp.controller('contactController', function($scope) {
		$scope.message = 'Contact us! JK. This is just a demo.';


The ngBindTemplate directive specifies that the element text content should be replaced with the interpolation of the template in the ngBindTemplate attribute. Unlike ngBind, the ngBindTemplate can contain multiple {{ }} expressions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements.

Let us look through a set of codes:

Html file:

 <div ng-app="" ng-controller="Ctrl">
    Salutation:       <input type="text" ng-model="salutation" ng-model-instant="" />
      <br />

    Name:       <input type="text" ng-model="name" ng-model-instant="" />
      <br />
          <tr ng-repeat="key in counter">
              <span ng-bind-template="{{key}}: {{salutation}} {{name}}!"></span>

Javascript file:

<script>function Ctrl($scope) {
    $scope.salutation = 'Hello';
    $ = 'World';
    $scope.counter = ['1', '2'];

In the above we can see that template can be created and used in many ways in angularjs. And also with view we can expand template’s working area.

Related Links:
1>Directive in Angular.js – Part 1
2>Directive in Angular.js – Part 2
3>Working with Modules in Angular.js
4>Angular Router and UI-Router
5>Angularjs and Services
6>Angular.js Promise
7>Angular.js Two Way Data Binding
8>How To Use Filter In Angular.js
9>Using Controllers in Angular.Js
10>Angularjs with Server Side Interaction
11>Working Through Angular.js With Transclude
12>Angular.js Event Handling

If you find this article helpful, you can connect us in Google+ and Twitter.