Skip to content
Related Articles

Related Articles

Improve Article

What are templates in AngularJS ?

  • Last Updated : 29 Aug, 2019

Templates in AngularJS are simply an HTML file 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 as 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 template:

  • Static Template
  • Dynamic Templates

Below examples illustrate both the templates:

  • Static Template: A static template is defined by using 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 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: This shows a simple template




    <!DOCTYPE html>
    <html ng-app>
      
    <head>
        <title>
            Angular Static Template
        </title>
        <style>
            h1{
                color:green;
            }
        </style>
    </head>
    <!-- Body tag augmented with ngController directive -->
      
    <body ng-controller="GeekController">
        <center>
        <h1>GeeksforGeeks</h1>
        <h4>Angular Static Template</h4>
        <br
         Input Value is :
        <input ng-model="geek" value="Your Value Here">
        <button ng-click="gfg()">Button</button>
        <script src="angular.js"></script>
        </center>
    </body>
      
    </html>

    Output:

  • Dynamic Templates: Just like the name says, 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 ng-include directive. For example:

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

    Example :




    <html>
      
    <head>
        <script src=
        </script>
        <script src=
        </script>
        <style>
            h1{
                color:green;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1>GeeksforGeeks</h1>
            <h4>Angular Dynamic Template</h4>
            <br>
            <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>
      </center>
            <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>

    Output:

    • When Add Course is clicked:
    • When View Courses is clicked:



    My Personal Notes arrow_drop_up
Recommended Articles
Page :