AngularJS Includes

ng-include指令可以用来包含外部文件中的HTML，也就是说，它可以用来在HTML中嵌入一个HTML页面，这是HTML所不支持的。ng-controller指令也有助于将AngularJS代码添加到HTML文件中。将AngularJS代码添加到外部HTML文件中也会被执行，尽管，它被包含在外部文件中。这有助于以更容易的方式完成整个任务。为了允许和包括跨域，ng-controller指令，默认情况下，不允许添加属于其他域的包含文件。在这种情况下，如果我们需要完成这个任务，那么我们需要在应用程序的配置功能中添加合法文件和/或域的白名单。

语法:

<element ng-include=" ">
    content...
<element>

例子1：这个例子描述了AngularJS中**ng-controller指令的基本用法。

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

geeks.html:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>GFG data</title>
</head>
  
<body>
    <p>
        It is strongly recommended to
        add image/video created by
        you only. We have also
        recently changed the
        guidelines on how to add an
        image. Please see this for
        modified guidelines on image
        insertion How are my articles
        published? The articles are
        reviewed by reviewers and
        then published. The reviewers
        basically check for correctness
        and basic plagiarism.
    </p>
</body>
</html>

输出:

AngularJS Includes

包含AngularJS代码：与之前使用ng-include包含HTML文件的情况类似，类似地，它可以包含AngularJS代码。

示例2：本示例通过包含AngularJS代码的外部HTML文件，描述了AngularJS中**ng-controller指令的使用。

Geekstable.html:

<table>
    <tr ng-repeat="x in courses">
         <td>{{ x.Course }}</td>
         <td>{{ x.Duration }}</td>
    </tr>
</table>

代码:

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body>
    <div ng-app="geeks" ng-controller="customersCtrl">
        <div ng-include="'Geekstable.html'"></div>
    </div>
    <script>
        var app = angular.module('geeks', []);
        app.controller('customersCtrl', function(scope,http) {
            http.get("customers.php").then(function(response) {
                scope.courses = response.data.records;
            });
        });
    </script>
</body>
</html>

输出:

AngularJS Includes

包括跨域：如果你想包括其他域的文件，那么你可以在你的应用程序的配置功能中添加一个合法文件或域的白名单。

示例3：这个例子描述了AngularJS中**ng-controller指令的基本使用，包括属于另一个来源的文件。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="myApp">
    <div ng-include="'filel_path_from_anotherDomain'"></div>
    <script>
        var app = angular.module('myApp', [])
        app.config(function(sceDelegateProvider) {
            sceDelegateProvider.resourceUrlWhitelist(
                  ['filel_path_from_anotherDomain']);
        });
    </script>
</body>
</html>