অ্যাঙ্গুলার জেএস (AngularJS) এবং টুইটার বুটস্ট্র্যাপ
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)
বুটস্ট্র্যাপ একটি জনপ্রিয় স্টাইল শিট (style sheet) এই অধ্যায়ে AngularJS সঙ্গে কিভাবে এটি ব্যবহার হয় দেখানো হবে।
বুটস্ট্র্যাপ
আপনার AngularJS এপ্লিকেশন এ বুটস্ট্র্যাপ অন্তর্ভুক্ত করার জন্য, আপনার <head> এলিমেন্ট এর মধ্যে নিম্নলিখিত লাইনটি যোগ করুন:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
আপনি বুটস্ট্র্যাপ অধ্যয়ন করতে চান, আমাদের বুটস্ট্র্যাপ টিউটোরিয়ালে যান.
নীচে একটি সম্পূর্ণ এইচটিএমএল উদাহরণ সহ সকল AngularJS নির্দেশ এবং বুটস্ট্র্যাপ ক্লাস ব্যাখ্যা করা হয়েছে।
এইচটিএমএল কোড
<!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.26/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>
এটা নিজে চেষ্টা করে দেখুন
ডিরেক্টিভ (Directives) (উপরে ব্যবহৃত) ব্যাখ্যা
AngularJS ডিরেক্টিভ বর্ণনা
<html ng-app ডিফাইন করে (unnamed) এপ্লিকেশন <html> এলিমেন্ট এর জন্য
<body ng-controller একটি কন্ট্রোলার ডিফাইন করে <body> এলিমেন্ট এর জন্য
<tr ng-repeat <tr> এলিমেন্ট রিপিট করে প্রত্যেক ইউজার এর ইউজারগুলোর মধ্যে
<button ng-click editUser() ফাংশনকে কল করে যখন <button> এ ক্লিক করা হয়
<h3 ng-show <h3> এলিমেন্ট প্রদর্শন করে যদি edit = true
<h3 ng-hide <h3> এলিমেন্ট অদৃশ্য করে যদি edit = true
<input ng-model <input> এলিমেন্ট বাধাই করে এপ্লিকেশন এর মধ্যে।
<button ng-disabled <button> এলিমেন্ট নিস্ক্রিয় করে যদি কোন ভূল বা অপরিপূর্ণতা থাকে incomplete = true
________________________________________
বুটস্ট্র্যাপ ক্লাস এ ব্যাখ্যা
এলিমেন্ট বুটস্ট্র্যাপ ক্লাস ডিফাইনস
<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 একটি কন্ট্রোল লেবেল
<label> col-sm-2 একটি ২ কলাম স্প্যান
<div> col-sm-10 একটি ১০ কলাম স্প্যান
________________________________________
জাভাস্ক্রিপট কোড
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.fName মডেল ভেরিয়েবল (ইউজার ফার্স্ট নেম)
$scope.lName মডেল ভেরিয়েবল ((ইউজার লাস্ট নেম)
$scope.passw1 মডেল ভেরিয়েবল (ইউজার পাসওয়ার্ড ১)
$scope.passw2 মডেল ভেরিয়েবল (ইউজার পাসওয়ার্ড ১))
$scope.users মডেল ভেরিয়েবল (অ্যারে অব ইউজার)
$scope.edit সেট true যখন ইউজার ক্রিয়েট ইউজার এ ক্লিক করে.
$scope.error সেট true যদি passw1 passw2 এর মত না হয়
$scope.incomplete সেট true যদি কোন ফিল্ড ফাকা থাকে (length = 0)
$scope.editUser সেট মডেল ভেরিয়েবল
$scope.watch ওয়াচেস মডেল ভেরিয়েবল
$scope.test টেস্ট মডেল ভেরিয়েবল ভূল অথবা অপরিপূর্ণতার জন্য।
