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

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

  <div ng-controller="app">
    <h1>{{head}}</h1>
    <p>{{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>

  <h1>{{title}}</h1>

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

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

</body>
</html>

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

  <div ng-controller="app">
    <p>{{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) {
        var data = $scope.$new();

        data.message = "হ্যালো বিশ্ব";

        document.write(data.message);
        data.$destroy();
      });
  </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 = "আরিফ";

        $scope.$watch("name", function(n, o) {
          console.log(n, o);
        });
      });
  </script>

</body>
</html>

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

  <div ng-controller="app">
    <input ng-model="name">
    <input ng-model="land">
    <p>{{name}} {{land}}</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 = "আরিফ";
        $scope.land = "বাংলাদেশ";

        $scope.$watchGroup(
          ["name", "land"],
          function(n, o) {
            console.log(n);
          }
        );
      });
  </script>

</body>
</html>

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

  <div ng-controller="app">
    <button ng-click="items.push('আম')">যোগ</button>
    <p>{{items}}</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.items = ["আপেল", "আঙ্গুর", "কমলা", "কলা"];

        $scope.$watchCollection("items", function(n, o) {
          console.log(n);
        });
      });
  </script>

</body>
</html>

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

  <div ng-controller="app">
    <p>{{count}}</p>
    <button ng-click="increase()">বৃদ্ধি</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.count = 0;

        $scope.increase = function() {
          $scope.count++;
          $scope.$digest();
        };
      });
  </script>

</body>
</html>

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

  <div ng-controller="app">
    <p>{{message}}</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.message = "হ্যালো";

        $scope.change = function() {
          setTimeout(function() {
            $scope.$apply(function() {
              $scope.message = "আপডেট";
            });
          }, 500);
        };
      });
  </script>

</body>
</html>

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

  <div ng-controller="app">
    <p>{{message}}</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.message = "হ্যালো";

        $scope.change = function() {
          $scope.$applyAsync(function() {
            $scope.message = "আপডেট";
          });
        };
      });
  </script>

</body>
</html>

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

  <div ng-controller="app">
    <p>{{name}}</p>
    <button ng-click="show()">শো</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.name = "আরিফ";

        $scope.show = function() {
          var result = $scope.$eval("name");
          alert(result);
        };
      });
  </script>

</body>
</html>

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

  <div ng-controller="app">
    <p>{{message}}</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.message = "হ্যালো";

        $scope.change = function() {
          $scope.$evalAsync(function() {
            $scope.message = "আপডেট";
          });
        };
      });
  </script>

</body>
</html>

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

  <div ng-controller="app">
    <button ng-click="send()">সেন্ড</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.$on("message", function(event, data) {
          console.log(data);
        });

        $scope.send = function() {
          $scope.$emit("message", "হ্যালো");
        };
      });
  </script>

</body>
</html>

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

  <div ng-controller="app">
    <button ng-click="send()">সেন্ড</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.$on("message", function(event, data) {
          alert(data);
        });

        $scope.send = function() {
          $scope.$emit("message", "হ্যালো");
        };
      });
  </script>

</body>
</html>

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

  <div ng-controller="app">
    <button ng-click="send()">সেন্ড</button>
    <div ng-controller="child">
      <p>{{message}}</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.send = function() {
          $scope.$broadcast("message", "হ্যালো");
        };
      })

      .controller("child", function($scope) {
        $scope.$on("message", function(event, data) {
          $scope.message = data;
        });
      });
  </script>

</body>
</html>

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

  <div ng-controller="app">
    <p>{{message}}</p>
    <button ng-click="remove()"></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.message = "স্কোপ সক্রিয় রয়েছে";

        $scope.$on("$destroy", function() {
          console.log("Scope destroyed");
        });

        $scope.remove = function() {
          $scope.$destroy();
        };
      });
  </script>

</body>
</html>