What are templates in AngularJS ?

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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 :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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


  • My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.