AngularJS inkludera

Med AngularJS kan du inkludera HTML från externa filer.

AngularJS inkludera

Med AngularJS kan du använda ng-include Instruktionen innehåller HTML-innehåll:

Exempel

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

Prova själv

Inkludera AngularJS-koder

HTML-filer som du inkluderar med ng-include-instruktionen kan också innehålla AngularJS-koder:

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

Inkludera filen "myTable.htm" i din webbsida, alla AngularJS-koder kommer att köras, även om koden finns i inkluderade filer:

Exempel

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

Prova själv

Överskridande domän inkludering

Som standard tillåter ng-include-instruktionen inte att du inkluderar filer från andra domäner.

För att inkludera filer från en annan domän kan du lägga till giltiga filer och/eller domäner i vitlistan i applikationens config-funktion:

Exempel

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

Prova själv

Se till att måltjänsten tillåter korsdomän filåtkomst.