فكر مثل Angular، حتى لو كنت من jQuery: دليل 2025

من "افعل هذا" إلى "دع الأمر يكون كذلك": كيف تتوقف عن كتابة jQuery وتبدأ بالتفكير مثل AngularJS

إذا أتيت إلى عالم AngularJS من jQuery، فمن المحتمل أنك تعاني من صدمة ثقافية. في jQuery، اعتدت على إعطاء الأوامر: "ابحث عن هذا العنصر، غيّر فئته، أضف هذا النص إليه". في AngularJS، الأمر مختلف تمامًا. أنت تقول: "هذه هي البيانات. دع القالب يتتبعها بنفسه". هذا ليس مجرد تغيير مكتبة - إنه تغيير في النموذج الفكري.

في عام 2025، لا يزال AngularJS (الإصدار 1.x) حيًا في المشاريع القديمة (legacy)، وفهم فلسفته هو مفتاح العمل الناجح. إذا كنت تحاول كتابة AngularJS كما تكتب jQuery، فأنت مقبل على الألم والأخطاء. دعنا نفهم كيف نعيد برمجة عقلك.

المشكلة رقم 1: ما زلت تتعامل مع DOM مباشرة

في jQuery، تكتب:

// أسلوب jQuery$('#myButton').click(function() {  $('#myDiv').text('تم الضغط!').addClass('active');});

في AngularJS، لا يجب أن تفعل ذلك أبدًا. DOM هو مجرد انعكاس للحالة. بدلاً من لمس DOM مباشرة، تقوم بتغيير النموذج (البيانات)، و Angular يقوم بتحديث العرض تلقائيًا.

// أسلوب AngularJSangular.module('app', []).controller('MainCtrl', function($scope) {  $scope.buttonText = 'اضغط علي';  $scope.isActive = false;

  $scope.handleClick = function() {    $scope.buttonText = 'تم الضغط!';    $scope.isActive = true;  };});

وفي HTML:

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

هل لاحظت؟ لا يوجد محدد واحد، ولا وصول مباشر واحد إلى DOM. كل شيء يتم إدارته من خلال $scope والتوجيهات.

المشكلة رقم 2: تكتب دوال مساعدة بدلاً من الخدمات

في jQuery، غالبًا ما تنشئ مجموعة من الدوال العامة:

// أسلوب jQuery (سيء)function getUser(id) {  return $.get('/api/users/' + id);}

function showError(msg) {  $('#error').text(msg).show();}

في AngularJS، يجب عليك استخدام الخدمات - وهي كائنات مفردة (singletons) يتم حقنها حيثما تكون مطلوبة. وهذا يوفر قابلية الاختبار، وإعادة الاستخدام، ونظافة الكود.

// أسلوب AngularJS (جيد)angular.module('app').factory('UserService', function($http) {  return {    getUser: function(id) {      return $http.get('/api/users/' + id);    }  };}).controller('ProfileCtrl', function($scope, UserService) {  UserService.getUser(1).then(function(response) {    $scope.user = response.data;  });});

انسَ المتغيرات والدوال العامة. كل شيء يجب أن يعيش داخل وحدات Angular.

المشكلة رقم 3: تستخدم $(document).ready()

في jQuery، تنتظر تحميل DOM:

$(document).ready(function() {  // الكود الخاص بك});

في AngularJS، هذا غير ضروري. يتم تهيئة المتحكمات والتوجيهات تلقائيًا عندما يقوم Angular "بتجميع" DOM. بدلاً من ready()، استخدم $scope.$on('$viewContentLoaded', ...) أو ببساطة ضع منطق التهيئة في مُنشئ المتحكم.

angular.module('app').controller('StartupCtrl', function($scope) {  // سيتم تنفيذ هذا الكود عند إنشاء المتحكم  $scope.init = function() {    console.log('المتحكم جاهز!');  };  $scope.init();});

المشكلة رقم 4: تكتب "كود معكرونة" مع دوال الاسترجاع (callbacks)

jQuery تشجع على سلاسل دوال الاسترجاع والاستدعاءات المتداخلة. AngularJS يقدم الوعود (promises) ($q) وهندسة نظيفة.

// أسلوب jQuery (جحيم دوال الاسترجاع)$.get('/data', function(data) {  $.post('/save', data, function(result) {    $.get('/status', function(status) {      // ...    });  });});

// أسلوب AngularJS (الوعود)UserService.getUser(1)  .then(function(user) {    return