What are templates in AngularJS ?

Last Updated : 12 Sep, 2022

Templates in AngularJS are simply HTML files filled or enriched with AngularJS stuff like attributes and directives. A directive is a marker element that is used to target a particular attribute or class to render its behavior according to the needs. Model and controller in Angular are combined with the templates to manipulate the view the user sees in his/her browser. Angular templates can also accommodate CSS, Form controls, Filters, and Expressions. There are two types of templates:

Static Template
Dynamic Templates

Below are examples illustrating both templates.

Static Template: A static template is defined by using a script tag. An id and type attribute with value text/ng-template must be provided to it for the static template to work. Also, it should be noted that a static template will work only if it is under the ng-app scope, otherwise, it will be ignored by Angular. A static template can be rendered by using the ng-include directive.

For example:

<div ng-include="'geeksforgeeks.html'"></div>

Example 1: This example demonstrates the simple static template in AngularJS.

HTML

<!DOCTYPE html>
<html ng-app>
 
<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <title>Angular Static Template</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
 
<body ng-controller="GeekController">
    <h1>GeeksforGeeks</h1>
    <h3>Angular Static Template</h3>
    <br> Input Value is:
    <input ng-model="geek" value="Your Value Here">
    <button ng-click="gfg()">Button</button>
    <script src="angular.js"></script>
</body>
</html>

Output:

Dynamic Templates: Just like the name suggests, the dynamic templates are used to work with the runtime environments. It is compiled and rendered by Angular on user demand. A dynamic template can be rendered by using the ng-include directive.

For example:

<div ng-include="'templates/geeksforgeeks.html'"></div>

Example 2: This example demonstrates the Dynamic Template in AngularJS.

HTML

<html>
 
<head>
    <title>Angular Dynamic Template</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">
    </script>
    <style>
        body {
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Angular Dynamic Template</h3>
    <div ng-app="gfg">
        <p>
            <a href="#addCourse">Add Course</a>
        </p>
        <p>
            <a href="#viewCourses">View Courses</a>
        </p>
        <div ng-view></div>
        <script type="text/ng-template"
                id="addCourse.htm">
            <h2> Add Course </h2> {{message}}
        </script>
        <script type="text/ng-template"
                id="viewCourses.htm">
            <h2> View Courses </h2> {{message}} 
        </script>
    </div>
    <script>
        var gfg = angular.module("gfg", ['ngRoute']);
        gfg.config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/addCourse', {
                templateUrl: 'addCourse.htm',
                controller: 'AddCourseController'
            }).when('/viewCourses', {
                templateUrl: 'viewCourses.htm',
                controller: 'ViewCoursesController'
            }).otherwise({
                redirectTo: '/addCourse'
            });
        }]);
        gfg.controller('AddCourseController', function($scope) {
            $scope.message = 
            "This page will be used to display add Course";
        });
        gfg.controller('ViewCoursesController', function($scope) {
            $scope.message =
            "This page will be used to display all the Courses";
        });
    </script>
</body>
</html>