জয়েন লগইন

অ্যাঙ্গুলারজেএস আরো

🌈অ্যাঙ্গুলারজেএস আরো কি?

📋অ্যাঙ্গুলারজেএস আরো হলো অতিরিক্ত ফিচার ব্যবহার করার পদ্ধতি।

⚒️অ্যাঙ্গুলারজেএস আরো অতিরিক্ত ফিচার ব্যবহার করতে ব্যবহৃত হয়।

অ্যাঙ্গুলারজেএস আরো সমূহ

অ্যাঙ্গুলারজেএস আরো এবং সেগুলোর ব্যবহারের তালিকা

  • ➡️ 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 অ্যানিমেশন পরিচালনা করতে ব্যবহৃত হয়।