AngularJS و Twitter Bootstrap

AngularJS و Twitter Bootstrap

Bootstrap یک صفحه ی سبک دهی style sheet پرطرفدار است. مقاله ی حاضر نحوه ی استفاده از angular به همراه bootstrap را به شما آموزش می دهد.

BootStrap

برای اضافه کردن bootstrap به برنامه ی AngularJS کد زیر را به بخش head از صفحه ی HTML خود، ضمیمه کنید:

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

در زیر یک مثال HTML کامل وجود دارد که در آن تمام دستورات AngularJS و BootStrap شرح داده شده است:

کد HTML

<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> <form class="form-horizontal" ng-hide="hideform"> <h3 ng-show="edit">Create New User:</h3> <h3 ng-hide="edit">Edit User:</h3> <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> <hr> <button class="btn btn-success" ng-disabled="error || incomplete"> <span class="glyphicon glyphicon-save"> </span> Save Changes </button> </form> </div>

شرح دستورات بکار رفته در نمونه ی فوق

یک برنامه برای المان body تعریف می کند

< body ng-app"">

یک کنترلگر برای المان body تعریف می کند

< body ng-controller="" >

به ازای هر user در users عنصر tr را تکرار می کند

<tr ng-repeat="">

هنگامی که بر روی عنصر button کلیک می شود، تابع editUser() صدا زده می شود

<button ng-click="">

نمایان کردن عنصر h3 در صورتی که edit=true باشد

<h3 ng-show="">

پنهان کردن المان در صورتی که edit مقدار true را داشته باشد

<h3 ng-hide>

این دستور المان input را به برنامه ی مورد نظر bind می کند

<input ng-model>

چنانچه error یا incomplete دارای مقدار true باشد، المان button را غیر فعال می کند.

<button ng-disabled>

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

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

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

متغیر model (نام کاربر)

$cope.fName

متغیر model (نام خانوادگی کاربر)

$scope.lName

متغیر model (رمز عبور کاربر 1)

scope.passw1

متغیر model (رمز عبور کاربر 2)

scope.passw2

متغیر model (مجموعه یا آرایه ای از کاربران)

$scope.users

زمانی که کاربر بر روی create user کلیک می کند، روی true تنظیم می شود

$scope.edit

در صورتی که passw1 برابر با passw2 نباشد، روی مقدار true تنظیم می شود

$scope.error

در صورتی که فیلدی تهی باشد روی مقدار true تنظیم می شود.( hength=0)

$ scope.incomplete

متغیرهای model را مقداردهی (set) می کند

$scope.editUser

بر متغیرهای model نظارت می کند

$scope.watch

متغیرهای مدل را از نظر خطا یا ناکامل بودن مورد بررسی قرار می دهد

$ scope.test



نظرات کاربران



عبارت امنیتی : حاصل 5 × 1 می شود :
متن پیام :