AngularJS Include

In AngularJS können Sie HTML-Dateien in HTML einbinden.

HTML-Dateien in HTML einbinden

In HTML wird das Einbinden von HTML-Dateien noch nicht unterstützt.

Serverseitige Includes

Die meisten serverseitigen Skripte unterstützen die Include-Dateifunktionalität (SSI: Server Side Includes).

Mit SSI können Sie HTML-Dateien in HTML einbinden und an den Client-Browser senden.

PHP-Beispiel

<?php require("navigation.php"); ?>

Clientseitige Includes

Es gibt viele Möglichkeiten, HTML-Dateien über JavaScript in HTML einzubinden.

Normalerweise verwenden wir HTTP-Anfragen (AJAX), um Daten vom Server abzurufen, und wir können die zurückgegebenen Daten verwenden, um sie mitinnerHTMLin HTML-Elemente zu schreiben.

AngularJS-Einbindungen

Mit AngularJS können Sieng-includedie Direktive verwenden, um HTML-Inhalte einzubinden:

Beispiel

Selbst ausprobieren »

The steps are as follows:

Code der Datei example.htm:

<h1>Beispiel</h1> <p>Dies ist eine eingebundene HTML-Seite, implementiert mit der ng-include-Direktive!</p>

AngularJS-Code einbinden

Zusätzlich zum Einbinden von HTML-Dateien kann die ng-include-Direktive auch AngularJS-Code einbinden:

Code der Datei sites.htm:

Die eingebundene Datei „sites.php“ enthält AngularJS-Code, der normal ausgeführt wird:

Beispiel

<div ng-app="myApp" ng-controller="sitesCtrl"> <div ng-include="'sites.htm'"></div> </div> <script> var app = angular.module('myApp', []); app.controller('sitesCtrl', function($scope, $http) { $http.get("sites.php").then(function (response) { $scope.names = response.data.records; }); }); </script>

Selbst ausprobieren »

Übergreifende Includes (Cross-domain)

Standardmäßig erlaubt die ng-include-Direktive nicht das Einbinden von Dateien aus anderen Domains.

Wenn Sie Dateien aus anderen Domains einbinden müssen, müssen Sie eine Whitelist für den Domainzugriff einrichten:

Code der Datei sites.htm:

<body ng-app="myApp"> <div ng-include="'https://c.example.com/exampletest/angular_include.php'"></div> <script> var app = angular.module('myApp', []) app.config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ 'https://c.example.com/exampletest/**' ]); }); </script> </body>

Selbst ausprobieren »

Zusätzlich müssen Sie den Server so konfigurieren, dass domänenübergreifende Zugriffe erlaubt sind. Informationen zur Konfigurationsmethode finden Sie unter:Die beste Lösung für PHP-Ajax-Domain-übergreifende Probleme.

Code der Datei angular_include.php:

<?php //Allen Domains den Zugriff erlauben header('Access-Control-Allow-Origin:*'); echo '<b style="color:red">Ich bin domänenübergreifender Inhalt</b>'; ?>

Weitere Erweiterungen

AngularJS Instanz

AngularJS Referenzhandbuch

AngularJS Include

HTML-Dateien in HTML einbinden

Serverseitige Includes

PHP-Beispiel

Clientseitige Includes

AngularJS-Einbindungen

Beispiel

Code der Datei example.htm:

AngularJS-Code einbinden

Code der Datei sites.htm:

Beispiel

Übergreifende Includes (Cross-domain)

Code der Datei sites.htm:

Code der Datei angular_include.php: