a

ABLY مقالات و مطالب مجموعه

دوره آموزشی AngularJS به زبان فارسی - بخش پانزدهم

دوره آموزشی 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">

 

 

 

 

 

بسم الله الرحمن الرحیم

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک 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>&nbsp;&nbsp;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

 

 

نظرات

  • Hannah Martinez
    unkown
    دو شنبه 11 دی 1278 0:00

    با سلام.خسته نباشید.پست ها Angular عالی هستند.

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :Phone Number
0713 625 1757 :Phone Number