Course Progress 22%

AngularJS Controllers

← AngularJS Data Binding AngularJS Scope →

AngularJS Controllers application के logic को manage करने के लिए use किए जाते हैं। Controller का काम data को View तक पहुँचाना और user actions को handle करना होता है। यह Model और View के बीच mediator की तरह काम करता है।

AngularJS में controller MVC architecture का एक important हिस्सा है।

Controller क्या है

Controller एक JavaScript function होता है जिसे AngularJS $scope object के साथ execute करता है। $scope के जरिए controller का data और methods View में available होते हैं।

Controller में:

  • Application data define किया जाता है
  • Functions लिखे जाते हैं
  • Business logic handle होता है

Controller बनाने का Syntax

app.controller("myCtrl", function($scope) {
  $scope.message = "Hello AngularJS";
});

Controller और ng-controller Directive

Controller को HTML View से connect करने के लिए ng-controller directive का उपयोग किया जाता है।

<div ng-controller="myCtrl">
  <p>{{message}}</p>
</div>

AngularJS इसी element के अंदर controller को activate करता है।

Complete Controller Example

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="userCtrl">
  <p>First Name:</p>
  <input type="text" ng-model="firstName">
  <p>Last Name:</p>
  <input type="text" ng-model="lastName">
  <h3>Full Name: {{firstName + " " + lastName}}</h3>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("userCtrl", function($scope) {
    $scope.firstName = "Rahul";
    $scope.lastName = "Sharma";
  });
</script>

</body>
</html>

Controller में Functions लिखना

Controller में functions define करके user actions handle किए जाते हैं।

app.controller("calcCtrl", function($scope) {
  $scope.add = function() {
    $scope.result = $scope.a + $scope.b;
  };
});

HTML में:

<input type="number" ng-model="a">
<input type="number" ng-model="b">
<button ng-click="add()">Add</button>
<p>Result: {{result}}</p>

Multiple Controllers

एक application में multiple controllers हो सकते हैं।

<div ng-controller="firstCtrl">
  {{message}}
</div>

<div ng-controller="secondCtrl">
  {{message}}
</div>

app.controller("firstCtrl", function($scope) {
  $scope.message = "First Controller";
});

app.controller("secondCtrl", function($scope) {
  $scope.message = "Second Controller";
});

हर controller का अपना अलग scope होता है।

Scope Hierarchy

AngularJS में scopes hierarchical होते हैं।

  • Parent scope
  • Child scope

Child scope parent scope की properties access कर सकता है।

<div ng-controller="parentCtrl">
  {{name}}
  <div ng-controller="childCtrl">
    {{name}}
  </div>
</div>

Controller और $scope का Role

$scope एक object है जो:

  • View और Controller को connect करता है
  • Data और methods को store करता है
  • Two-way data binding enable करता है

Controller Best Practices

  • Controller को lightweight रखें
  • Heavy logic services में रखें
  • DOM manipulation controller में न करें
  • One controller, one responsibility follow करें

Common Controller Mistakes

  • Controller में बहुत ज़्यादा logic लिखना
  • Global variables use करना
  • $scope misuse करना
  • Same data multiple controllers में duplicate करना

Summary

इस chapter में आपने सीखा:

  • AngularJS controller क्या है
  • Controller कैसे बनाते और use करते हैं
  • Controller में data और functions define करना
  • Multiple controllers और scope hierarchy
  • $scope का role और best practices
← AngularJS Data Binding AngularJS Scope →
  • Home