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

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <p ng-bind-template="{{head}}, {{desc}}"></p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.head = "প্রোগ্রামিং শিখুন";
        $scope.desc = "প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন";
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <p ng-bind-template="{{head}}, {{desc}}"></p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.head = "প্রোগ্রামিং শিখুন";
        $scope.desc = "প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন";
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <p ng-bind="message"></p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.message = "প্রোগ্রামিং শিখুন";
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <input ng-model="name">
    <p>{{name}}</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.name = "আরিফ";
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app>
<body>

  <div ng-init="name='আরিফ'; land='বাংলাদেশ'">
    <p>{{name}}</p>
    <p>{{land}}</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <h1>{{title}}</h1>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.title = "প্রোগ্রামিং শিখুন";
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <ul ng-controller="app">
    <li ng-repeat="fruit in fruits">{{fruit}}</li>
  </ul>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.fruits = ["আপেল", "আঙ্গুর", "কমলা", "কলা"];
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <button ng-click="show = !show">টুগল</button>
    <p ng-if="show">প্রোগ্রামিং শিখুন</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.show = true;
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <button ng-click="visible = !visible">টুগল</button>
    <p ng-show="visible">প্রোগ্রামিং শিখুন</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.visible = true;
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <button ng-click="hidden = !hidden">টুগল</button>
    <p ng-hide="hidden">প্রোগ্রামিং শিখুন</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.hidden = false;
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <button ng-click="value = 'html'">এইচটিএমএল</button>
    <button ng-click="value = 'css'">সিএসএস</button>

    <div ng-switch="value">
      <p ng-switch-when="html">এইচটিএমএল</p>
      <p ng-switch-when="css">সিএসএস</p>
      <p ng-switch-default>ডিফল্ট</p>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.value = "one";
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <div ng-include="'message.html'"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.message = "প্রোগ্রামিং শিখুন";
      });
  </script>

  <script type="text/ng-template" id="message.html">
    <p>{{message}}</p>
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<head>
  <style>
    .active {
      color: green;
    }
  </style>
</head>
<body>

  <div ng-controller="app">
    <p ng-class="{active: isActive}">প্রোগ্রামিং শিখুন</p>
    <button ng-click="isActive = !isActive">টুগল</button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.isActive = false;
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <ul ng-controller="app">
    <li ng-repeat="item in items" ng-class-even="'even'">
      {{item}}
    </li>
  </ul>

  <style>
    .even {
      background: #eee;
    }
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.items = ["আপেল", "আঙ্গুর", "কমলা", "কলা"];
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <ul ng-controller="app">
    <li ng-repeat="item in items" ng-class-odd="'odd'">
      {{item}}
    </li>
  </ul>

  <style>
    .odd {
      background: #eee;
    }
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.items = ["আপেল", "আঙ্গুর", "কমলা", "কলা"];
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <p ng-style="style">প্রোগ্রামিং শিখুন</p>
    <button ng-click="change()">পরিবর্তন</button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.style = {
          color: "blue",
          fontSize: "24px"
        };

        $scope.change = function() {
          $scope.style.color = "red";
        };
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <input type="text" ng-value="name">
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.name = "আরিফ";
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <label>
      <input type="checkbox" ng-checked="checked">
      
    </label>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.checked = true;
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <label>
      <input type="checkbox" ng-model="disabled">
      ডিজেবল
    </label>

    <button ng-disabled="disabled">সাবমিট</button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.disabled = false;
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <label>
      <input type="checkbox" ng-model="readonly">
      
    </label>

    <input type="text" ng-model="name" ng-readonly="readonly">
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.name = "আরিফ";
        $scope.readonly = false;
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <div ng-controller="app">
    <select>
      <option>বাংলাদেশ</option>
      <option ng-selected="selected">ভারত</option>
    </select>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.selected = true;
      });
  </script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<body>

  <form ng-controller="app" ng-submit="submit()">
    <input ng-model="name">
    <button type="submit">সাবমিট</button>
    <p>{{message}}</p>
  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script>
    angular.module("app", [])
      .controller("app", function($scope) {
        $scope.name = "আরিফ";

        $scope.submit = function() {
          $scope.message = "Hello " + $scope.name;
        };
      });
  </script>

</body>
</html>