AngularJS zawiera


Dzięki AngularJS możesz dołączyć HTML z pliku zewnętrznego.


AngularJS zawiera

W AngularJS możesz dołączyć zawartość HTML za pomocą dyrektywy ng-include :

Przykład

<body ng-app="">

<div ng-include="'myFile.htm'"></div>

</body>

Dołącz kod AngularJS

Pliki HTML, które dołączasz za pomocą dyrektywy ng-include, mogą również zawierać kod AngularJS:

mojaTabela.htm:

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

Dołącz plik „myTable.htm” do swojej strony internetowej, a cały kod AngularJS zostanie wykonany, nawet kod wewnątrz dołączonego pliku:

Przykład

<body>

<div ng-app="myApp" ng-controller="customersCtrl">
  <div ng-include="'myTable.htm'"></div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.php").then(function (response) {
    $scope.names = response.data.records;
  });
});
</script>


Uwzględnij wiele domen

Domyślnie dyrektywa ng-include nie pozwala na dołączanie plików z innych domen.

Aby dołączyć pliki z innej domeny, możesz dodać białą listę legalnych plików i/lub domen w funkcji konfiguracyjnej swojej aplikacji:

Przykład:

<body ng-app="myApp">

<div ng-include="'https://tryit.w3schools.com/angular_include.php'"></div>

<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'https://tryit.w3schools.com/**'
  ]);
});
</script>

</body>

Upewnij się, że serwer w miejscu docelowym umożliwia dostęp do plików między domenami.