باسلام ، انگولار جی اس نیز مانند سایر زبان های برنامه نویسی دستوری برای اضافه کردن فایل ها دارد ، با دستور ng-include شما میتوانید در انگولار جی اس یک فایل با پسوند html را به صفحه ی خود اضافه کنید.
پیشنهاد میشود قبل از ورود به این قسمت از اموزش انگولار سایر قسمت های دوره انگولار جی اس را مطالعه فرمایید.
دستور include در angularjs
همانطور که اشاره شد شما با استفاده از انگولار جی اس و دستورالعمل ng-include میتوانید یک فایل html به صفحه ی خود اضافه کنید برای درک بهتر این موضوع به مثال زیر توجه کنید.
|
1 2 3 |
<body ng-app=""> <div ng-include="'myFile.htm'"></div> </body> |
در بالا شما به سادگی توانستید یک فایل html را بصورت فایل جاگانه به فایل اصلی خود اضافه کنید.
کدهای فایل include
هر فایلی را که توسط دستورالعمل ng-include به صفحه اضافه میکنید خود نیز میتواند شامل کدهای angularjs باشد. برای مثال فایل myTable.html را بصورت زیر مینویسیم.
|
1 2 3 4 5 6 |
<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> |
هنگامی که شما فایل myTabel.html را به صفحه ی خود اضافه میکنید ، تمامی کدها به درستی اجرا خواهند شد ، حتی کدهای انگولاری که در داخل فایل اضافه(myTabel.html) شده قرار دارند.
قطعه کد بالا نمایانگر یک جدول و تکرار ستون های ان در angularjs می باشد . وقتی شما قطعه کد بالا را به کدهای زیر اضافه کنید دستورات هر دو فایل بصورت کاملا صحیح اجرا خواهند شد.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
برای درک بهتر اینکه کدهای customers.php را چگونه به صفحه اضافه کنید باید اموزش api انگولار جی اس را مطالعه کنید.
افزودن فایل از ادرس دیگر
درحالت پیش فرض انگولار جی اس به شما این اجازه را نخواهد داد که از ادرس دیگری خارج از دامین اصلی خود ادرسی را ثبت کنید. برای افزودن فایل از دامنه ی دیگر باید قانونی بودن ان دامین را با تابع زیر به اثبات برسانید و ان را در لیست سفید خود قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<body ng-app="myApp"> <div ng-include="'https://codepaz.com/angular_include.php'"></div> < script > var app = angular.module('myApp', []) app.config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ 'https://codepaz.com/**' ]); }); </script> </body> |
اطمینان حاصل کنید که سرور در مقصد اجازه دسترسی به پرونده دامنه را متوقف می کند.
درصورت داشتن هرگونه سوال میتوانید از قسمت کامنت های سایت و یا سایر راه های ارتباطی با ما در تماس باشید.
برای داشتن اطلاعات بیشتر میتوانید به سایت w3schools مراجعه فرمایید. و یا سایر قسمت های دوره انگولار جی اس را مطالعه فرمایید.
موفق باشید.
