AngularJS এর ভূমিকা
AngularJS হল একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক।
এটি একটি <script> ট্যাগ সহ একটি HTML পৃষ্ঠায় যোগ করা যেতে পারে।
AngularJS নির্দেশাবলী সহ HTML বৈশিষ্ট্যগুলিকে প্রসারিত করে এবং এক্সপ্রেশন সহ HTML এর সাথে ডেটা আবদ্ধ করে।
টিপ:
AngularJS হল জাভাস্ক্রিপ্টে লেখা একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক।
AngularJS হল একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক
AngularJS একটি জাভাস্ক্রিপ্ট ফাইল হিসাবে বিতরণ করা হয়, এবং একটি স্ক্রিপ্ট ট্যাগ সহ একটি ওয়েব পৃষ্ঠায় অন্তর্ভুক্ত করা যেতে পারে:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>AngularJS HTML প্রসারিত করে
AngularJS ng-নির্দেশ সহ HTML প্রসারিত করে।
- ng-appনির্দেশিকা একটি AngularJS অ্যাপ্লিকেশন সংজ্ঞায়িত করে।
- ng-modelনির্দেশিকা এইচটিএমএল নিয়ন্ত্রণের মান (ইনপুট, নির্বাচন, টেক্সটেরিয়া) অ্যাপ্লিকেশন ডেটার সাথে আবদ্ধ করে।
- ng-bindনির্দেশিকা অ্যাপ্লিকেশন ডেটাকে HTML ভিউতে আবদ্ধ করে।
AngularJS উদাহরণ
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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 স্বয়ংক্রিয়ভাবে শুরু হয়।
ng-appনির্দেশিকা AngularJS কে বলে যে <div> উপাদানটি একটি AngularJS অ্যাপ্লিকেশনের "মালিক"।
ng-modelনির্দেশিকা ইনপুট ক্ষেত্রের মানকে অ্যাপ্লিকেশন পরিবর্তনশীল নামের সাথে আবদ্ধ করে।
ng-bindনির্দেশিকা <p> উপাদানের বিষয়বস্তুকে অ্যাপ্লিকেশন পরিবর্তনশীল নামের সাথে আবদ্ধ করে।
AngularJS Directives
ইতিমধ্যেই দেখা গেছে, AngularJS নির্দেশাবলী হল ng এর সাথে উপসর্গযুক্ত HTML বৈশিষ্ট্য।
ng-initনির্দেশিকা AngularJS অ্যাপ্লিকেশন ভেরিয়েবল শুরু করে।
AngularJS উদাহরণ
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>বৈধ HTML সহ বিকল্প উপায়:
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>আপনি যদি আপনার পৃষ্ঠা HTML বৈধ করতে চান, আপনি ng এর পরিবর্তে data-ng ব্যবহার করতে পারেন।
দ্রষ্টব্য:
আপনি এই টিউটোরিয়ালে পরে নির্দেশাবলী সম্পর্কে আরও শিখবেন।
AngularJS Expressions
AngularJS এক্সপ্রেশনগুলি ডবল বন্ধনীতে লেখা হয়: {{ expression }}।
একটি AngularJS অভিব্যক্তি যেখানে লেখা আছে সেখানে ডেটা "প্রকাশ" করবে:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>অ্যাঙ্গুলারজেএস এক্সপ্রেশনগুলি অ্যাঙ্গুলারজেএস ডেটাকে এইচটিএমএল-এ আবদ্ধ করে, এনজি-বাইন্ড নির্দেশের মতো।
AngularJS উদাহরণ
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>শেখা:
আপনি এই টিউটোরিয়ালে পরে অভিব্যক্তি সম্পর্কে আরও শিখবেন।
AngularJS Applications
AngularJS মডিউল AngularJS অ্যাপ্লিকেশন সংজ্ঞায়িত করে।
AngularJS কন্ট্রোলার AngularJS অ্যাপ্লিকেশন নিয়ন্ত্রণ করে।
ng-appনির্দেশিকা অ্যাপ্লিকেশন সংজ্ঞায়িত করে,ng-controllerনির্দেশিকা নিয়ামককে সংজ্ঞায়িত করে।
AngularJS উদাহরণ
<div ng-app="myApp" ng-controller="myCtrl">
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>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>AngularJS Module
var app = angular.module('myApp', []);AngularJS Controller
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});অগ্রগতি:
পরে এই টিউটোরিয়ালে আপনি মডিউল এবং কন্ট্রোলার সম্পর্কে আরও শিখবেন।