¿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=
        </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>

    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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *