Angular JS Tutorial

AngularJS Controllers

ЁЯУМ Controller рдХреНрдпрд╛ рд╣реЛрддрд╛ рд╣реИ?

AngularJS рдореЗрдВ Controller рдПрдХ JavaScript function рд╣реЛрддрд╛ рд╣реИ рдЬреЛ рдЖрдкрдХреЗ Model (data) рдФрд░ View (UI) рдХреЗ рдмреАрдЪ рдХреА logic рдХреЛ рд╕рдВрднрд╛рд▓рддрд╛ рд╣реИред

рдЖрд╕рд╛рди рднрд╛рд╖рд╛ рдореЗрдВ: Controller рдЖрдкрдХреЗ App рдХрд╛ “рджрд┐рдорд╛рдЧрд╝” рд╣реЛрддрд╛ рд╣реИ тАФ рдЬреЛ рддрдп рдХрд░рддрд╛ рд╣реИ рдХрд┐ рдХреНрдпрд╛ data рджрд┐рдЦреЗрдЧрд╛, рдХреИрд╕реЗ рджрд┐рдЦреЗрдЧрд╛, рдФрд░ рдХрдм рдмрджрд▓реЗрдЧрд╛ред


ЁЯТб Controller рдХрд╛ рдХрд╛рдо рдХреНрдпрд╛ рд╣реИ?

  • App рдХреЗ data рдХреЛ рд╕рдВрднрд╛рд▓рдирд╛
  • Functions (actions) define рдХрд░рдирд╛
  • UI рдФрд░ Model рдХреЛ connect рдХрд░рдирд╛
  • Logic рдХреЛ manage рдХрд░рдирд╛

тЬНя╕П Basic Syntax:

app.controller("myCtrl", function($scope) {
  // logic goes here
});
  • myCtrl тЖТ Controller рдХрд╛ рдирд╛рдо
  • $scope тЖТ рдПрдХ special object рд╣реИ рдЬреЛ View рдФрд░ Controller рдХреЛ рдЬреЛрдбрд╝рддрд╛ рд╣реИ

тЬЕ Basic Example:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
      $scope.name = "Amit";
    });
  </script>
</head>
<body ng-controller="myCtrl">

<h2>Hello, {{ name }}</h2>

</body>
</html>

ЁЯФН Output:

Hello, Amit


ЁЯФЧ Controller рдФрд░ Model рдХрд╛ рд░рд┐рд╢реНрддрд╛

  • Controller $scope object рдХреЗ рдЬрд╝рд░рд┐рдП variables рдмрдирд╛рддрд╛ рд╣реИ
  • View ({{ }} рдпрд╛ ng-model) рдЙрд╕ variable рдХреЛ use рдХрд░рддрд╛ рд╣реИ
  • рдЬреИрд╕реЗ рд╣реА variable рдмрджрд▓реЗрдЧрд╛, View рдЕрдкрдиреЗ рдЖрдк update рд╣реЛ рдЬрд╛рдПрдЧрд╛

тЪЩя╕П Example: Calculator Using Controller

<div ng-app="calcApp" ng-controller="calcCtrl">
  <input type="number" ng-model="a"> +
  <input type="number" ng-model="b"> =
  {{ a + b }}
</div>

<script>
  var app = angular.module("calcApp", []);
  app.controller("calcCtrl", function($scope) {
    $scope.a = 0;
    $scope.b = 0;
  });
</script>

ЁЯзк Function Add рдХрд░рдирд╛ Controller рдореЗрдВ

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="number" ng-model="num">
  <button ng-click="double()">Double</button>
  <p>Result: {{ result }}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.num = 0;
    $scope.result = 0;

    $scope.double = function() {
      $scope.result = $scope.num * 2;
    };
  });
</script>

рдЖрдк рдирдВрдмрд░ рдбрд╛рд▓реЗрдВрдЧреЗ рдФрд░ рдмрдЯрди рджрдмрд╛рдПрдБрдЧреЗ тАФ рд░рд┐рдЬрд╝рд▓реНрдЯ рдбрдмрд▓ рд╣реЛрдХрд░ рджрд┐рдЦреЗрдЧрд╛ред


ЁЯФД рдПрдХ App рдореЗрдВ Multiple Controllers

рдЖрдк рдЪрд╛рд╣реЗрдВ рддреЛ рдПрдХ рд╣реА AngularJS app рдореЗрдВ рдХрдИ controllers рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВ тАФ рдЬрд┐рд╕рд╕реЗ рд╣рд░ page рдпрд╛ section рдХрд╛ logic рдЕрд▓рдЧ-рдЕрд▓рдЧ handle рд╣реЛред

app.controller("headerCtrl", function($scope) {
  $scope.title = "My Website";
});

app.controller("footerCtrl", function($scope) {
  $scope.year = 2025;
});

тЪая╕П Controller рдореЗрдВ рдХреНрдпрд╛ рдирд╣реАрдВ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП?

  • Controllers рдореЗрдВ DOM access (рдЬреИрд╕реЗ document.getElementById) рдирд╣реАрдВ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП
  • рдЬрд╝рд░реВрд░рдд рд╕реЗ рдЬрд╝реНрдпрд╛рджрд╛ logic рдпрд╛ nested function рдирд╛ рд░рдЦреЗрдВ
  • рдХреЗрд╡рд▓ $scope рд╕реЗ data control рдХрд░реЗрдВ

ЁЯза рдЕрднреНрдпрд╛рд╕ рдкреНрд░рд╢реНрди (Exercise)

  1. AngularJS Controller рдХрд╛ syntax рдХреНрдпрд╛ рд╣реЛрддрд╛ рд╣реИ?
  2. $scope рдХрд╛ рдХреНрдпрд╛ role рд╣реИ Controller рдореЗрдВ?
  3. рдиреАрдЪреЗ рджрд┐рдП рдЧрдП code рдХрд╛ output рдмрддрд╛рдЗрдП:
$scope.x = 5;
$scope.y = 10;
$scope.sum = $scope.x + $scope.y;

тЬЕ рдЖрдкрдиреЗ рдХреНрдпрд╛ рд╕реАрдЦрд╛?

  • Controller рдХреНрдпрд╛ рд╣реЛрддрд╛ рд╣реИ рдФрд░ рдХреНрдпреЛрдВ рдЬрд╝рд░реВрд░реА рд╣реИ
  • $scope object рдХреНрдпрд╛ рдХрд░рддрд╛ рд╣реИ
  • Controller рд╕реЗ View рдФрд░ Data рдХреЛ рдХреИрд╕реЗ рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ
  • Controller рдореЗрдВ functions рдХреИрд╕реЗ рдмрдирд╛рддреЗ рд╣реИрдВ
  • Multiple controllers рдФрд░ best practices

ЁЯОп рдЕрдм рдЖрдк рдЕрдкрдиреЗ AngularJS App рдХреЛ control рдХрд░рдирд╛ рд╕реАрдЦ рдЪреБрдХреЗ рд╣реИрдВ тАФ рдПрдХ рдЕрд╕рд▓реА developer рдХреА рддрд░рд╣!