जैसे Angular सोचें, भले ही आप jQuery से हों: 2025 गाइड

"यह करो" से "ऐसा ही होने दो" तक: jQuery लिखना कैसे बंद करें और AngularJS में सोचना कैसे शुरू करें

यदि आप jQuery से AngularJS की दुनिया में आए हैं, तो संभवतः आप सांस्कृतिक आघात का अनुभव कर रहे हैं। jQuery में आप आदेश देने के आदी हैं: "यह एलिमेंट ढूंढो, इसकी क्लास बदलो, इसमें टेक्स्ट जोड़ो।" AngularJS में सब कुछ अलग है। आप कहते हैं: "ये डेटा है। टेम्पलेट को खुद इस पर नज़र रखने दो।" यह सिर्फ लाइब्रेरी बदलना नहीं है - यह प्रतिमान बदलना है।

2025 में, AngularJS (संस्करण 1.x) अभी भी लीगेसी प्रोजेक्ट्स में जीवित है, और इसके दर्शन को समझना सफल कार्य की कुंजी है। यदि आप AngularJS को jQuery की तरह लिखने का प्रयास कर रहे हैं, तो आप दर्द और बग्स के लिए अभिशप्त हैं। आइए समझते हैं कि अपने दिमाग को कैसे बदलें।

समस्या #1: आप अभी भी DOM में हेरफेर कर रहे हैं

jQuery में आप लिखते हैं:

// jQuery शैली\n$('#myButton').click(function() {\n  $('#myDiv').text('दबाया गया!').addClass('active');\n});\n

AngularJS में ऐसा करना मना है। DOM केवल स्थिति का प्रतिबिंब है। सीधे DOM को छूने के बजाय, आप मॉडल (डेटा) बदलते हैं, और Angular स्वयं व्यू को अपडेट करता है।

// AngularJS शैली\nangular.module('app', [])\n.controller('MainCtrl', function($scope) {\n  $scope.buttonText = 'मुझे दबाएँ';\n  $scope.isActive = false;\n\n  $scope.handleClick = function() {\n    $scope.buttonText = 'दबाया गया!';\n    $scope.isActive = true;\n  };\n});\n

और HTML में:

<div ng-app="app" ng-controller="MainCtrl">\n  <button ng-click="handleClick()">{{ buttonText }}</button>\n  <div ng-class="{active: isActive}">{{ buttonText }}</div>\n</div>\n

ध्यान दिया? कोई सेलेक्टर नहीं, DOM का कोई सीधा संदर्भ नहीं। सब कुछ $scope और डायरेक्टिव के माध्यम से प्रबंधित होता है।

समस्या #2: आप सेवाओं के बजाय उपयोगिता फंक्शन लिख रहे हैं

jQuery में आप अक्सर ग्लोबल फंक्शन का सेट बनाते हैं:

// jQuery शैली (बुरा)\nfunction getUser(id) {\n  return $.get('/api/users/' + id);\n}\n\nfunction showError(msg) {\n  $('#error').text(msg).show();\n}\n

AngularJS में आपको सेवाओं का उपयोग करना चाहिए - सिंगलटन जो जहाँ ज़रूरत हो वहाँ इंजेक्ट किए जाते हैं। यह परीक्षण योग्यता, पुन: उपयोग और कोड की सफाई देता है।

// AngularJS शैली (अच्छा)\nangular.module('app')\n.factory('UserService', function($http) {\n  return {\n    getUser: function(id) {\n      return $http.get('/api/users/' + id);\n    }\n  };\n})\n.controller('ProfileCtrl', function($scope, UserService) {\n  UserService.getUser(1).then(function(response) {\n    $scope.user = response.data;\n  });\n});\n

ग्लोबल वेरिएबल और फंक्शन भूल जाइए। सब कुछ Angular मॉड्यूल के अंदर रहना चाहिए।

समस्या #3: आप $(document).ready() का उपयोग कर रहे हैं

jQuery में आप DOM लोड होने की प्रतीक्षा करते हैं:

$(document).ready(function() {\n  // आपका कोड\n});\n

AngularJS में इसकी आवश्यकता नहीं है। कंट्रोलर और डायरेक्टिव स्वचालित रूप से इनिशियलाइज़ हो जाते हैं जब Angular DOM को "कंपाइल" करता है। ready() के बजाय $scope.$on('$viewContentLoaded', ...) का उपयोग करें या बस इनिशियलाइज़ेशन लॉजिक को कंट्रोलर कंस्ट्रक्टर में रखें।

angular.module('app')\n.controller('StartupCtrl', function($scope) {\n  // यह कोड तब निष्पादित होगा जब कंट्रोलर बनाया जाएगा\n  $scope.init = function() {\n    console.log('कंट्रोलर तैयार!');\n  };\n  $scope.init();\n});\n

समस्या #4: आप कॉलबैक के साथ "स्पेगेटी कोड" लिख रहे हैं

jQuery कॉलबैक की श्रृंखला और नेस्टेड कॉल को प्रोत्साहित करता है। AngularJS प्रॉमिस ($q) और साफ आर्किटेक्चर प्रदान करता है।

// jQuery शैली (कॉलबैक का नरक)\n$.get('/data', function(data) {\n  $.post('/save', data, function(result) {\n    $.get('/status', function(status) {\n      // ...\n    });\n  });\n});\n

// AngularJS शैली (प्रॉमिस)\nUserService.getUser(1)\n  .then(function(user) {\n    return