AngularJS ng-include指令

AngularJS有一个内置的指令，通过使用ng-include指令包含其他AngularJS文件的功能。ng-include指令的主要目的是用来获取、编译并在AngularJS主程序中包含一个外部HTML文件。这些文件被作为子节点添加到主应用程序中。ng-includee属性的值也可以是一个表达式，它返回一个文件名。它被所有的HTML元素所支持。

语法:

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

注意：这里的onload和autoscroll参数是可选的，onload定义了一个表达式，用于在加载所包含的文件时进行评估，autoscroll定义了所包含的部分是否应该能够滚动到一个特定的视图。

实例1：本实例通过从child.html文件中获取数据来描述AngularJS的_ng-include指令。

外部HTML文件：将此文件保存为child.html。

<!-- child.html -->
 
<p>Hello Geeks from include component.</p>

index.html:

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

输出:

AngularJS ng-include指令

示例2：本例通过从table.html文件中获取表格格式的数据来描述AngularJS的_ng-include指令。

外部HTML文件：将此文件保存为table.html.。

<!-- table.html -->
<table>
  <tr ng-repeat="Subject in tutorials">
    <td>{{ Subject.Name }}</td>
    <td>{{ Subject.Description }}</td>
  </tr>
</table>

index.html:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
    "width=device-width, initial-scale=1.0">
    <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>
    </center>
 
    <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>