دوره آموزشی AngularJS به زبان فارسی - بخش چهاردهم
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
آموزش AngularJS
بخش چهاردهم
AngularJS and Twitter Bootstrap
Twitter Bootstrap یک style sheet محبوب است در این بخش می خواهیم نحوه استفاده از Bootstrap در AngularJS را بررسی کنیم.
Bootstrap
برای اضافه کردن Twitter Bootstrap به پروژه AngularJS می بایست کد زیر را به <head> صفحه خود اضافه کنید.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
در بخش زیر یک مثال کامل از رهنمودهای AngularJS و کلاس های Bootstrap وجود دارد.
HTML CODE
<!DOCTYPE html>
<html ng-app="">
<head>
<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.2.15/angular.min.js"></script>
</head>
<body ng-controller="userController">
<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>>
تشریح رهنمودهای استفاده شده در مثال بالا
| رهنمود AngularJS | توضیح |
|---|---|
| <html ng-app | Defines an (unnamed) application for the <html> element |
| <body ng-controller | Defines a controller for the <body> element |
| <tr ng-repeat | Repeats the <tr> element for each user in users |
| <button ng-click | Invoke the function editUser() when the <button> element is clicked |
| <h3 ng-show | Show the <h3>s element if edit = true |
| <h3 ng-hide | Hide the <h3> element if edit = true |
| <input ng-model | Bind the <input> element to the application |
| <button ng-disabled | Disables the <button> element if error or incomplete = true |
تشریح کلاسهای استفاده شده در مثال بالا
| Element | Bootstrap Class | Defines |
|---|---|---|
| <div> | container | A content container |
| <table> | table | A table |
| <table> | table-striped | A striped table |
| <button> | btn | A button |
| <button> | btn-success | A success button |
| <span> | glyphicon | A glyph icon |
| <span> | glyphicon-pencil | A pencil icon |
| <span> | glyphicon-user | A user icon |
| <span> | glyphicon-save | A save icon |
| <form> | form-horizontal | A horizontal form |
| <div> | form-group | A form group |
| <label> | control-label | A control label |
| <label> | col-sm-2 | A 2 columns span |
| <div> | col-sm-10 | A 10 columns span |
JavaScript Code
function userController($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 | Model variable (user first name) |
| $scope.lName | Model variable (user last name) |
| $scope.passw1 | Model variable (user password 1) |
| $scope.passw2 | Model variable (user password 2) |
| $scope.users | Model variable (array of users) |
| $scope.edit | Set to true when user clicks on create user. |
| $scope.error | Set to true if passw1 not equal passw2 |
| $scope.incomplete | Set to true if any field is empty (length = 0) |
| $scope.editUser | Sets model variables |
| $scope.watch | Watches model variables |
| $scope.test | Tests model variables for errors and incompleteness |
مشاهده تمامی آموزش های دوره AngularJS
نظرات (۰)
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.