AngularJS HTML DOM
parijat biswas
student of CSE
university of Asia Pacific

AngularJs Directives গুলো HTML DOM উপাদানগুলকে অ্যাপ্লিকেশন ডাটাতে যুক্ত করে ।
ng-disabled Directive
ng-disabled directive Angularjs অ্যাপ্লিকেশন ডাটাকে disabled html উপাদানগুলোর সাথে যুক্ত করে ।
AngularJS উদাহরনঃ
<div ng-app=””>

<p>
mySwitch”>Click Me!
</p>

<p>
<input type=”checkbox” ng-model=”mySwitch”>Button
</p>

</div>
* নিজে চেষ্টা করে দেখুন।
আপ্লিকেশনের ব্যাখ্যাঃ
ng-disabled directive অ্যাপ্লিকেশন ডাটা mySwitch কে html বাটন disabled এ যুক্ত করে ।
ng-model directive HTML checkbox উপাদানের এর মান কে mySwitch এর মানের সাথে যুক্ত করে ।
যদি mySwitch এর মান true হয়, তবে বাটনটি disabled হবেঃ
<p>
<button disabled>Click Me!</button>
</p>
যদি mySwitch এর মান false হয়, তবে বাটনটি disabled হবেনাঃ
<p>
<button>Click Me!</button>
</p>
ng-show Directive
ng-show directives html উপাদানকে show অথবা hide করে ।
AngularJS উদাহরনঃ
<div ng-app=””>

<p ng-show=”true”>I am visible.</p>

<p ng-show=”false”>I am not visible.</p>

</div>
* নিজে চেষ্টা করে দেখুন।
ng-show directive HTML উপাদানকে ng-show এর মানের উপর ভিত্তি করে দেখায়(show) বা আড়াল(hide) করে ।
আপনি true(সত্য) অথবা false(মিথ্যা) যেকোনো মান ব্যবহার করতে পারেনঃ
AngularJS উদাহরনঃ
<div ng-app=””>

<p ng-show=”hour > 12″>I am visible.</p>

</div>
* নিজে চেষ্টা করে দেখুন।
ng-hide Directive
ng-hide directive html উপাদানকে আড়াল(hide) বা দেখায়(show) করে ।
AngularJS উদাহরনঃ
<div ng-app=””>

<p ng-hide=”true”>I am not visible.</p>

<p ng-hide=”false”>I am visible.</p>

</div>
* নিজে চেষ্টা করে দেখুন।

পরাজিত বিশ্বাস

AngularJs আপনাকে নতুন এট্রিবিউট Directives এর মাধ্যমে html কে ব্যাখ্যা করতে সাহায্য করবে ।

AngularJS এর এক সেট বিল্ট ইন Directives আছে, যা আপনার প্রত্যেকটি অ্যাপ্লিকেশনকে কার্যকরি করে তোলে।

AngularJs আপনাকে আপনার নিজস্ব Directive সংঙ্গায়িত করার সুযোগ দেয়।

AngularJS ডিরেক্টিভ (AngularJS Directives)

AngularJs আপনাকে ng- prefix এর সাথে html কে ব্যাখ্যা করতে সাহায্য করবে ।

ng-app directive একটি AngularJs অ্যাপ্লিকেশন শুরু করে

ng-init directive অ্যাপ্লিকেশন ডাটার সূচনা করে

ng-model directive HTML controls (input, select, textarea) এর মান অ্যাপ্লিকেশন ডাটাতে যুক্ত করে

AngularJS উদাহরনঃ

<div ng-app=”” ng-init=”firstName=’John'”>

<p>Name: <input type=”text” ng-model=”firstName”></p>
<p>You wrote: {{ firstName }}</p>

</div>

ফলাফল : AngularJS ডিরেক্টিভ

ng-app directive AngularJS কে বলে যে, <div> এলিমেন্ট হচ্ছে AngularJs অ্যাপ্লিকেশনের মালিক ।

Data Binding (ডাটা যুক্তকরণ)

উদাহরনে দেওয়া {{ firstName }} expression হচ্ছে একটি AngularJS data binding expression ।
AngularJS data binding AngularJS expressions কে AngularJS data এর সাথে synchronized(সিঙ্ক্রোনাইজ) করে ।
{{ firstName }} টি ng-model=”firstName” এর সাথে synchronized(সিঙ্ক্রোনাইজ) ।
পরবর্তী উদাহরনে দুইটি text filed দুইটি ng-model directives এর সাথে synchronized(সিঙ্ক্রোনাইজ):
AngularJS উদাহরনঃ
<div ng-app=”” ng-init=”quantity=1;price=5″>

Quantity: <input type=”number” ng-model=”quantity”>
Costs: <input type=”number” ng-model=”price”>

Total in dollar: {{ quantity * price }}

</div>
* নিজে চেষ্টা করে দেখুন।

Repeating HTML Elements (HTML এর উপাদানসমূহ পুনরাবৃত্তি করা)
ng-repeat directive একটি HTML element কে repeat করেঃ
AngularJS উদাহরনঃ
Jani’,’Hege’,’Kai’]”>
<ul>
<li ng-repeat=”x in names”>
{{ x }}
</li>
</ul>
</div>
* নিজে চেষ্টা করে দেখুন।
ng-repeat directive ব্যবহৃত হয় একটি object এর array তেঃ
AngularJS উদাহরনঃ
<div ng-app=”” ng-init=”names=[
{name:’Jani’,country:’Norway’},
{name:’Hege’,country:’Sweden’},
{name:’Kai’,country:’Denmark’}]”>

<ul>
<li ng-repeat=”x in names”>
{{ x.name + ‘, ‘ + x.country }}
</li>
</ul>

</div>
* নিজে চেষ্টা করে দেখুন।
database CRUD (Create Read Update Delete) application এর জন্য AngularJS যথাযথ।
ng-app Directive
AngularJs এর মূল উপাদান সঙ্গায়িত করার জন্য ng-app directive কাজ করে ।
যখন একটি ওয়েব পেজ load হবে , তখন ng-app directive স্বয়ংক্রিয়ভাবে আপ্লিকেশনটির auto-bootstrap করবে ।
ng-init Directive
ng-init directive একটি AngularJs আপ্লিকেশনের initial value প্রকাশ করতে ব্যবহৃত হয় ।
সাধারনত আপনি এটি ব্যবহার করবেন না, এর পরিবর্তে আপনি controller অথবা module ব্যবহার করুন ।
controller এবং module সম্পর্কে পরে আপনি বিস্তারিত জানবেন ।
ng-model Directive
ng-model directive HTML controls (input, select, textarea) এর মান অ্যাপ্লিকেশন ডাটাতে যুক্ত করে ।
ng-model directive আরও যা করতে পারেঃ
১. application data (number, email, required) এর জন্য type validation প্রদান করতে পারে ।
২. application data (invalid, dirty, touched, error) এর অবস্থান প্রদান করতে পারে ।
৩. HTML element এর জন্য CSS class প্রদান করতে পারে ।
৪. HTML element কে HTML forms এ যুক্ত করতে পারে ।
ng-repeat Directive
একটি collection এর প্রতিটি item এর জন্য ng-repeat directive , HTML element কে clone করে। ( একটি array এর মধ্যে )

AngularJS Home পেজে যাওয়ার জন্য এখানে ক্লিক করুন

অ্যাঙ্গুলার জেএস (AngularJS) টেবিল (Tables)
Article By : Protap Chandra

আজকের টিউটরিয়ালে আমরা শিখব AngularJS এর মাধ্যমে কিভাবে টেবিল তৈরী করতে হয়। টেবিল তৈরীর জন্য ng-repeat ডিরেক্টিভ (directive) ব্যবহার করা যায়। AngularJS ব্যহার করে খুব সহজে ডাটাকে টেবিলে প্রদর্শন করা যায়। একটি উদাহরণের সাহায্যে বিষয়টি পরিস্কার করা যাক।

<div ng-app=”” ng-controller=”customersController”>

<table>
<tr ng-repeat=”x in names”>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

</div>

<script>
function customersController($scope,$http) {
$http.get(“http://www.justetc.com/website/Customers_JSON.php”)
.success(function(response) {$scope.names = response;});
}
</script>

উপরের উদাহরণটি একটি ডাটাবেজ থেকে আনা কোম্পানির নাম ও দেশের নাম একটি টেবিলের দুটি কলামে প্রদর্শন করবে। কিন্তু কোনো ভিজ্যুয়াল টেবিল তৈরী হবে না।

ভিজ্যুয়াল টেবিল তৈরী করতে গেলে ওই পেজে CSS ব্যবহার করতে হবে। যেমন-

<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

টেবিলের ডাটা সাজানোর জন্য orderBy ফিল্টার (Filter) ব্যবহার করা যায়: যেমন-

<table>
orderBy : ‘Country'”>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

এবার ডাটাগুলোর Country কলাম ধরে (a-z) order এ সাজাবে।

আপার কেস (uppercase)ফিল্টার
AngularJS এ uppercase ফিল্টার ব্যবহার করে ডাটাকে capital letter এ লেখা যায়।
যেমন-
<table>
<tr ng-repeat=”x in names”>
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase}}</td>
</tr>
</table>
এবার Country কলামের ডাটাগুলো সব capital letter বা বড় হাতের অক্ষরে লেখা হবে।

অ্যাঙ্গুলার জেএস (AngularJS) ফরম (Forms)
Article By : Protap Chandra
——–
আজকের টিউটরিয়ালে আমরা AngularJS ফরম সম্পর্কে জানব। AngularJS ফরম হচ্ছে HTML ইনপুট element সমূহের সেট, যা HTML controls নামে পরিচিত। যেমন –
• input elements
• select elements
• button elements
• textarea elements
AngularJS ফরম ব্যবহারের উদাহরণ:
formController”>
<form novalidate>
First Name:<br>
firstName”>

Last Name:<br>
lastName”>
<br><br>
<button ng-click=”reset()”>RESET</button>
</form>
<p>form = </p>
<p>master = </p>
</div>

<script>
function formController ($scope) {
$scope.master = {firstName: “John”, lastName: “Doe”};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
};
</script>

উদাহরণের AngularJS কোডের এই অংশটুকু রান করলে পরপর দুটি ইনপুট টেক্সবক্স আসবে। একটি বক্সের লেবেল “First Name” এবং অন্যটির “Last Name”। “First Name” টেক্সবক্সের ডিফল্ট value হিসেবে থাকবে “John” এবং “Last Name” টেক্সবক্সে ডিফল্ট value হিসেবে থাকবে Doe.

এর নিচে আরেক প্যারাতে থাকবে: form = {“firstName”:”John”,”lastName”:”Doe”}
firstName লেবেলযুক্ত ইনপুট বক্সে যা-ই লেখা হবে সাথে সাথে তা firstName এর পর synchronize হবে।
lastName লেবেলযুক্ত ইনপুট বক্সে যা-ই লেখা হবে সাথে সাথে তা lastName এর পর synchronize হবে।
এর নিচে আরেক প্যারাতে লেখা থাকবে: master = {“firstName”:”John”,”lastName”:”Doe”} অর্থাত এটাই ডিফল্ট ভ্যালু। Reset বাটনে ক্লিক করলে এই ভ্যালুতে ফিরে যাবে।

* উপরের উদাহরণে ব্যবহার করা novalidate attribute টি HTML5 এ নতুন সংযোজন. এটি default browser validation অকার্যকর করার জন্য ব্যবহার করা হয়।
উদাহরণটির বিশ্লেষণ:
ng-app directive এখানে AngularJS অ্যাপ্লিকেশন define করেছে।
ng-controller directive এখানে application controller define করেছে।
ng-model directive এখানে input element যুক্ত করেছে।
formController() ফাংশন master object এ প্রাথমিক ভ্যালূ যুক্ত করেছে এবং reset() method আহ্বান করেছে।
reset() method পরিবর্তন করা কোনো ডাটাকে master object এর প্রাথমিক ডাটায় ফিরিয়ে নেয়।
ng-click directive এখানে reset() method কে ঠিক তখনই আহ্বান করবে কেবল যখন এটিতে ক্লিক করা হবে।