AngularJS中的模板是什么？

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

模板有两种类型：

• 静态模板
• 动态模板

以下示例说明了这两个模板：

• 静态模板：使用脚本标签定义静态模板。必须提供具有值text / ng-template的id和type属性，静态模板才能工作。另外，应该注意的是，静态模板仅在ng-app范围内有效，否则它将被Angular忽略。
  可以使用ng-include指令呈现静态模板。例如：

  示例：这显示了一个简单的模板

    
  
      
          Angular Static Template
      
      
          h1{
              color:green;
          }
      
  
  
    
  
      
      GeeksforGeeks
      Angular Static Template
       
       Input Value is :
      
      Button
      
      
  
    

  输出：

• 动态模板：顾名思义，动态模板用于运行时环境。它由Angular根据用户需求进行编译和渲染。可以使用ng-include指令呈现动态模板。例如：

  例子 ：

    
  
      
      
      
      
      
          h1{
              color:green;
          }
      
  
    
  
      
          GeeksforGeeks
          Angular Dynamic Template
          
          
              Add Course
              View Courses
              
    
              
                  <h2> Add Course </h2> {{message}}
              
    
              
                  <h2> View Courses </h2> {{message}}
              
          
    
          
              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";
              });
          
    
  
    

  输出：

  • 单击添加课程时：
    
  • 单击查看课程时：