دوره آموزشی AngularJS به زبان فارسی - بخش پانزدهم
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
آموزش AngularJS
بخش پانزدهم
AngularJS Includes
با AngularJS شما می توانید یک فایل HTML را درون یک فایل HTML دیگر لود کنید.
دستور HTML Includes در آینده HTML
متاسفانه لود کردن بخشی از HTML در یک فایل HTML دیگر هنوز توسط HTML پشتیبانی نمی شود.
HTML imports
HTML imports یک روش جدید است که در آینده برای نسخه های HTML مورد استفاده قرار خواهد گرفت.
<link rel="import" href="/path/navigation.html">
Server Side Includes
بیشتر وب سرور ها از Server Side Includes (SSI) پشتیبانی می کنند.
با SSI شما می توانید یک صفحه را در صفحه دیگر قبل از اینکه به Browser ارسال شود، لود کنید.
<?php require("navigation.php"); ?>
Client Side Includes
این روش ها می توانند با استفاده از JavaScript یک HTML را در HTML دیگر لود کنند.
یک راه رایج استفاده از یک درخواست HTTP (AJAX) برای واکشی داده ها از سرور است و سپس نوشتن و درج اطلاعات در صفحه HTML است.
AngularJS Side Includes
در AngularJS شما می توانید با استفاده از رهنمود ng-include اطلاعات را در صفحه خود لود کنید:
<body>
<div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'"></div>
</div>
</body>
مثال:
در مرحله اول HTML List را ایجاد می کنیم
<table class="table table-striped">
<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>
<button class="btn" ng-click="editUser(user.id)">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>
در مرحله بعد HTML Form خود را ایجاد می کنیم
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Repeat:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw2" placeholder="Repeat Password">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
در مرحله آخر صفحه اصلی خود را ایجاد می کنیم
<!DOCTYPE html>
<html ng-app="">
<head>
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-controller="userController">
<div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'"></div>
</div>
<script src= "myUsers.js"></script>
</body>
</html>
AngularJS Includes
با AngularJS شما می توانید یک فایل HTML را درون یک فایل HTML دیگر لود کنید.
HTML Includes in Future HTML
متاسفانه لود کردن بخشی از HTML در یک فایل HTML دیگر هنوز توسط HTML پشتیبانی نمی شود.
HTML imports یک روش جدید است که در آینده برای نسخه های HTML مورد استفاده قرار خواهد گرفت.
Server Side Includes
بیشتر وب سرور ها از Server Side Includes (SSI) پشتیبانی می کنند.
با SSI شما می توانید یک صفحه را در صفحه دیگر قبل از اینکه به Browser ارسال شود، لود کنید.
Client Side Includes
این روش ها می توانند با استفاده از JavaScript یک HTML را در HTML دیگر لود کنند.
یک راه رایج استفاده از یک درخواست HTTP (AJAX) برای واکشی داده ها از سرور است و سپس نوشتن و درج اطلاعات در صفحه HTML است.
AngularJS Side Includes
در AngularJS شما می توانید با استفاده از رهنمود ng-include اطلاعات را در صفحه خود لود کنید:
مشاهده تمامی آموزش های دوره AngularJS