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">

<head>
  <!-- SCROLLS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

  <!-- SPELLS -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
  <script src="script.js"></script>
</head>

<!-- define angular controller -->

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

      <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>

      </ul>
    </div>
  </nav>

  <div id="main">

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

  </div>

</body>

</html>

javascript file:

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

	// configure our routes
	scotchApp.config(function($routeProvider) {
		$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.';
	});

ngBindTemplate

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 />
      <table>
        <tbody>
          <tr ng-repeat="key in counter">
            <td>
              <span ng-bind-template="{{key}}: {{salutation}} {{name}}!"></span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

Javascript file:

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

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.

Sign Up to read the rest of the content

Email will be used only for updates of our site

No Thanks