AngularJS সমীক্ষা
- পূর্ববর্তী পৃষ্ঠা AngularJS শিক্ষাক্রম
- পরবর্তী পৃষ্ঠা AngularJS এক্সপ্রেশন
অ্যাংগুলারজস একটি জেভাস্ক্রিপ্ট ফ্রেমওয়ার্কএটা একটি <script> ট্যাগ দ্বারা HTML পৃষ্ঠায় যুক্ত করা যেতে পারে。
অ্যাংগুলারজসইনডিকেশনএক্সটেন্ড করে HTML এটারিবিউট এবংএক্সপ্রেশনডাটা অডিংকিং করে HTML
অ্যাংগুলারজস একটি JavaScript ফ্রেমওয়ার্ক
অ্যাংগুলারজস JavaScript-এর দ্বারা লেখা JavaScript ফ্রেমওয়ার্ক
অ্যাংগুলারজস JavaScript ফাইলের রূপে বন্টন করা হয় এবং HTML-তে script ট্যাগ দ্বারা যুক্ত করা যেতে পারে:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
অ্যাংগুলারজস HTML-কে এক্সটেন্ড করে
অ্যাংগুলারজস ব্যবহার করে ng-ইনডিকেশনএক্সটেন্ড করে HTML
ng-app ইনডিকেশনটি একটি অ্যাংগুলারজস অ্যাপলিকেশন নির্বাচন করে
ng-model ইনডিকেশনটি HTML কন্ট্রোল (input, select, textarea) র মানকে অ্যাপলিকেশন ডাটা অডিংকিং করে
ng-bind ইনডিকেশনটি অ্যাপলিকেশন ডাটা অডিংকিং করে HTML ভিউ
AngularJS ইনস্ট্যান্স
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>নাম: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
উদাহরণ ব্যাখ্যা:
ওয়েবসাইট লোড হওয়ার পর, অ্যাংগুলারজস স্বয়ংক্রিয়ভাবে চালু হয়
ng-app ইনডিকেশনটি অ্যাংগুলারজসের কাছে জানায় যে <div> এলিমেন্টটি অ্যাংগুলারজস অ্যাপলিকেশনর মালিক
ng-model ইনপুট ফিল্ডের মানকে অ্যাপলিকেশন ভেকটরে বাঁধার জন্য নির্দেশ name。
ng-bind ইনজেকশন পিএইচ ইলেমেন্টের অবস্থানকে অ্যাপ্লিকেশন ভ্যারিয়েবলে বাঁধে name。
AngularJS ইনস্ট্রাকশন
এমনকি আপনি দেখতে পাবেন যে ng প্রিফিক্স হল এহত্তরবান্ধব HTML প্রতিমান
ng-init ইনজেকশন এঞ্জুয়ারল এস এস এস অ্যাপ্লিকেশন ভ্যারিয়েবল ইনিশালাইজ করে
AngularJS ইনস্ট্যান্স
<div ng-app="" ng-init="firstName='Bill'"> <p>নাম: <span ng-bind="firstName"></span></p> </div>
বা কার্যকরী এহত্তরবান্ধব HTML-এ ব্যবহার করে
AngularJS ইনস্ট্যান্স
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>নাম: <span data-ng-bind="firstName"></span></p> </div>
যদি আপনি পাতার HTML-কে কার্যকরী করতে চান data-ng- বদলে ng-。
এই টিউটোরিয়ালের পরের অংশে আপনি ইনজেকশনের বিষয়ে আরও তথ্য পাবেন
AngularJS এক্সপ্রেশন
এঞ্জুয়ারল এস এস এস এক্সপ্রেশন দুই বড় বক্তৃপত্রে লেখা হয়{{ expression }}。
এঞ্জুয়ারল এস এস এস এক্সপ্রেশন এক্সপ্রেশনের অবস্থানে 'আউটপুট' করবে
AngularJS ইনস্ট্যান্স
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>আমার প্রথম এক্সপ্রেশন: {{ 5 + 5 }}</p>
</div>
</body>
</html>
এঞ্জুয়ারল এস এস এস এক্সপ্রেশন এহত্তরবান্ধব এস এস এস ডাটা এক্সপ্রেশনকে HTML-এ বাঁধে ng-bind ইনজেকশনের পদ্ধতি একই
AngularJS ইনস্ট্যান্স
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>নাম: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
এই টিউটোরিয়ালের পরে আপনি এক্সপ্রেশনের বিষয়ে আরও তথ্য পাবেন
AngularJS অ্যাপ্লিকেশন
এঞ্জুয়ারল এস এস এস মডিউলএঞ্জুয়ারল এস এস এস অ্যাপ্লিকেশন নির্বাচন করে
এঞ্জুয়ারল এস এস এস কন্ট্রোলারএঞ্জুয়ারল এস এস এস অ্যাপ্লিকেশন নিয়ন্ত্রণ করে
ng-app ইনজেকশন একটি অ্যাপ্লিকেশন নির্বাচন করেng-controller ইনজেকশন কন্ট্রোলার নির্বাচন করে
AngularJS ইনস্ট্যান্স
<div ng-app="myApp" ng-controller="myCtrl">
নাম: <input type="text" ng-model="firstName"><br>
পরিবার নাম: <input type="text" ng-model="lastName"><br>
<br>
পূর্ণ নাম: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
</script>
AngularJS মডিউল অ্যাপ্লিকেশন নির্মাণ করে:
AngularJS মডিউল
var app = angular.module('myApp', []);
AngularJS কন্ট্রোলার অ্যাপ্লিকেশন নিয়ন্ত্রণ করে:
AngularJS কন্ট্রোলার
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
এই শিক্ষাক্রমের শেষে আপনি মডিউল ও কন্ট্রোলার সম্পর্কে আরও বেশি তথ্য জানবেন
- পূর্ববর্তী পৃষ্ঠা AngularJS শিক্ষাক্রম
- পরবর্তী পৃষ্ঠা AngularJS এক্সপ্রেশন
