۲۹
مرداد

جلسه ۲۰ : آشنایی با include ها در AngularJS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند.تاکنون با مباحث مهم و کلیدی از جمله آشنایی با API آشنا شدید. اکنون قصد داریم به آموزش مباحث آشنایی با include ها در AngularJS و نحوه استفاده از دستور ng-include بپردازیم. گاهی اوقات شما نیاز دارید که از کد html فایل دیگری در صفحه ی خود استفاده کنید. شما به راحتی می توانید در آنگولار اینکار را انجام دهید.

در آنگولار، علاوه بر امکان اضافه کردن کد html از فایل دیگر، شما می توانید کدهای سمت سرور را از فایل های دیگری نظیر php به صفحه جاری، اضافه کنید که در ادامه آموزش بیشتر با این مبحث آشنا می شوید.

آشنایی با include ها در AngularJS

AngularJS، به شما اجازه می دهد. که از فایل html خارج از فایل html جاری استفاده کنید.

شما به راحتی می توانید با استفاده از دستور ng-include ، از فایل های html دیگر در فایل html جاری استفاده کنید.

مثال : استفاده از دستور ng-include

خودتان امتحان کنید »

مثال :

<body ng-app="">

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

</body>

</body>

استفاده از کد آنگولار

فایل های HTML که با دستور ng-include اضافه می شوند. همچنین می توانند کد AngularJS را داشته باشند:

مثال: ایجاد فایل myTable.htm:

مثال :

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

<table>

<td>{{ x.Country }}</td>

</tr>

</table>

فایل “myTable.htm” را در صفحه وب خود وارد کنید. و تمام کد AngularJS اجرا خواهد شد.

مثال : اضافه کردن فایل myTable.htm

خودتان امتحان کنید »

مثال :

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

<body>

</div>

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 در کد آنگولار بصورت زیر ایجاد کنید:

مثال :

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

<!DOCTYPE html>

<html>

var app = angular.module('myApp', [])

app.config(function($sceDelegateProvider) {

$sceDelegateProvider.resourceUrlWhitelist([

'https://tryit.pvlearn.com/**'

]);

});

</script>

</body>

</html>

کلام آخر

در پایان آموزش ما چگونگی افزودن فایل های html دیگر را در فایل html جاری را با استفاده از دستورات آنگولار ، به شما ارائه دادیم. همچنین چگونگی استفاده از فایل های صفحه وب در دامنه های دیگر را نیز در آنگولار بررسی کردیم. امیدواریم که از مباحث آشنایی با include ها در AngularJS ، استفاده کرده باشید.

QR: جلسه ۲۰ : آشنایی با include ها در AngularJS

به اشتراک بگذارید

آموزش کامل AngularJS ,استفاده از دستور ng-include ,دوره کامل آموزش AngularJS ,فریم ورک AngularJS

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۰ : آشنایی با include ها در AngularJS

مقدمه

آشنایی با include ها در AngularJS

مثال : استفاده از دستور ng-include

استفاده از کد آنگولار

مثال : اضافه کردن فایل myTable.htm

افزودن دامنه

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ