অ্যাঙ্গুলারজেএস আরো
🌈অ্যাঙ্গুলারজেএস আরো কি?
📋অ্যাঙ্গুলারজেএস আরো হলো অতিরিক্ত ফিচার ব্যবহার করার পদ্ধতি।
⚒️অ্যাঙ্গুলারজেএস আরো অতিরিক্ত ফিচার ব্যবহার করতে ব্যবহৃত হয়।
অ্যাঙ্গুলারজেএস আরো সমূহ
অ্যাঙ্গুলারজেএস আরো এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ ngRoute - অ্যাপ্লিকেশনের রুট পরিচালনা করা
- ➡️ ng-hide - এলিমেন্ট হিডেন করা
- ➡️ ngAnimate - অ্যানিমেশন পরিচালনা করা
ngRoute - অ্যাপ্লিকেশনের রুট পরিচালনা করার উদাহরণ।
angularjs
<!DOCTYPE html>
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular-route.min.js"></script>
<body>
<a href="/html/tutorial/home">এইচটিএমএল</a>
<a href="/css/tutorial/home">সিএসএস</a>
<a href="/javascript/tutorial/home">জাভাস্ক্রিপ্ট</a>
<div ng-view></div>
<script>
angular.module("app", ["ngRoute"])
.config(function($routeProvider) {
$routeProvider
.when("/html/tutorial/home", {
template: "<h1>এইচটিএমএল</h1>"
})
.when("/css/tutorial/home", {
template: "<h1>সিএসএস</h1>"
})
.when("/javascript/tutorial/home", {
template: "<h1>জাভাস্ক্রিপ্ট</h1>"
});
})
.controller("app", function($scope) {
$scope.message = "প্রোগ্রামিং শিখুন";
});
</script>
</body>
</html>
ng-hide - এলিমেন্ট হিডেন করার উদাহরণ।
angularjs
<!DOCTYPE html>
<html ng-app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<body>
<button ng-click="hide = !hide">হাইড</button>
<div ng-hide="hide">
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
ngAnimate - অ্যানিমেশন পরিচালনা করার উদাহরণ।
angularjs
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular-animate.js"></script>
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<body ng-app="ngAnimate">
<button ng-click="execute = !execute">অ্যানিমেশন</button>
<div ng-hide="execute">
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
অ্যাঙ্গুলারজেএস আরো সম্পর্কিত বিস্তারিত তথ্য
কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক
| নাম | বিবরণ |
|---|---|
| ngRoute | অ্যাপ্লিকেশনের রুট পরিচালনা করতে ব্যবহৃত হয়। |
| ng-hide | এলিমেন্ট হিডেন করতে ব্যবহৃত হয়। |
| ngAnimate | অ্যানিমেশন পরিচালনা করতে ব্যবহৃত হয়। |