AngularJS | Directiva ng-include

AngularJS tiene una directiva integrada para incluir la funcionalidad de otros archivos AngularJS mediante el uso de la directiva ng-include. El propósito principal de la «directiva ng-include» se usa para obtener, compilar e incluir un archivo HTML externo en el AngularJS principal application.Estos se agregan como Nodes secundarios en la aplicación principal. El valor del atributo ng-include también puede ser una expresión que devuelve un nombre de archivo. Todos los elementos HTML admiten esto.

Sintaxis:

<element ng-include="filename" onload="expression" autoscroll="expression" >
Content...</element>

Nota: Aquí, los parámetros onload y autoscroll son opcionales, onload define una expresión para evaluar cuándo se carga el archivo incluido y autoscroll define si la sección incluida debe poder desplazarse a una vista específica.

Ejemplo 1

Archivo HTML externo: guarde este archivo como child.html .



<p>Hello Geeks from include component.</hp>

Código:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>AngularJS | ng-include Directive</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </script> 
</head> 
  
<body ng-app="" style="text-align: center"> 
     <h1 style="color:green">GeeksforGeeks</h1> 
     <h3>ng-include Directive</h3>                             
     <div ng-include="'child.html'"></div>
</body>
  
</html>                     

Producción:

Ejemplo 2:

Archivo HTML externo: guarde este archivo como table.html.



<table>

  <tr ng-repeat="Subject in tutorials">

    <td>{{ Subject.Name }}</td>

    <td>{{ Subject.Description }}</td>

  </tr>

</table>

Código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AngularJS | ng-include Directive</title>
    <script src=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>  
</head>
<body ng-app="main-app">
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
         <h3>ng-include Directive</h3>
        <div ng-controller="AngularController">
            <div ng-include="'table.html'"></div>
        </div>
  
   
<script>
    var main_app = angular.module('main-app', []);
    main_app.controller('AngularController', function($scope) {
    $scope.tutorials =[
            {Name: "AngularJS", Description : "Front End Framework"},
            {Name: "NodeJS", Description : "Server side JavaScript"},
            {Name: "ExpressJS", Description : "Server side JS Framework"}
        ];
    });
</script>
</body>
</html>

Producción:

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta