¿Qué son las plantillas en AngularJS?

Las plantillas en AngularJS son simplemente un archivo HTML lleno o enriquecido con cosas de AngularJS como atributos y directivas. Una directiva es un elemento marcador que se utiliza para apuntar a un atributo o clase en particular para representar su comportamiento de acuerdo con las necesidades. El modelo y el controlador en Angular se combinan con las plantillas para manipular la vista que el usuario ve en su navegador. Las plantillas angulares también pueden acomodar CSS , controles de formulario , filtros y expresiones .

Hay dos tipos de plantilla:

Plantilla estática
Plantillas dinámicas

Los siguientes ejemplos ilustran ambas plantillas:

Plantilla estática: una plantilla estática se define mediante el uso de una etiqueta de secuencia de comandos. Se debe proporcionar un atributo de identificación y tipo con valor text/ng-template para que funcione la plantilla estática. Además, se debe tener en cuenta que la plantilla estática funcionará solo si está bajo el alcance de ng-app , de lo contrario, Angular la ignorará.
Se puede representar una plantilla estática usando la directiva ng-include . Por ejemplo:

<div ng-include=”’geeksforgeeks.html’”></div>

Ejemplo: Esto muestra una plantilla simple

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

Producción:

Plantillas dinámicas: como su nombre indica, las plantillas dinámicas se utilizan para trabajar con los entornos de tiempo de ejecución. Es compilado y renderizado por Angular a pedido del usuario. Se puede representar una plantilla dinámica usando la directiva ng-include . Por ejemplo:

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

Ejemplo :

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

Producción:

Cuando se hace clic en Agregar curso:
Cuando se hace clic en Ver cursos:

Publicación traducida automáticamente

Artículo escrito por Abhishek7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta