什么是AngularJS中的模板

AngularJS中的模板是简单的HTML文件，其中填充或丰富了AngularJS的东西，如属性和指令。一个指令是一个标记元素，用来锁定一个特定的属性或类，以根据需要呈现其行为。Angular中的模型和控制器与模板相结合，以操纵用户在其浏览器中看到的视图。Angular模板还可以容纳CSS、表单控件、过滤器和表达式。有两种类型的模板。

Static Template
Dynamic Templates

以下是说明这两种模板的例子。

静态模板：静态模板是通过使用一个脚本标签来定义的。必须提供一个id和type属性，其值为text/ng-template，才能使静态模板发挥作用。另外，需要注意的是，静态模板只有在ng-app范围内才能工作，否则，Angular会忽略它。一个静态模板可以通过使用ng-include指令来呈现。

For example:

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

实例1：本实例演示了AngularJS中的简单静态模板。

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

输出:

什么是AngularJS中的模板？

动态模板：正如其名称所示，动态模板用于与运行时环境一起工作。它是由Angular根据用户的需求进行编译和渲染的。一个动态模板可以通过使用ng-include指令来渲染。

For example:

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

例子2：这个例子演示了AngularJS中的动态模板。

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