AngularJS Includes

AngularJS உடன், நீங்கள் வெளிப்புற கோப்பில் இருந்து HTML ஐச் சேர்க்கலாம்.

AngularJS Includes

AngularJS உடன், நீங்கள் ng-include உத்தரவைப் பயன்படுத்தி HTML உள்ளடக்கத்தைச் சேர்க்கலாம்:

உதாரணம்

<body ng-app="">

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

</body>

குறிப்பு:

சேர்க்கப்படும் கோப்பின் பெயர் ஒற்றை மேற்கோள்களுக்குள் இருக்க வேண்டும்: 'myFile.htm'

AngularJS குறியீட்டைச் சேர்க்கவும்

நீங்கள் 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>

விளக்கம்:

இந்த உதாரணத்தில், myTable.htm கோப்பு ng-include மூலம் சேர்க்கப்படுகிறது. இந்த கோப்பு ng-repeat உத்தரவைக் கொண்டுள்ளது, இது AngularJS கட்டுப்படுத்தியில் இருந்து தரவுகளைப் பயன்படுத்துகிறது.

குறுக்கு டொமைன்களைச் சேர்க்கவும்

இயல்பாக, ng-include உத்தரவு மற்ற டொமைன்களில் இருந்து கோப்புகளைச் சேர்க்க உங்களை அனுமதிக்காது.

மற்றொரு டொமைனில் இருந்து கோப்புகளைச் சேர்க்க, உங்கள் பயன்பாட்டின் config செயல்பாட்டில் சட்டபூர்வமான கோப்புகள் மற்றும்/அல்லது டொமைன்களின் வெள்ளைப் பட்டியலைச் சேர்க்கலாம்:

உதாரணம்:

<body ng-app="myApp">

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

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

</body>

முக்கியமான குறிப்பு:

இலக்கு சேவையகம் குறுக்கு டொமைன் கோப்பு அணுகலை அனுமதிக்கிறது என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். சேவையகம் குறுக்கு டொமைன் கோரிக்கைகளைத் தடுக்கும் என்றால், கோப்பைச் சேர்க்க முடியாது.

Includes பயன்கள்

குறியீடு மறுபயன்பாடு

ஒரே HTML குறியீட்டை பல பக்கங்களில் பயன்படுத்தலாம்

எளிதான பராமரிப்பு

ஒரு இடத்தில் மாற்றம் செய்தால் அனைத்து பக்கங்களிலும் பிரதிபலிக்கும்

மாடுலர் கட்டமைப்பு

பெரிய பயன்பாடுகளை சிறிய, நிர்வகிக்கக்கூடிய பகுதிகளாகப் பிரிக்கலாம்

HTML மறுபிரிப்பு

தலைப்பு, அடிக்குறிப்பு, வழிசெலுத்தல் போன்றவற்றை தனி கோப்புகளாக வைக்கலாம்

நடைமுறை உதாரணம்

வலைத்தளத்தில் பொதுவான கூறுகளை சேர்க்க ng-include ஐ எவ்வாறு பயன்படுத்தலாம் என்பதற்கான உதாரணம்:

header.html

<header>
  <nav>
    <ul>
      <li><a href="#">முகப்பு</a></li>
      <li><a href="#">பற்றி</a></li>
      <li><a href="#">தொடர்பு</a></li>
    </ul>
  </nav>
</header>

main.html

<body ng-app="myApp">
  <div ng-include="'header.html'"></div>
  
  <main>
    <h1>வரவேற்கிறோம்</h1>
    <p>முக்கிய உள்ளடக்கம்</p>
  </main>
  
  <div ng-include="'footer.html'"></div>
</body>

பயிற்சி

கீழே உள்ள பயிற்சியில் ng-include உத்தரவு பற்றிய உங்கள் புரிதலை சோதிக்கவும்:

AngularJS Includes பயிற்சி

ng-include வெளிப்புற HTML கோப்புகளை சேர்க்கப் பயன்படுகிறது

✓ சரி! ng-include வெளிப்புற கோப்புகளை வலைப்பக்கத்தில் சேர்க்கப் பயன்படுகிறது

ng-include இயல்பாக மற்ற டொமைன்களில் இருந்து கோப்புகளைச் சேர்க்க அனுமதிக்கிறது

✗ தவறு! இயல்பாக ng-include குறுக்கு டொமைன் கோப்புகளைச் சேர்க்காது

சேர்க்கப்பட்ட கோப்புகளில் AngularJS குறியீடு இருக்கலாம்

✓ சரி! சேர்க்கப்பட்ட கோப்புகள் AngularJS உத்தரவுகள் மற்றும் வெளிப்பாடுகளைக் கொண்டிருக்கலாம்

சேர்க்கப்படும் கோப்புப் பெயர் இரட்டை மேற்கோள்களுக்குள் மட்டுமே இருக்க வேண்டும்

✗ தவறு! கோப்புப் பெயர் ஒற்றை மேற்கோள்களுக்குள் இருக்க வேண்டும்: 'file.html'

சிறந்த நடைமுறை:

தலைப்பு, அடிக்குறிப்பு, வழிசெலுத்தல் போன்ற மீண்டும் மீண்டும் வரும் HTML கூறுகளுக்கு ng-include ஐப் பயன்படுத்தவும். இது உங்கள் குறியீட்டை நிர்வகிக்க எளிதாக்கும்.