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

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

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

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

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

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

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

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

مثال php

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

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

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

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

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

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

مثال

در زیر 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>  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>

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