AngularJS Включение

В AngularJS можно включать HTML-файлы в HTML.

Включение HTML-файлов в HTML

В HTML включение HTML-файлов пока не поддерживается.

Включения на стороне сервера

Большинство серверных скриптов поддерживают функциональность включения файлов (SSI： включения на стороне сервера).

Используя SSI, можно включать HTML-файлы в HTML и отправлять их в браузер клиента.

Пример PHP

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

Включения на стороне клиента

Существует много способов включения HTML-файлов в HTML через JavaScript.

Обычно мы используем HTTP-запросы (AJAX) для получения данных с сервера, мы можем использовать возвращённые данныеinnerHTMLдля записи в HTML-элементы.

Включения в AngularJS

Используя AngularJS, вы можете использоватьng-includeдирективу для включения HTML-содержимого:

Пример

Попробуйте сами »

Шаги следующие:

Код файла example.htm:

<h1>Пример</h1> <p>Это включаемая HTML-страница, реализованная с помощью директивы ng-include!</p>

Включение кода AngularJS

Помимо включения HTML-файлов, директива ng-include также может включать код AngularJS:

Код файла sites.htm:

Включаемый файл "sites.php" содержит код AngularJS, который будет выполнен как обычно:

Пример

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

Попробуйте сами »

Кросс-доменные включения

По умолчанию директива ng-include не позволяет включать файлы из других доменов.

Если вам нужно включать файлы из других доменов, необходимо задать белый список доступа к доменам:

Код файла 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>

Попробуйте сами »

Кроме того, также необходимо настроить сервер для разрешения кросс-доменного доступа. О способе настройки см. в:Лучшее решение проблем кросс-доменного доступа в PHP Ajax.

Код файла angular_include.php:

<?php //Разрешить доступ всем доменам header('Access-Control-Allow-Origin:*'); echo '<b style="color:red">Я — кросс-доменный контент</b>'; ?>

Другие расширения

AngularJS Экземпляр

AngularJS Справочное руководство

AngularJS Включение

Включение HTML-файлов в HTML

Включения на стороне сервера

Пример PHP

Включения на стороне клиента

Включения в AngularJS

Пример

Код файла example.htm:

Включение кода AngularJS

Код файла sites.htm:

Пример

Кросс-доменные включения

Код файла sites.htm:

Код файла angular_include.php: