آموزش طراحی سایت (HTML CSS Javascript) | آتریا

آموزش انگولار-بوتسترپ

بوتسترپ یک برگه ی استایل(style sheet) محبوب است. در این مقاله قصد داریم نشان دهیم که چطور از بوتسترپ به همراه انگولار استفاده کنیم.

بوتسترپ

برای اضافه کردن بوتسترپ به اپلیکیشن انگولار، کد زیر را به قسمت head از سند خود، اضافه نمایید:

اگر می خواهید بوتسترپ را آموزش ببینید به مجموعه مقالات آموزش بوتسترپ مراجعه کنید.

در زیر یک مثال 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">

<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>

<hr>
<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>
</div>

<script src = "myUsers.js"></script>
</body>
</html>

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

توضیح دستورات بکار رفته در مثال بالا

دستورات انگولار	توضیحات
body ng-app>	یک اپلیکیشن را برای عنصر <body> تعریف می کند.
body ng-controller>	یک کنترلر را برای عنصر <body> تعریف می کند.
tr ng-repeat>	برای هر user در users عنصر <tr> را تکرار می کند.
button ng-click>	هنگامی که عنصر <button> کلیک می شود، تابع ()editUser فراخوانی می شود.
h3 ng-show>	نمایش دادن عنصر <h3> در صورتی که edit=true باشد.
h3 ng-hide>	محو کردن عنصر <h3> در صورتی که edit=true باشد.
input ng-model>	پیوند دادن عنصر <input> به اپلیکیشن مورد نظر.
button ng-disabled>	در صورتی که error یا incomplete برابر با true باشند، عنصر <button> را غیر فعال می کند.

شرح کلاس های بوتسترپ

عنصر	کلاس بوتسترپ	توضیح
<div>	container	یک ظرف را مشخص می کند.
<table>	table	یک جدول.
<table>	table-striped	یک جدول راه راه.
<button>	btn	یک دکمه.
<button>	btn-success	یک دکمه ی موفقیت.
<span>	glyphicon	یک آیکن نمادین.
<span>	glyphicon-pencil	یک آیکن مداد.
<span>	glyphicon-user	یک آیکن کاربر.
<span>	glyphicon-save	یک آیکن ذخیره.
<form>	form-horizontal	یک فرم افقی.
<div>	form-group	یک گروه فرم.
<label>	control-label	یک برچسب control.
<label>	col-sm-2	یک span دو ستونه.
<div>	col-sm-10	یک span ده ستونه.

کد جاوا اسکریپت

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;
}
};

});

توضیح کد جاوااسکریپت

Scope Properties	Used for
scope.fName$	متغیر مدل(نام کاربر).
scope.lName$	متغیر مدل(نام خانوادگی کاربر).
scope.passw1	متغیر مدل(رمز عبور کاربر 1).
scope.passw2	متغیر مدل(رمز عبور کاربر 2).
scope.users$	متغیر مدل(آرایه ی کاربران).
scope.edit$	هنگامی که کاربر بر روی create user کلیک می کند، به true ست می شود.
scope.error$	اگر که passw1 برابر با passw2 نباشد، به true ست می شود.
scope.incomplete$	در صورتی که فیلدی خالی باشد به true ست می شود(hength=0)
scope.editUser$	متغیرهای مدل را ست می کند.
scope.watch$	دیدبانی متغیرهای مدل.
scope.test$	متغیرهای مدل را از حیث خطا یا ناکامل بودن تست و بررسی می کند.

: نوشته شده توسط احسان عباسی; بازدید: 8480

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

دیدگاه‌ها

+1 # سحر19

با عرض خسته نباشید و تشکر برای سایت بسیار عالیتون
خودتان امتحان کنید این قسمت ایراد داره من با نسخه w3school تطبیق دادم این قسمت باید وقتی روی دکمه creat new user کلیک میکنیم اطلاعان درون تکست باکس نام و نام خوانوادگی پاک شود

+1 # احسان عباسی

سلام ممنونم از شما . مشکل برطرف شد.

+6 # 1313karim

نفهمیدم !!
ییهوو چقدر سخت شد!

بازآوری فهرست دیدگاه‌ها

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی