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)
- AngularJS Controller рдХрд╛ syntax рдХреНрдпрд╛ рд╣реЛрддрд╛ рд╣реИ?
$scope
рдХрд╛ рдХреНрдпрд╛ role рд╣реИ Controller рдореЗрдВ?- рдиреАрдЪреЗ рджрд┐рдП рдЧрдП 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 рдХреА рддрд░рд╣!