AngularJS ఇంక్లూడ్

మీరు AngularJS యొక్క సహాయంతో బాహ్య ఫైల్స్‌లో ఉన్న HTML‌ను చేర్చవచ్చు.

AngularJS ఇంక్లూడ్

మీరు AngularJS యొక్క సహాయంతో చేయవచ్చు: ng-include ఆదేశం లో హైలైట్ చేసిన HTML కంటెంట్‌ను చేర్చడం:

ఎక్సమ్ప్లే

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

స్వయంగా ప్రయత్నించండి

అన్ని క్రాస్‌డొమైన్ కోడ్లను చేర్చడం

మీరు ng-include ఆదేశంతో చేర్చిన HTML ఫైల్స్ కూడా AngularJS కోడ్లను చేర్చవచ్చు:

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

మీ వెబ్‌పేజీలో "myTable.htm" ఫైల్ను చేర్చండి, అన్ని AngularJS కోడ్లు అమలు అవుతాయి, అన్ని ఫైల్స్‌లో ఉన్న కోడ్లు కూడా:

ఎక్సమ్ప్లే

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

స్వయంగా ప్రయత్నించండి

క్రాస్‌డొమైన్ చేర్చడం

అప్రమేయంగా, ng-include ఆదేశం మీరు మరొక డొమైన్ నుండి ఫైల్స్‌ను చేర్చడానికి అనుమతించదు.

మీరు మరొక డొమైన్ నుండి ఫైల్స్‌ను చేర్చడానికి, మీ అప్లికేషన్ యొక్క config ఫంక్షన్‌లో అనుమతించబడిన ఫైల్స్ మరియు/లేదా డొమైన్స్ యొక్క వైట్‌లిస్ట్‌ను జోడించవచ్చు:

ఎక్సమ్ప్లే

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

స్వయంగా ప్రయత్నించండి

దయచేసి లక్ష్య సర్వర్ కు క్రాస్ డామైన్ ఫైల్ ప్రాసెస్ అనుమతి చేయండి.