ng-vue-react AngularJS 中有哪些模板？

AngularJS 中有哪些模板？

原文:https://www . geesforgeks . org/什么是模板 in-angularjs/

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

模板有两种类型:

静态模板
动态模板

以下示例说明了这两种模板:

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:

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

```ts <!DOCTYPE html>

             Angular Static Template                   h1{             color:green;         }

GeeksforGeeks

Angular Static Template

     Input Value is :          Button
```

输出:
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:

示例:

```ts

                                 h1{             color:green;         }

GeeksforGeeks

Angular Dynamic Template



Add Course

View Courses



Add Course
{{message}}


View Courses
{{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";             });
```

输出:
- 点击【添加课程】时:
- 点击查看课程时: