পারিজাত বিশ্বাস
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, HTML কে নতুন এট্রিবিউট দ্বারা বৃস্তৃত করে।