Category Archives: AngularJS – 001

Step by step lessons on AngularJS

অ্যাঙ্গুলার জেএস (AngularJS) এবং টুইটার বুটস্ট্র্যাপ

মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)

বুটস্ট্র্যাপ একটি জনপ্রিয় স্টাইল শিট (style sheet) এই অধ্যায়ে AngularJS সঙ্গে কিভাবে এটি ব্যবহার হয় দেখানো হবে।

বুটস্ট্র্যাপ
আপনার AngularJS এপ্লিকেশন এ বুটস্ট্র্যাপ অন্তর্ভুক্ত করার জন্য, আপনার <head> এলিমেন্ট এর মধ্যে নিম্নলিখিত লাইনটি যোগ করুন:

আপনি বুটস্ট্র্যাপ অধ্যয়ন করতে চান, আমাদের বুটস্ট্র্যাপ টিউটোরিয়ালে যান.

নীচে একটি সম্পূর্ণ এইচটিএমএল উদাহরণ সহ সকল 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>

<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>

এটা নিজে চেষ্টা করে দেখুন

ডিরেক্টিভ (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 টেস্ট মডেল ভেরিয়েবল ভূল অথবা অপরিপূর্ণতার জন্য।

AngularJS - 001

AngularJS Templates এর নিরাপত্তা।

March 23, 2015 Author-Check- Article-or-Video

URL of translated tutorial
http://sitestree.com/securing-your-angularjs-applications/

Paste written translation here
AngularJS Templates এর নিরাপত্তা।
Md. Shahinoor Islam
যদি আপনি চান তবে আপনি এটা ($templateCache caches templates) ব্যবহার করতে পারেন। প্রত্যেক user কে login করার সময় cache টা remove করতে হবে।
নিচের উদাহরনটি আপনাকে সাহায্য করবে,
Cache-Control: no-cache, no-store, must-revalidate
Pragma : no-cache
Expires : 0
https ব্যবহার snooping এর জন্য সুবিধাজনক , না করলে মাঝখানে কিছু অসুবিধা হতে পারে।
আপনাকে JSON Injection এর আক্রমন প্রতিরোধ করতে হবে।
প্রতিরোধ করতে আপনি নিচের উধাহরনটি লক্ষ্য করুন।
আপনার JSON এর পুর্বে লিখুন এটি )]}’, যদিও এটা বৈধ নয়।
client side থেকে XSS এর আক্রমন দূর করতে হবে।
AngularJS সব HTML প্রদর্শন করে যা ng-bind directive, or template interpolation এর মাধমে text এর ভিতর দেখা দেখা যায় (that is text in {{curly braces}}).

AngularJS - 001

AngularJS এর performance উন্নতি

March 23, 2015 Author-Check- Article-or-Video

http://sitestree.com/performance-improvement-of-angularjs-applications-writing-robust-angulajs-applications/

Paste written translation here
AngularJS এর performance উন্নতি
Application: জোরালো AngulaJS application লেখা।
Md. Shahinoor IslamAngularJS এর performance উন্নতি, Application: জোরালো AngulaJS application লেখা।
মুলত আপনার যোগ্যতা পরিমাপ করতে হবে এবং ফলাফলের উপর কৌশল প্রয়োগ করে আবেদন করতে হবে।
আপনার জানাটা ভুল হতে পারে যদি আপনি এটা বাস্তব জীবনে প্রয়োগ না করেন। তাছাড়া যোগ্যতার পরিক্ষায় real অথবা simple Data আপনাকে সাহায্য করতে পারে এটি Application এর উপর নির্ভর করে।এটা ঠিক যে, আমার খুব একটা অভিঞতা নেই কিন্তু সঠিক পরামর্শ হল যে, আপনাকে $digest loops ব্যবহার সম্পর্কে সাবধান হতে হবে। 50 loops or 100 loops এর বেশি পুনরাবৃত্তি আপনার application কে অচল করে দিতে পারে।
$digest loops এর ভিতরের watch number গুলো এবং তাড়াতাড়ি সেগুলো কাজ করতে পারে, এগুলো application এর যোগ্যতার প্রভাব ফেলে দেয়। আপনি number of watches কমাতে পারেন অথবা দ্রুত গতি সুম্পর্ন করতে পারেন। আপনি মনিটর মেমরি ব্যবহার করতে পারেন। মেমরির ব্যবহার কমিয়ে দিলে আপনার application দ্রুতগতি সম্পুর্ন হতে পারে।
ng-repeat directive টি খুব ক্ষমতা সম্পুর্ন। যদি আপনি 100s ধরনের কাজ করার জন্য ng-repeat ব্যবহার করেন তবে এটি আপনার application কে অচল করে দিতে পারে। তাই আপনার collections টি সীমিত করুন অথবা আপনার উদ্দেশ্য সফল করার জন্য custom directives দিয়ে লিখুন। অন্যথায় এমন ভাবে কাজটি করুন যাতে আপনাকে খুব বেশি চাপ প্রয়োগ না করে, যা আপনাকেই ভাবতে হবে

AngularJS - 001

AngularJS এ নিজের/Custom Directives তৈরি। building-your-own-directives-in-angularjs

March 23, 2015 Author-Check- Article-or-Video

AngularJS এর মাধ্যমে নিজের Directives তৈরি।
Md. Shahinoor Islamনিজের Directives তৈরি।
HTML উপাদান, মন্তব্য বা CSS classes দিয়ে Directives প্রদর্শন করতে পার। উদাহরনঃ

<my-directive></my-directive>
<input my-directive>
<!– directive: my-directive–>
<input>

একটি Directive এর ধারনা
angular.module(‘app’, []).directive(‘myDir’, function() {
return myDirectiveDefinition;
});

একটি Button Directive লেখা
escribe(‘button directive’, function () {
var $compile, $rootScope;
beforeEach(module(‘directives.button’));
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it(‘adds a “btn” class to the button element’, function() {
var element = $compile(‘<button></button>’)($rootScope);
expect(element.hasClass(‘btn’)).toBe(true);
});
});
});

button directive ব্যবহার
<button type=”submit”
>Click Me!</button>

একটি Custom Validation Directives প্রবর্তন
একটি Custom Validation directive প্রবর্তন

এই জায়গায় আমাদের একটা test আছে, সুতরাং আমরা directive এর কার্যকারিতা বাস্তবায়ন করতে পারিঃ

myModule.directive(‘validateEquals’, function() {
return {
require: ‘ngModel’,
link: function(scope, elm, attrs, ngModelCtrl) {
function validateEqual(myValue) {
var valid= (myValue === scope.$eval(attrs.validateEquals));
ngModelCtrl.$setValidity(‘equal’, valid);
return valid ? myValue : undefined;
}
ngModelCtrl.$parsers.push(validateEqual);
ngModelCtrl.$formatters.push(validateEqual);
scope.$watch(attrs.validateEquals, function() {
ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
});
}
};
});

AngularJS - 001

Angular স্থানীয়করণ (Localization) সমর্থন: AngularJS আন্তর্জাতিক অ্যাপ্লিকেশনের লেখা। Localization Support in Angular : Writing International Applications in AngularJS

March 23, 2015 Author-Check- Article-or-Video

URL of translated tutorial
http://sitestree.com/841/

Paste written translation here
Angular স্থানীয়করণ সমর্থন: AngularJS আন্তর্জাতিক অ্যাপ্লিকেশনের লেখা।
Md. Shahinoor IslamAngular স্থানীয়করণ সমর্থন: AngularJS আন্তর্জাতিক অ্যাপ্লিকেশনের লেখা।
AngularJS লাইব্রেরি অধীনে en-US লোকেল সম্পর্কিত তথ্য রাখা হয় যেখানে একটি ফোল্ডার i18n আছে। আপনি একটি ভিন্ন লোকেল ব্যবহার করতে চান তাহলে নিম্নরূপ আপনি এটি করতে পারেন। Fr_ca লোকেলর জন্য সমর্থন lib/angular/angular-locale_fr-ca.js সঙ্গে স্ক্রিপ্ট ট্যাগ লক্ষ্য করুন। নীচে যেভাবে দেয়া আছে JS ফাইল সে ভাবে হতে হবে।
angular.module(‘locale’, [‘ngLocale’]) : module definition with a dependency on the ngLocale
angular.module (‘locale’, [‘ngLocale’]) : ngLocale মডিউলের উপর মডিউলের সংজ্ঞা নির্ভর করে।
<!doctype html>
<html ng-app=”locale”>
<head>
<meta charset=”utf-8″>
<script src=”lib/angular/angular.js”></script>
<script src=”lib/angular/angular-locale_fr-ca.js”></script>
<script src=”locale.js”></script>
</head>
<body ng-controller=”LocaleCtrl”>
…
</body>
—

সম্পর্কিত উদাহরণ:
{{now | date:’fullDate’}}সেট হিসাবে সম্পূর্ণ তারিখ ফিরে আসবে লোকেলর উপর ভিত্তি করে
{{100 | currency:’€’}}
{{1000.5 | number}}
অনুবাদ হ্যান্ডলিং: টেক্সট বিভিন্ন ভাষার জন্য অনুবাদ করতে হবে।

প্রাথমিক ধারণা হচ্ছে, বিভিন্ন লোকেইলের জন্য key value pairs সহ আপনার JSON structure থাকতে হবে।আপনি ইউজার লোকেল দিয়ে যেখানে অনুবাদ করতে চাচ্ছেন সেখানে কী গুলো ব্যবহার করুন।

উদাহরনঃ
{
‘crud.user.remove.success': ‘A user was removed successfully.’,
‘crud.user.remove.error': ‘There was a problem removing a user.’
. . .
}
In your HTML, you can write something like below
<span>Hello, !</span>
to
<span>{{‘greetings.hello’ | i18n}}, !</span>

greetings.hello key সহ লোকেলের জন্য আপনার প্রয়োজনীয় JSON আপনি বুঝতে পেরেছেন।

AngularJS - 001

MVVM: মডেল : Angular JS

March 23, 2015 Author-Check- Article-or-Video

URL of translated tutorial
http://sitestree.com/mvvm-model-view-viewmodel/
Paste written translation here
MVVM: মডেল দেখুন ViewModel
অনুবাদক শেখ সোয়াইব

MVVM: এই ধরনের Angular.JS এবং Knockout.js হিসেবে
http://en.wikipedia.org/wiki/Model_View_ViewModel
KnockOut.js
http://en.wikipedia.org/wiki/Knockout.js
মার্টিন ফাওলার দ্বারা উপস্থাপনা মডেল
http://martinfowler.com/eaaDev/PresentationModel.html (theory behind: MVVM)

AngularJS - 001

Angular.JS বিষয় : সম্পর্কিত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক স্টাফ . Angular.JS resources : Related JavaScript framework Stuff

March 23, 2015 Author-Check- Article-or-Video

Angular.JS বিষয় : সম্পর্কিত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক স্টাফ

Source: http://sitestree.com/angular-js-resources-related-javascript-framework-stuff/ (by Sayed Ahmed)
By শেখ সোয়াইব

কেন Angular? এবং কেন Angular না
http://www.sitepoint.com/10-reasons-use-angularjs/
কেন এই Angular.js Rock?
http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/
অনুচ্ছেদ এবং ই এস পি বিভাগের সম্পুর্ন পড়ুন : কেন Augular নয়?কেন নয় BackBone ,কেন নয় Ember । এ সম্প্রর্কিত বিষয় পড়তে এখানে ক্লিক করুন । https://moot.it/blog/technology/frameworkless-javascript.html

এই অনুচ্ছেদটি ও গুরুত্বপুর্ন : http://angular-tips.com/blog/archives/
স্লপ সাইজের ওয়েব ডেভল্ভমেন্ট ট্রেনিং এর সাথে Angular : https://egghead.io/
ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্ট এর সাথে Angular নিয়ন্ত্রণ : http://www.packtpub.com/angularjs-web-application-development/book
CRUD অ্যাপ্লিকেশন Angular ডেমো : https://github.com/angular-app/angular-app
Angular.JS উইকিপিডিয়া : https://github.com/angular/angular.js/wiki

AngularJS - 001

অ্যাংগুলার-জেএস অ্যাপ্লিকেশন . AngularJS Application

February 3, 2015 Author-Check- Article-or-Video

অ্যাংগুলার-জেএস অ্যাপ্লিকেশন
Sheikh Mahfuzur Rahman

অ্যাংগুলার-জেএস অ্যাপ্লিকেশন

আপনি পূর্বের সবগুলো টিউটোরিয়াল পড়ে থাকলে, একটি প্রকৃত অ্যাংগুলার-জেএস সিংগেল পেজ অ্যাপ্লিকেশন(SPA) তৈরির জন্য এটাই উপযুক্ত সময়!

একটি অ্যাংগুলার-জেএস অ্যাপ্লিকেশনের উদাহরণ
আশা করি পূর্বের টিউটোরিয়ালগুলো পড়ে আপনি আপনার প্রথম অ্যাংগুলার-জেএস অ্যাপ্লিকেশন তৈরির জন্য যথেষ্ট কৌশল শিখে নিয়েছেনঃ
My Note

Number of characters left: 100

উদাহরণসহ অ্যাপ্লিকেশনটির ব্যাখ্যাঃ

myNoteApp">

<head>

</head>

<body>

myNoteCtrl">

<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>

<p>Number of characters left: <span ng-bind="left()"></span></p>

</div>

</body>
</html>

অ্যাপ্লিকেশন ফাইলটি হলো "myNoteApp.js":

var app = angular.module("myNoteApp", []);

কন্ট্রোলার ফাইলটি হলো "myNoteCtrl.js":

app.controller("myNoteCtrl", function($scope) {
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message = "";};
$scope.save = function() {alert("Note Saved");};
});

<html> এলিমেন্টটি অ্যাংগুলার-জেএস অ্যাপ্লিকেশন ng-app="myNoteApp" এর কন্টেইনার হিসেবে কাজ করেঃ

একটি <div> এলিমেন্ট এইচটিএমএল পেজে কন্ট্রোলার ng-controller="myNoteCtrl" এর স্কোপ হিসেবে কাজ করেঃ

একটি ng-model ডিরেক্টিভ একটি <textarea> কে কন্ট্রোলার ভ্যারিয়েবল ম্যাসেজে বাইন্ড করেঃ

ng-click ইভেন্ট দু'টি কন্ট্রোলার ফাংশন clear() এবং clear() কে ইনভোক বা আহবান করেঃ

<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>

একটি ng-bind ডিরেক্টিভ বাকি থাকা ক্যারেকটারগুলো দেখিয়ে কন্ট্রোলার ফাংশন left() কে <span> তে বাইন্ড করেঃ

Number of characters left: <span ng-bind="left()"></span>

পেজে অ্যাপনার অ্যাপ্লিকেশন লাইব্রেরিকে যোগ করা হয়েছে (লাইব্রেরির পরে):

অ্যাংগুলার-জেএস অ্যাপ্লিকেশনের কাঠামো

উপরে ব্যবহার উপযোগী একটি বাস্তব অ্যাংগুলার-জেএস (single page application অর্থাৎ SPA) এর কাঠামো দেয়া হয়েছে।
<html> এলিমেন্টটি অ্যাংগুলার-জেএস অ্যাপ্লিকেশনের (ng-app=) কন্টেইনার।
<div> এলিমেন্টটি একটি অ্যাংগুলার-জেএস কন্ট্রোলারের (ng-controller=) স্কোপ ঠিক করে দেয়।
একটি অ্যাপ্লিকেশনে অনেকগুলো কন্ট্রোলার ব্যবহার করতে পারবেন।
একটি অ্যাপ্লিকেশন ফাইল (my...App.js) অ্যাপ্লিকেশন মড্যুল কোড নির্ধারণ করে।
এক বা একাধিক কন্ট্রোলার ফাইল (my...Ctrl.js) কন্ট্রোলার কোড নির্ধারণ করে।

পুরো প্রক্রিয়াটির সারাংশ?

অ্যাংগুলার-জেএস লাইব্রেরিটি <head> এ লোড হয়, কারন সঠিকভাবে কম্পাইলড হওয়ার জন্য স্ক্রিপ্টগুলো লাইব্রেরি কোডের উপর নির্ভর করে।
ng-app ডিরেক্টিভটি অ্যাপ্লিশনের রুট এলিমেন্টে রাখা হয়।
সিংগেল পেজ অ্যাপ্লিকেশনের(SPA) জন্য <html> এলিমেন্টটিই অধিকাংশ সময় অ্যাপ্লিকেশন রুট হয়ে থাকে।
এক বা একাধিক ng-controller ডিরেক্টিভ অ্যাপ্লিকেশন কন্ট্রোলার নির্ধারণ করে দেয়। প্রত্যেকটি কন্ট্রোলারের নিজস্ব স্কোপ (যে এইচটিএমএল এলিমেন্টে সেগুলো ডিফাইন করা হয়েছে) রয়েছে।
HTML DOMContentLoaded ইভেন্টে অ্যাংগুলার-জেএস সয়ংক্রিয়ভাবে সচল হয়ে যায়। যদি একটি ng-app ডিরেক্টিভ পাওয়া যায় অ্যাংগুলার-জেএস ঐ ডিরেক্টিভে উল্লেখিত (নেমড) যেকোন মড্যুলকে লোড করবে এবং DOM কে ng-app দিয়ে অ্যাপ্লিকেশনের রুট হিসেবে কম্পাইল করবে।
পুরো পেজটিই অ্যাপ্লিকেশনের রুট হতে পারে; অথবা এর ক্ষুদ্রতর অংশও হতে পারে। পেজের অংশটি যত ক্ষুদ্র হবে অ্যাপ্লিকেশনটি তত দ্রুত কম্পাইল ও অ্যাকজিকিউট করবে।

AngularJS - 001, Complete Courses, Professional, Root

AngularJS References

February 2, 2015 Author-Check- Article-or-Video

AngularJS References
parijat biswas
student of CSE
university of Asia Pacific

AngularJS Directives
যেসব AngularJS Directives এই টিউটোরিয়ালে ব্যবহৃত হয়ছেঃ
Directive বর্ণনা ব্যাখ্যা
ng-app একটি অ্যাপ্লিকেশন এর মূল উপাদান সংজ্ঞায়িত করার জন্য ব্যবহৃত Directives
ng-bind HTML element এর innerHTML এপ্লিকেশন ডাটাতে যুক্ত করে । Introduction
ng-click একটি উপাদান ক্লিক করা হলে আচরণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় । HTML Events

ng-controller একটি অ্যাপ্লিকেশনের object control করার জন্য ব্যবহৃত হয় । Controllers

ng-disabled HTML disabled attribute এ এপ্লিকেশন ডাটা যুক্ত করে । HTML DOM

ng-hide html উপাদান hide বা show করে । HTML DOM
ng-include একটি অ্যাপ্লিকেশন মধ্যে html যুক্ত করে । Includes

ng-init একটি অ্যাপ্লিকেশনের জন্য প্রাথমিক মান সংজ্ঞায়িত করার জন্য ব্যবহৃত Directives

ng-model এপ্লিকেশন ডাটাতে html control এর মান যুক্ত করে । Directives

ng-repeat প্রতিটি ডাটার জন্য একটি টেমপ্লেট সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় । Directives

ng-show html উপাদান show অথবা hide করে । HTML DOM

AngularJS Filters
AngularJS Filters

যেসব AngularJS Filters এই টিউটোরিয়ালে ব্যবহৃত হয়ছেঃ
Filter বর্ণনা
Currency একটি নাম্বারকে currency format এ রূপান্তর করে ।

Filter একটি array থেকে subset নির্বাচন করে ।

Lowercase একটি string কে lower case এ রুপান্তর (format) করে ।

orderBy expression এর মাধ্যমে একটি array কে order করে ।

uppercase একটি string কে upper case এ রুপান্তর (format) করে ।

AngularJS - 001, Complete Courses, Professional, Root

AngularJS অন্তর্ভুক্ত (AngularJS Includes)

January 31, 2015 Author-Check- Article-or-Video

AngularJS অন্তর্ভুক্ত (AngularJS Includes)
AngularJS এ, আপনি এইচটিএমএল এ এইচটিএমএল ফাইল অন্তর্ভুক্ত করতে পারেন.
এইচটিএমএল ভবিষ্যত এইচটিএমএল এ অন্তর্ভুক্ত

এইচটিএমএল এ এইচটিএমএল এর একটি portion অন্তর্ভূক্ত দুর্ভাগ্যবশত এখনো পর্যন্ত supported না।

এইচটিএমএল ইমপোর্ট করে W3C suggestion. http://www.w3.org ভবিষ্যৎ ভার্সনগুলোর জন্য প্রযোজ্য। (With
<link rel="import" href="/path/navigation.html">

সার্ভার সাইড অন্তর্ভুক্ত (Server Side Includes)

অধিকাংশ ওয়েব সার্ভার সার্ভার সাইড ইনক্লুডস (এসএসআই) অন্তর্ভুক্তকরণ সমর্থন করে।

এসএসআই এর মাধ্যমে, আপনি আপনার পেজ ব্রাউজার এ পাঠানোর আগেই এইচটিএমএল এ এইচটিএমএল অন্তুর্ভূক্ত করতে পারবেন।

php require("navigation.php"); ?>

ক্লায়েন্ট সাইড অন্তর্ভুক্ত (Client Side Includes)

এইচটিএমএল এ এইচটিএমএল অন্তর্ভুক্ত করতে জাভাস্ক্রিপ্ট ব্যবহার করার জন্য অনেক উপায় আছে.

সবচেয়ে সাধারণ ভাবে, এইচটিটিপি (http) রিকুয়েস্ট ব্যবহার করে (AJAX) সার্ভার থেকে তথ্য সংগ্রহ করে এবং এইচটিএমএল এর তথ্যগুলো innerHTML এ write

AngularJS সাইড অন্তর্ভুক্ত (AngularJS Side Includes)

AngularJS সঙ্গে, আপনি ng-include নির্দেশ (directive) ব্যবহার করে, HTML সামগ্রী অন্তর্ভুক্ত করতে পারেন:
উদাহরণ:
<body>

</body>

নিচে ৩টি ধাপে পরিপূর্ণভাবে তুলে ধরা হলো:

ধাপ ১: এইচটিএমএল তালিকা তৈরি করুন (Create the HTML List)
myUsers_List.html
<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)">
  Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>

Step 2: Create the HTML Form
ধাপ ২: এইচটিএমএল ফরম তৈরি করুন (Create the HTML Form)
myUsers_Form.html
<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 ng-hide="edit">Edit User:</h3>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>

Step 3: Create the Main Page
ধাপ ৩: মেইন পেজ তৈরি করুন (Create the HTML Form)
myUsers.html
DOCTYPE html>
<html ng-app="">
<head>
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>

</body>
</html>

AngularJS - 001, Complete Courses, Professional, Root

AngularJS Input Validation

January 30, 2015 Author-Check- Article-or-Video

AngularJS Input Validation

AngularJS প্রয়োগকৃত Data এর বৈধতা গঠন এবং নিয়ন্ত্রন করে

Input Validation

পূর্ববর্তী অধ্যায়ে আমরা AngularJS forms and controls শিখেছিলাম
AngularJS প্রয়োগকৃত Data এর বৈধতা গঠন এবং নিয়ন্ত্রন করে এবং ব্যবহারকারিকে ভুল তথ্য Input করার সময় Notify (সতর্ক) করে

Client-side validation একা ব্যবহারকারির input তথ্যকে নিরাপত্তা দিতে পারে না, Server side validation ও দরকার এই জন্য

Application Code

DOCTYPE html>
<html>

<head>

</head>

<body>
<h2>Validation Example</h2>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

</form>

</body>
</html>

নিজে চেষ্টা করুন

The HTML এর অবৈধগুন (novalidate) ব্যবহার করা হয় default browser validation অক্ষম (Disable) করতে

উদাহরনের ব্যখাঃ

AngularJS নিরদেশক ng-model input ডাঁটা গুলকে একটা মডেলের মাধমে সাজিয়ে ফেলে

The model object এর দুইটা অংশ আছে : User আর Email

ng-show এর কারনে , spans লাল রঙ্গে প্রদর্শিত হয় তখন ই যখন User অথবা Email $dirty (ত্রুটি পূর্ণ ) and $invalid(অবৈধ)

AngularJS - 001, Professional, Root

অ্যাঙ্গুলার জাভাস্ক্রিপ্ট মডিউল (AngularJS Modules in Bangla

January 30, 2015 Author-Check- Article-or-Video

1. লিখেছেন সুদীপ্ত সাহা

অ্যাঙ্গুলার জাভাস্ক্রিপ্ট মডিউল

মডিউল বলতে অ্যাপ্লিকেশনকে বোঝানো হয়। সকল অ্যাপ্লিকেশন কন্ট্রোলারই মডিউলের অংশ। মডিউল আপনার অ্যাপ্লিকেশনকে ভালোভাবে বুঝতে সাহায্য করে এবং একইসাথে গ্লোবাল নেমস্পেসকে সুসংগঠিত রাখে।

অ্যাঙ্গুলার জাভাস্ক্রিপ্ট মডিউল উদাহরনঃ
এই উদাহরনে myApp.js অ্যাপ্লিকেশন মডিউল ধারন করে এবং myCtrl.js কন্ট্রোলার ধারন করেঃ
DOCTYPE html>
<html>

<head>

</head>

<body>
myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

</body>
</html>

কন্ট্রোলার গ্লোবাল নেমস্পেসকে অসংগঠিত করে তোলেঃ
এই টিউটোরিয়ালের একটি উদাহরণে গ্লোবাল ভ্যালু ব্যবহার করা হয়েছে (গ্লোবাল ভ্যারিয়েবল বা গ্লোবাল ফাংশন)।
কোন অ্যাপ্লিকেশনে গ্লোবাল ভ্যালু এরিয়ে চলা উচিৎ। গ্লোবাল ভ্যালুকে খুব সহজে অন্য কোন স্ক্রিপ্ট দ্বারা নষ্ট করা যায় অথবা ওভাররাইট করা যায়। অ্যাঙ্গুলার জাভাস্ক্রিপ্ট মডিউল দ্বারা এই সমস্যার সমাধান করা যায়।

মডিউলবিহীন কন্ট্রোলারঃ
এই উদাহরণের অ্যাপ্লিকেশনে নেম নেই এবং এর কন্ট্রোলার ফাংশন গ্লোবালঃ
DOCTYPE html>
<html>

<head>

</head>

<body>
<div ng-app="" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

</body>
</html>

মডিউলযুক্ত কন্ট্রোলারঃ
এই উদাহরণের অ্যাপ্লিকেশনের নেম হচ্ছে ng-app=”myApp” নেই এবং এর কন্ট্রোলার মডিউলের একটি প্রপার্টিঃ
DOCTYPE html>
<html>

<head>

</head>

<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

</body>
</html>

একটি লাইব্রেরি কখন লোড করতে হয়?
উপরের সবগুলো উদাহরনে অ্যাঙ্গুলার জাভাস্ক্রিপ্ট লাইব্রেরি <head> এর মধ্যে লোড হয়।

HTML অ্যাপ্লিকেশনের ক্ষেত্রে সকল স্ক্রিপ্ট ফাইলগুলো <body> এর একদম নিচের দিকে লোড করা ভালো। কিন্তু বেশিরভাগ অ্যাঙ্গুলার জাভাস্ক্রিপ্টের উদাহরণে দেখা যায়, লাইব্রেরি ফাইলগুলো <head> এর মধ্যে লোড করা হয়। এর কারণ হচ্ছে, শুধুমাত্র লাইব্রেরি ফাইল লোড হওয়ার পর অ্যাঙ্গুলার মডিউল কম্পাইল করা সম্ভব। অন্য একটি সমাধান হলঃ পেজের নিজস্ব অ্যাঙ্গুলার জাভাস্ক্রিপ্ট লোড হওয়ার পূর্বে অ্যাঙ্গুলার জাভাস্ক্রিপ্ট লাইব্রেরিকে <body> এর মধ্যে লোড করানো।
DOCTYPE html>
<html>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

</body>
</html>

অ্যাঙ্গুলার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন ফাইলঃ
মডিউল কি এবং কিভাবে কাজ করে তা আমরা এখন জানি, তাই এখন আমরা আমাদের নিজেদের অ্যাপ্লিকেশন ফাইল তৈরি করতে পারব।
একটি অ্যাপ্লিকেশনে কমপক্ষে একটি অ্যাপ্লিকেশন ফাইল এবং একটি মডিউল ফাইল থাকতে হবে।

প্রথমে “myApp.js” নামের একটি মডিউল ফাইল তৈরি করিঃ
var app = angular.module("myApp", []);

মডিউলের প্যারামিটার [] কোন ডাটার উপর নির্ভরশীল মডিউলকে নির্দেশ করে।

এরপর “myCtrl.js” নামের একটি কন্ট্রোলার ফাইল তৈরি করিঃ
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});

এবং সবশেষে HTML ফাইলকে এডিট করতে হবেঃ
DOCTYPE html>
<html>

<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

</body>
</html>

AngularJS - 001, Professional, Root

অঙ্গুলার জেএস এইচটিটিপি রিকুয়েস্ট AngularJS XMLHttpRequest . AngularJS XMLHttpRequest

January 30, 2015 Author-Check- Article-or-Video

অঙ্গুলার জেএস এইচটিটিপি রিকুয়েস্ট AngularJS XMLHttpRequest
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)

$http রিমোট সার্ভার থেকে তথ্য পড়ার জন্য একটি AngularJS সার্ভিস।

একটি JSON ফাইল পড়া (Reading a JSON File)

নিম্নলিখিত স্ট্যাটিক JSON ফাইল একটি ওয়েব সার্ভারে সংরক্ষণ করা হয়:

http://www.justetc.com/website/Customers_JSON.php
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]

AngularJS $http

AngularJS $http ওয়েব সার্ভার থেকে তথ্য রিড করার জন্য একটি কোর সার্ভিস।

$http.get (url) ফাংশনটি সার্ভার ডাটা রিড করার জন্য ব্যবহৃত হয়।

অঙ্গুলার জেএস উদাহরণ:
customersController">

<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>

</div>

এপ্লিকেশন ব্যাখ্যা:

AngularJS এপ্লিকেশন ng-app দ্বারা ডিফাইন করা হয়। এপ্লিকেশনটি

ভিতরে রান করে।

ng-controller ডিরেক্টিভ কন্ট্রোলার অবজেক্ট এর নামকরণ করে।

customersController ফাংশন একটি আদর্শ জাভাস্ক্রিপ্ট অবজেক্ট কন্সট্রাক্টর।

AngularJS একটি $scope এবং $http অবজেক্ট এর সাথে customersController কে কল করবে।
$scope অ্যাপ্লিকেশন অবজেক্ট ( ভেরিয়েবল এবং ফাংশন এপ্লিকেশন এর স্বত্ত্বাধিকারী (Owner))।

$http একটি XMLHttpRequest অবজেক্ট এক্সটার্নাল ডাটা রিকুয়েস্ট এর জন্য।

$ http.get() স্ট্যাটিক JSON ডাটা করে http://www.justetc.com/website/Customers_JSON.php থেকে।

যদি সফল হয় (success), কন্ট্রোলার (names) প্রোপার্টি ক্রিয়েট করে স্কোপ এর মধ্যে, সার্ভার থেকে JSON ডাটা এর সাথে।
নোট: উপরের উল্লেখ্য কোড একটি ডাটাবেস থেকে তথ্য সংগ্রহ করার জন্যও ব্যবহার করা যেতে পারে.

AngularJS will invoke customersController with a $scope and $http object.

$scope is the application object (the owner of application variables and functions).

$http is an XMLHttpRequest object for requesting external data.

$http.get() reads static JSON data from http://www.justetc.com/website/Customers_JSON.php.

If success, the controller creates a property (names) in the scope, with JSON data from the server.

Note The code above can also be used to fetch data from a database.

AngularJS - 001, Complete Courses, Professional, Root

অ্যাঙ্গুলার জেএস (AngularJS) ইভেন্টস

January 29, 2015 Author-Check- Article-or-Video

অ্যাঙ্গুলার জেএস (AngularJS) ইভেন্টস
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)

AngularJS এর নিজস্ব এইচটিএমএল ইভেন্টস্ নির্দেশনা (directives) আছে.

ng-click ডিরেক্টিভ

ng-click ডিরেক্টিভ একটি AngularJS ক্লিক ইভেন্টকে সংজ্ঞায়িত করে.

AngularJS উদাহরণ:
<div ng-app="" ng-controller="myController">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>

HTML এর এলিমেন্ট হাইড (অদৃশ্য) করা

ng-hide ডিরেক্টিভ ব্যবহার করা যেতে পারে এপ্লিকেশন এর কোন একটি অংশের দৃশ্যমানতা নির্ধারণের জন্য।
ng-hide="true" ভ্যালু একটি HTML এলিমেন্টকে অদৃশ্য করে।
ng-hide="false" ভ্যালু একটি HTML এলিমেন্টকে দৃশ্যমান করে।

AngularJS উদাহরণ:
<div ng-app="" ng-controller="personController">

<button ng-click="toggle()">Toggle</button>

myVar">
First Name: <input type="text" ng-model="firstName">

Last Name: <input type="text" ng-model="lastName">

<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

উপরোক্ত এপ্লিকেশন ব্যাখ্যা:

PersonController এর ব্যবহার কন্ট্রোলার সম্পর্কে অধ্যায়ে আলোচনার অনুরুপ।

অ্যাপ্লিকেশনে একটি ডিফল্ট প্রোপার্টি (একটি ভেরিয়েবল) আছে: $scope.myVar = false;

ng-hide ডিরেক্টিভ <p> এলিমেন্ট সহ দুইটি ইনপুট ফিল্ড এর দৃশ্যমানতা নির্ধারণ করে, myVar এর (true or false) মান অনুযায়ী।

toggle() ফাংশন, myVar এর টগল করে true এবং false এর মধ্যে।
ng-hide="true" ভ্যালু একটি HTML এলিমেন্টকে অদৃশ্য করে।

HTML এলিমেন্টসমূহ দেখানো

ng-show ডিরেক্টিভ ও ব্যবহার করা যেতে পারে এপ্লিকেশন এর কোন একটি অংশের দৃশ্যমানতা নির্ধারণের জন্য।
ng-show ="false" ভ্যালু একটি HTML এলিমেন্টকে অদৃশ্য করে।
ng-show ="true" ভ্যালু একটি HTML এলিমেন্টকে দৃশ্যমান করে।
এখানে উপরের মতো একই উদাহরণ ng-hide এর পরিবর্তে ng-show ব্যবহার করে দেখানো হলো:

AngularJS উদাহরণ:
<div ng-app="" ng-controller="personController">

<button ng-click="toggle()">Toggle</button>

<p ng-show="myVar">
First Name: <input type="text" ng-model="firstName">

Last Name: <input type="text" ng-model="lastName">

<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

AngularJS - 001, Complete Courses, Professional, Root

AngularJS HTML DOM

January 28, 2015 Author-Check- Article-or-Video

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 - 001, Complete Courses, Professional, Root

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

January 27, 2015 Author-Check- Article-or-Video

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

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 উদাহরনঃ

<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 - 001, Complete Courses, Professional, Root

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

January 26, 2015 Author-Check- Article-or-Video

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

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

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

</div>

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

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

টেবিলের ডাটা সাজানোর জন্য 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 - 001, Complete Courses, Professional, Root

অ্যাঙ্গুলার জেএস (AngularJS) ফরম (Forms)

January 25, 2015 Author-Check- Article-or-Video

অ্যাঙ্গুলার জেএস (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>

উদাহরণের 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 কে ঠিক তখনই আহ্বান করবে কেবল যখন এটিতে ক্লিক করা হবে।

AngularJS - 001, Complete Courses, Professional, Root

কৌণিক বা Angular জাভা স্ক্রিপ্ট SQL

January 24, 2015 Author-Check- Article-or-Video

কৌণিক বা Angular জাভা স্ক্রিপ্ট SQL
Riaz-ul-haque Mian (CSE)
PHP সার্ভার এর Running MySQL ডাটা ফেচ করানো :
কৌণিক বা Angular জাভা স্ক্রিপ্ট SQL এর উদাহরণ :
<div ng-app="" ng-controller="customersController">

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

</div>

ASP.NET সার্ভার এর Running SQL ডাটা ফেচ করানো :

উদাহরণ :
<div ng-app="" ng-controller="customersController">

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

</div>

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "[") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"City":"' . $rs["City"] . '",';
$outp .= '"Country":"'. $rs["Country"] . '"}';
}
$outp .="]";

$conn->close();

echo($outp);
?>
2. PHP এবং মাইক্রোসফট এক্সেস ডাটাবেস ব্যবহার করে (উধারণ টি লক্ষ করুন)
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=ISO-8859-1");

$conn = new COM("ADODB.Connection");
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb");

$rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers");

$outp = "[";
while (!$rs->EOF) {
if ($outp != "[") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"City":"' . $rs["City"] . '",';
$outp .= '"Country":"'. $rs["Country"] . '"}';
$rs->MoveNext();
}
$outp .= "]";

$conn->close();

echo ($outp);
?>
3. ASP.NET , ভিজ্যুয়াল বেসিক এবং মাইক্রোসফট এক্সেস ডাটাবেস ব্যবহার করে (উধারণ টি লক্ষ করুন)
<%@ Import Namespace="System.IO"%>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb"%>
<%
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
Dim conn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
Dim outp
Dim c
conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable=objDataSet.Tables("myTable")

outp = "["
c = chr(34)
for each x in objTable.Rows
if outp <> "[" then outp = outp & ","
outp = outp & "{" & c & "Name" & c & ":" & c & x("CompanyName") & c & ","
outp = outp & c & "City" & c & ":" & c & x("City") & c & ","
outp = outp & c & "Country" & c & ":" & c & x("Country") & c & "}"
next

outp = outp & "]"
response.write(outp)
conn.close
%>

4. ASP.NET , ভিজ্যুয়াল বেসিক Razor এবং SQL Liteডাটাবেস ব্যবহার করে (উধারণ টি লক্ষ করুন)
@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName, City, Country FROM Customers");
var outp ="["
}
@foreach(var row in query)
{
if outp <> "[" then outp = outp + ","
outp = outp + "{" + c + "Name" + c + ":" + c + @row.CompanyName + c + ","
outp = outp + c + "City" + c + ":" + c + @row.City + c + ","
outp = outp + c + "Country" + c + ":" + c + @row.Country + c + "}"
}
outp = outp + "]"
@outp

AngularJS - 001, Complete Courses, Professional, Root

AngularJS Filters

January 23, 2015 Author-Check- Article-or-Video

AngularJS Filters
মৃত্যুঞ্জয় বিশ্বাস

pipe character দ্বারা ফিল্টারের Expressions ও নির্দেশ যুক্ত করা হয় ।
AngularJS Filters
AngularJS filters ব্যবহৃত হয় data transfers করতে ।

ফিল্টার বর্ণনা
Currency একটি number কে currency format এ বিন্যাস করে ।
Filter একটি array থেকে আইটেম এর একটি উপসেট নির্বাচন করে ।
Lowercase একটি string কে lower case এ বিন্যাস করে ।
orderBy expression দ্বারা একটি array কে order করা হয় ।
uppercase একটি string কে uppercase এ বিন্যাস করে

Expressions এ Filters যোগ করার পদ্ধতি
pipe character (|) এবং filter দ্বারা একটি Expressions যোগ করা যাবে ।
পরবর্তী দুটি উদাহরণের জন্য আমরা আগের অধ্যায়ের person controller ব্যবহার
করব ।
uppercase filter format string করে upper case:

AngularJS উদাহরনঃ
<div ng-app="" ng-controller="personController">

The name is {{ lastName | uppercase }}

</div>
» এটা নিজে চেষ্টা করুন ।

lowercase filter format string করে lower case:

AngularJS উদাহরনঃ
<div ng-app="" ng-controller="personController">

The name is {{ lastName | lowercase }}

</div>
» এটা নিজে চেষ্টা করুন ।
currency Filter
currency filter একটি number কে currency format এ বিন্যাস করে ।
AngularJS উদাহরনঃ
<div ng-app="" ng-controller="costController">

<p>Total = {{ (quantity * price) | currency }}</p>

</div>
» এটা নিজে চেষ্টা করুন ।

Directive এ Filter যোগ করা
pipe character (|) দ্বারা ফিল্টারে directive যোগ করা যায় ।
orderBy filter একটি array কে নির্দেশ করে expression দ্বারাঃ
AngularJS উদাহরনঃ

<ul>
orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>

<div>
» এটা নিজে চেষ্টা করুন ।

Filtering Input (Input কে ফিল্টার করা )
একটি input filter একটি directive এ যুক্ত হতে পারে pipe character (|) এবং filter এর সাথে , একটি colon একটি model name এর পরে ।
AngularJS উদাহরনঃ

<ul>
orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>

</div>
» এটা নিজে চেষ্টা করুন ।

AngularJS - 001, Complete Courses, Professional

অ্যাঙ্গুলার জেএস এক্সপ্রেশন (AngularJS Expressions in Bangla)

January 22, 2015 Author-Check- Article-or-Video

অ্যাঙ্গুলার জেএস (AngularJS) এক্সপ্রেশন (Expressions)

Article By: Protap Chandra

AngularJS Expressions ব্যবহার করে HTML এর সঙ্গে ডাটা আবদ্ধ (bind) করা হয়।

AngularJS expression দ্বিতীয় বন্ধনীর ভেতর লেখা হয়: {{ expression }}.

expression HTML এর সঙ্গে ng-bind directive এর মতো একই ভাবে ডাটা আবদ্ধ করে।

ঠিক যেখানে expression লেখা হবে সেখানেই AngularJS আউটপুট প্রদান করবে।

AngularJS expression এর সঙ্গে JavaScript expression এর মিল পাওয়া যায়: এরা literals, operators এবং variables ধারণ করতে পারে।

যেমন: {{ 5 + 5 }} or {{ firstName + " " + lastName }}

AngularJS Expressions এর উদাহরণ:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

ফলাফল :

My first expression: 10

আপনি যদি ng-app directive অপসারণ করেন, তাহলে HTML এখানকার expression কে হুবহু প্রদর্শন করবে। যুক্তিটির সমাধান করবে না।

ng-app directive ছাড়া AngularJS উদাহরণ:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div>
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

ng-app directive ব্যবহার না করায় এই উদাহরণের ‌‌আউপুট আসবে: My first expression: {{ 5 + 5 }}

AngularJS Numbers

AngularJS number ঠিক JavaScript number এর মতোই।

উদাহরণ:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

এই উদাহরণের আউটপুট আসবে :

Total in dollar: 5

ng-bind ব্যবহার করে একে ভিন্নভাবে লেখা যায়:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

AngularJS Strings

AngularJS string ঠিক JavaScript string এর মতোই

উদাহরণ:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

এই উদাহরণের আউটপুট আসবে:

The name is: John Doe

ng-bind ব্যবহার করে উদারহণটি এভাবে লেখা যায়:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

এখানেও একই আউটপুট আসবে।

AngularJS Objects

AngularJS objects ঠিক JavaScript object এর মতো

উদাহরণ:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>নাম হল: {{ person.lastName }}</p>

</div>

এই উদাহরণের আউটপুট আসবে:

নাম হল: Doe

ng-bind ব্যবহার করে উদারহরণটি এভাবে লেখা যায়:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>নাম হল: <span ng-bind="person.lastName"></span></p>

</div>

এখানেও একই আউটপুট আসবে।

AngularJS Arrays

AngularJS array ঠিক JavaScript array এর মতো।

উদাহরণ:

<p>তৃতীয় অবস্থানে আছে: {{ points[2] }}</p>

</div>

উদাহরণে আউটপুট আসবে:

তৃতীয় অবস্থানে আছে 19.

ng-bind ব্যবহার করে উদাহরণটি এভাবে লেখা যায়:

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>তৃতীয় অবস্থানে আছে <span ng-bind="points[2]"></span></p>

</div>

আশা করি খুব সহজে আপনারা অ্যাঙ্গুলার জেএস (AngularJS) এক্সপ্রেশন (Expressions) শিখতে পেরেছেন।

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

AngularJS - 001, Complete Courses, Professional

AngularJS পরিচিতি (AngularJS Introduction in Bangla)

January 19, 2015 Author-Check- Article-or-Video

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

AngularJS একটি JavaScript এর framework । এটি HTML পেজের সাথে <script> tag এর মাধ্যমে যোগ করা হয়।

AngularJS এইচটিএমএল এট্রিবিউট এর নির্দেশনা (Directive) অনুসারে প্রসারিত করে এবং HTML এর Expression এর সাথে তথ্য মিশ্রিত করে ।

AngularJS একটি JavaScript Framework

AngularJS একটি JavaScript Framework । এটা JavaScript দিয়ে লেখা একটি লাইব্রেরি ।
AngularJS একটি JavaScript ফাইল হিসাবে ব্যবহার করা হয় এবং একটি script tag দিয়ে একটি ওয়েব পেজে যোগ করা হয়

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

AngularJS, HTML কে প্রসারিত করে

AngularJS, HTML কে ng-directives দ্বারা প্রসারিত করে ।

ng-app directive, AngularJS আপ্লিকেশনকে সঙ্গায়িত করে ।

ng-model directive, HTML কন্ট্রোলের (input, select, textarea) তথ্য সংযুক্ত করে ।

ng-bind directive তথ্য সংযুক্ত করে HTML view এর মাধ্যমে ।

উদাহরণঃ

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

ফলাফল : AngularJS উদাহরণ

উদাহরনের ব্যাখ্যঃ

ওয়েব পেজ লোড হওয়া শেষ হলে AngularJS সয়ংক্রিয়ভাবে লোড হয়।

ng-app directive, AngularJS কে বলে যে <div> উপাদান হচ্ছে AngularJS application এর “মালিক” ।

ng-model directive, input field এ প্রদত্ত মান অ্যাপ্লিকেশন এর name ভেরিয়েবল এ যোগ করে ।

ng-bind directive, <p> এর ভিতরের innerHTML কে application এর name এর সাথে বেধে দেয়।

AngularJS Directives ( নির্দেশনা )

আপনি ইতোমধ্যে দেখেছেন যে AngularJS Directives (নির্দেশনাগুলি ) একটি html এট্রিবিউট, যা ng prefix দ্বারা আরোপিত ।

ng-init directive, AngularJS এর application ভ্যারিয়েবল দ্বারা শুরু হয় ।

উদাহরনঃ

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

ফলাফল :

The name is John

যদি আপনি আপনার পেজ html এর জন্য বৈধ করতে চান তাহলে আপনি ng- এর পরিবর্তে data-ng- ব্যাবহার করতে পারেন,
উদাহরনঃ

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

আপনি পরবর্তীতে directives সম্পর্কে আরও অনেক কিছু শিখতে পারবেন।

AngularJS Expressions (প্রকাশ )

AngularJS expressions লেখা হয় double braces এর ভিতরে : {{ expression }}

AngularJS expressions একই ভাবে তথ্য সংযুক্ত করে, ঠিক যেভাবে ng-bind directive করে ।

AngularJS সেখানেই "output” ডাটা প্রদর্শন করবে ঠিক যেখানে expression লেখা হবে।

উদাহরনঃ

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

ফলাফল :

My first expression: 10

আপনি এই টিউটোরিয়ালে expressions সম্পর্কে আরও অনেক কিছু জানতে পারবেন।

AngularJS Controllers (কনট্রোলারসমুহ)

AngularJS application গুলো controller দ্বারা পরিচালিত হয়ে থাকে ।

ng-controller directive controllers কে নিরধারিত ( নির্দেশিত ) করে ।

controller code কাজ করবে যখন page লোড হবে ।

উদাহরনঃ

<div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="firstName"><br>
 Last Name: <input type="text" ng-model="lastName"><br>
 <br>
 Full Name: {{firstName + " " + lastName}}

</div>

<script>
 function personController($scope) {
 $scope.firstName = "John";
 $scope.lastName = "Doe";
 }
 </script>

AngularJS - 001, Complete Courses, Professional

AngularJS টিউটোরিয়াল (AngularJS Tutorial in Bangla)

January 19, 2015 Author-Check- Article-or-Video

মৃত্যুঞ্জয় বিশ্বাস

AngularJS, HTML কে নতুন এট্রিবিউট দ্বারা বৃস্তৃত করে।

AngularJS, SPA (Single Page Applications) এর জন্য উত্তম ।

AngularJS শেখা সহজ ।

এই টিউটোরিয়ালটিতে যা রয়েছে

এই টিউটোরিয়ালটি এমনভাবে ডিজাইন করা হয়েছে যাতে আপনি অতি দ্রুত ও দক্ষতার সাথে AngularJS শিখতে পারেন ।

প্রথমে আপনি AngularJS এর সকল মূল বিষয়গুলো শিখবেন, যেমনঃ directives, expressions, templates, এবং data binding।

এবং এরপর AngularJS সম্পর্কে যা জানা দরকার, তার সবই শিখবেন, যেমনঃ

Controllers, Modules, Events, DOM, Forms, Input, Validation, Http এবং আরও অনেক কিছু।

প্রতিটি অধ্যায়ে উদাহরণগুলো নিজে নিজে চেষ্টা করুন

প্রতিটি উদাহরণ নিজে নিজে চেষ্টা করে দেখুন:

যেমন -

<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>

<div ng-app="">
  <p>Name : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

ফলাফল : AngularJS উদাহরণ

আপনার কি কি জানা থাকতে হবে

AngularJS শিখার আগে আপনার যেগুলো সম্পর্কে ধারনা থাকতে হবেঃ

HTML
CSS
JavaScript

AngularJS এর ইতিহাস

AngularJS বেশ নতুন। ভার্সন ১.০ রিলিজ হয়েছে ২০১২ সালে ।

Miško Hevery, google এর একজন কর্মকর্তা ২০০৯ সালে AngularJS নিয়ে কাজ শুরু করেন। Idea টা খুবই কার্যকর হয়, এবং এখন এই project টি officially Google development team দ্বারা সাহায্যপ্রাপ্ত হয়।

অ্যাঙ্গুলার জেএস (AngularJS) এবং টুইটার বুটস্ট্র্যাপ

Angular.JS বিষয় : সম্পর্কিত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক স্টাফ

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

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

অ্যাঙ্গুলার জেএস (AngularJS) এক্সপ্রেশন (Expressions)

AngularJS Numbers

AngularJS Strings

AngularJS Objects

AngularJS Arrays

AngularJS একটি JavaScript Framework

উদাহরনের ব্যাখ্যঃ

AngularJS Directives ( নির্দেশনা )

AngularJS Expressions (প্রকাশ )

AngularJS Controllers (কনট্রোলারসমুহ)

এই টিউটোরিয়ালটিতে যা রয়েছে

প্রতিটি অধ্যায়ে উদাহরণগুলো নিজে নিজে চেষ্টা করুন

আপনার কি কি জানা থাকতে হবে

AngularJS এর ইতিহাস

Machine Learning, Big Data, Data Science, Analytics, Cloud, Security, AI, Robotics, Database, BI, Development: Software, Web, Mobile