درون گذاری فایل ها (Includes)
اینجا «درون گذاری فایل ها (Includes)» را ساده یاد می گیری. «ng-include» بخشی از HTML بیرونی را می آورد. مثل وقتی برگه تکلیف را داخل دفتر می چسبانی. برای جزئیات بیشتر، صفحه درون گذاری فایل ها را مرجع نگه دار.
ایده اصلی ng-include
«دایرکتیو (Directive)» یعنی دستور ویژه AngularJS برای تگ ها. با ng-include یک فایل HTML دیگر را داخل صفحه قرار می دهی.
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
درون گذاری با کد انگولار
فایل های درون گذاری شده می توانند کد AngularJS داشته باشند. «کنترلر (Controller)» منطق صفحه را مدیریت می کند. «مدل (Model)» همان داده ها است.
<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-repeat» هر ردیف را از آرایه names می سازد. مثل لیست حضور و غیاب کلاس.
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
درون گذاری از دامنه دیگر
به صورت پیش فرض، فایل از دامنه دیگر مجاز نیست. «لیست سفید (Whitelist)» یعنی فهرست آدرس های مجاز.
<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>
نکته: سرور مقصد باید اجازه «دسترسی میان دامنه (CORS)» بدهد. وگرنه فایل لود نمی شود.
گام های عملی
- فایل جزئیات را بساز. نامش را myFile.htm بگذار.
- ng-include را در صفحه اصلی قرار بده.
- در صورت نیاز کنترلر و داده ها را آماده کن.
- برای دامنه دیگر، لیست سفید را پیکربندی کن.
- همه چیز را در ادیتور تست و بررسی کن.
جمع بندی سریع
- ng-include بخش های HTML را می چسباند.
- فایل های include می توانند کد انگولار داشته باشند.
- برای دامنه دیگر، لیست سفید لازم است.
- ساختار تمیز، خطاها را کم می کند.