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

نویسنده اسماعیل شیدایی

یک شنبه 4 آبان 1393 - 5:52

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

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

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

AngularJS Controllers ها در AngularJS Directives ها در AngularJS Expressions ها در AngularJS آموزش angularjs آموزش AngularJS به زبان فارسی آموزش رایگان AngularJS به زبان فارسی دوره آموزشی AngularJS به زبان فارسی دوره رایگان آموزشی AngularJS به زبان فارسی معرفی AngularJS

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

صفحه اصلی / ABLY مقالات و مطالب مجموعه / دوره آموزشی AngularJS به زبان فارسی - بخش پانزدهم

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

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

AngularJS Includes

دستور HTML Includes در آینده HTML

HTML imports

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

AngularJS Includes

دستور HTML Includes در آینده HTML

HTML imports

Server Side Includes

Client Side Includes

AngularJS Side Includes

AngularJS Includes

HTML Includes in Future HTML

Server Side Includes

Client Side Includes

AngularJS Side Includes

نظرات

unkown

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

دسترسی سریع

تماس با ما

تماس با ما

0912 097 5516 :شماره تماس

0713 625 1757 :شماره تماس