AngularJS Inclusion

Dans AngularJS, vous pouvez inclure des fichiers HTML dans du HTML.

Inclure des fichiers HTML dans du HTML

En HTML, l'inclusion de fichiers HTML n'est pas encore prise en charge.

Inclusions côté serveur

La plupart des scripts côté serveur prennent en charge la fonctionnalité d'inclusion de fichiers (SSI： Inclusions côté serveur).

En utilisant SSI, vous pouvez inclure des fichiers HTML dans du HTML et les envoyer au navigateur client.

Exemple PHP

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

Inclusions côté client

Il existe de nombreuses façons d'inclure des fichiers HTML dans du HTML via JavaScript.

Habituellement, nous utilisons des requêtes HTTP (AJAX) pour obtenir des données depuis le serveur ; nous pouvons utiliser les données renvoyéesinnerHTMLpour écrire dans des éléments HTML.

Inclusions AngularJS

Avec AngularJS, vous pouvez utiliserng-includela directive pour inclure du contenu HTML :

Exemple

Essayez-le vous-même »

Les étapes sont les suivantes :

Code du fichier example.htm :

<h1>Exemple</h1> <p>Ceci est une page HTML incluse, implémentée à l'aide de la directive ng-include !</p>

Inclure du code AngularJS

En plus d'inclure des fichiers HTML, la directive ng-include peut également inclure du code AngularJS :

Code du fichier sites.htm :

Le fichier inclus "sites.php" contient du code AngularJS, qui sera exécuté normalement :

Exemple

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

Essayez-le vous-même »

Inclusions inter-domaines

Par défaut, la directive ng-include ne permet pas d'inclure des fichiers provenant d'autres domaines.

Si vous devez inclure des fichiers provenant d'autres domaines, vous devez définir une liste blanche d'accès aux domaines :

Code du fichier 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>

Essayez-le vous-même »

De plus, vous devez également configurer le serveur pour autoriser l'accès inter-domaines. Pour la méthode de configuration, reportez-vous à :La meilleure solution aux problèmes inter-domaines de PHP Ajax.

Code du fichier angular_include.php :

<?php //Autoriser tous les domaines à accéder header('Access-Control-Allow-Origin:*'); echo '<b style="color:red">Je suis un contenu inter-domaines</b>'; ?>

Autres extensions

AngularJS Instance

AngularJS Manuel de référence

AngularJS Inclusion

Inclure des fichiers HTML dans du HTML

Inclusions côté serveur

Exemple PHP

Inclusions côté client

Inclusions AngularJS

Exemple

Code du fichier example.htm :

Inclure du code AngularJS

Code du fichier sites.htm :

Exemple

Inclusions inter-domaines

Code du fichier sites.htm :

Code du fichier angular_include.php :