تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (0)

تبلیغات

آموزش انگولار-Includes

به وسیله ی انگولار، شما می توانید فایل های HTML را در اچ تی ام ال اضافه نمایید.


آینده ی اضافه کردن فایل HTML در HTML

متاسفانه اضافه کردن بخشی از HTML در HTML هنوز به وسیله ی HTML پشتیبانی نمی شود. 

اضافه کردن اچ تی ام ال(import html) یک پیشنهاد w3c برای ورژن های آینده ی HTML می باشد. 

<link rel="import" href="/path/navigation.html">

اضافه کردن فایل های سمت سرور

اکثر سرورها از اضافه کردن(include) سمت سرور(SSI) پشتیبانی می کنند.

به وسیله ی SSI شما می توانید قبل از اینکه صفحه ی مورد نظر به مرورگر ارسال شود، فایل اچ تی ام ال را به HTML اضافه کنید.

مثال php

<?php require("navigation.php"); ?>

include کردن در سمت کاربر

راه های زیادی وجود دارد تا از جاوااسکریپت برای اضافه کردن HTML در HTML استفاده کنیم. 

متداول ترین راه این است که از یک درخواست http یا به عبارتی AJAX برای گرفتن داده از سرور استفاده کنیم و سپس داده ی مورد نظر را به innerHTML از یک عنصر HTML اضافه کنیم. 


اضافه کردن توسط انگولار

به وسیله ی انگولار، شما می توانید محتوای HTML را با استفاده از دستور ng-include اضافه نمایید:

مثال

<body>

<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>

</body>

در زیر 4 گام مقدماتی آورده شده است:


گام 1: ایجاد لیست HTML

myUsers_List.html

<h3>Users</h3>

<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>
خودتان امتحان کنید »

گام 2: ایجاد فرم HTML

myUsers_Form.html

<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>
خودتان امتحان کنید »

گام 3: ایجاد کنترلر

myUsers.js

angular.module('myApp', []).controller('userCtrl'function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege',lName:"Pege" },
{id:2, fName:'Kim',lName:"Pim" },
{id:3, fName:'Sal',lName:"Smith" },
{id:4, fName:'Jack',lName:"Jones" },
{id:5, fName:'John',lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false
$scope.editUser = function(id) {
  if (id == 'new') {
    $scope.edit = true;
    $scope.incomplete = true;
    $scope.fName = '';
    $scope.lName = '';
    } else {
    $scope.edit = false;
    $scope.fName = $scope.users[id-1].fName;
    $scope.lName = $scope.users[id-1].lName; 
  }
};

$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName',function() {$scope.test();});
$scope.$watch('lName',function() {$scope.test();});

$scope.test = function() {
  if ($scope.passw1 !== $scope.passw2) {
    $scope.error = true;
    } else {
    $scope.error = false;
  }
  $scope.incomplete = false;
  if ($scope.edit && (!$scope.fName.length ||
    !$scope.lName.length ||
    !$scope.passw1.length || !$scope.passw2.length)) {
    $scope.incomplete = true;
  }
};
})

گام 4: ایجاد صفحه ی اصلی

myUsers.html

<!DOCTYPE html>
<html>
<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.3.14/angular.min.js"></script> 

<body ng-app="myApp" ng-controller="userCtrl">

<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>
خودتان امتحان کنید »

دیدگاه‌ها  

+4 # karim_13 1395-05-18 02:48
این دو صفحه اخر کورس اصلا لینک ها رو دقت نکردن
هیچ کدوم از مثال ها اجرا نمیشن همه مشکل لینک شدن دارن
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1395-05-18 12:25
با تشکر از تذکر شما، مشکل برطرف شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی