با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند.تاکنون با مباحث مهم و کلیدی از جمله آشنایی با API آشنا شدید. اکنون قصد داریم به آموزش مباحث آشنایی با include ها در AngularJS و نحوه استفاده از دستور ng-include بپردازیم. گاهی اوقات شما نیاز دارید که از کد html فایل دیگری در صفحه ی خود استفاده کنید. شما به راحتی می توانید در آنگولار اینکار را انجام دهید.
در آنگولار، علاوه بر امکان اضافه کردن کد html از فایل دیگر، شما می توانید کدهای سمت سرور را از فایل های دیگری نظیر php به صفحه جاری، اضافه کنید که در ادامه آموزش بیشتر با این مبحث آشنا می شوید.
AngularJS، به شما اجازه می دهد. که از فایل html خارج از فایل html جاری استفاده کنید.
شما به راحتی می توانید با استفاده از دستور ng-include ، از فایل های html دیگر در فایل html جاری استفاده کنید.
1 2 3 4 5 | <body ng-app=""> <div ng-include="'myFile.htm'"></div> </body> |
فایل های HTML که با دستور ng-include اضافه می شوند. همچنین می توانند کد AngularJS را داشته باشند:
مثال: ایجاد فایل myTable.htm:
1 2 3 4 5 6 | <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> |
فایل “myTable.htm” را در صفحه وب خود وارد کنید. و تمام کد AngularJS اجرا خواهد شد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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 اجازه نمی دهد فایل های خود را از دامنه های دیگر وارد کنید.
برای افزوذن فایل از دامنه یا سایت های دیگر باید، باید بعد از آدرس دهی فایل وب، یک whitelist در کد آنگولار بصورت زیر ایجاد کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body ng-app="myApp"> <div ng-include="'https://tryit.pvlearn.com/angular_include.php'"></div> <script> var app = angular.module('myApp', []) app.config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ 'https://tryit.pvlearn.com/**' ]); }); </script> </body> </html> |
در پایان آموزش ما چگونگی افزودن فایل های html دیگر را در فایل html جاری را با استفاده از دستورات آنگولار ، به شما ارائه دادیم. همچنین چگونگی استفاده از فایل های صفحه وب در دامنه های دیگر را نیز در آنگولار بررسی کردیم. امیدواریم که از مباحث آشنایی با include ها در AngularJS ، استفاده کرده باشید.