سبد (0)

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

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


بوتسترپ

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

<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

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

در زیر یک مثال 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>&nbsp;&nbsp;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$

متغیرهای مدل را از حیث خطا یا ناکامل بودن تست و بررسی می کند. 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه