Pensar como Angular, incluso si vienes de jQuery: guía 2025

De "haz esto" a "que sea así": cómo dejar de escribir jQuery y empezar a pensar en AngularJS

Si llegaste al mundo de AngularJS desde jQuery, probablemente estés experimentando un choque cultural. En jQuery estás acostumbrado a dar órdenes: "Encuentra este elemento, cámbiale la clase, agrégale texto ahí". En AngularJS es diferente. Dices: "Aquí están los datos. Que la plantilla los siga por sí sola". Esto no es solo un cambio de biblioteca, es un cambio de paradigma.

En 2025, AngularJS (versión 1.x) sigue vivo en proyectos heredados, y entender su filosofía es clave para trabajar con éxito. Si intentas escribir AngularJS como si fuera jQuery, estás condenado al dolor y los errores. Analicemos cómo cambiar el chip.

Problema n.º 1: Sigues manipulando el DOM

En jQuery escribes:

// Estilo jQuery$('#myButton').click(function() {  $('#myDiv').text('¡Presionado!').addClass('active');});

En AngularJS no se debe hacer así. El DOM es solo un reflejo del estado. En lugar de tocar el DOM directamente, modificas el modelo (datos) y Angular actualiza la vista por sí solo.

// Estilo AngularJSangular.module('app', []).controller('MainCtrl', function($scope) {  $scope.buttonText = 'Presióname';  $scope.isActive = false;

  $scope.handleClick = function() {    $scope.buttonText = '¡Presionado!';    $scope.isActive = true;  };});

Y en HTML:

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

¿Notaste? Ni un solo selector, ni una sola manipulación directa del DOM. Todo se gestiona a través de $scope y directivas.

Problema n.º 2: Escribes funciones utilitarias en lugar de servicios

En jQuery a menudo creas un conjunto de funciones globales:

// Estilo jQuery (malo)function getUser(id) {  return $.get('/api/users/' + id);}

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

En AngularJS debes usar servicios — singletons que se inyectan donde se necesitan. Esto proporciona capacidad de prueba, reutilización y código limpio.

// Estilo AngularJS (bueno)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;  });});

Olvídate de las variables y funciones globales. Todo debe vivir dentro de los módulos de Angular.

Problema n.º 3: Usas $(document).ready()

En jQuery esperas a que el DOM cargue:

$(document).ready(function() {  // tu código});

En AngularJS esto no es necesario. Los controladores y directivas se inicializan automáticamente cuando Angular "compila" el DOM. En lugar de ready(), usa $scope.$on('$viewContentLoaded', ...) o simplemente coloca la lógica de inicialización en el constructor del controlador.

angular.module('app').controller('StartupCtrl', function($scope) {  // Este código se ejecutará cuando se cree el controlador  $scope.init = function() {    console.log('¡Controlador listo!');  };  $scope.init();});

Problema n.º 4: Escribes "código espagueti" con callbacks

jQuery fomenta cadenas de callbacks y llamadas anidadas. AngularJS ofrece promesas ($q) y una arquitectura limpia.

// Estilo jQuery (infierno de callbacks)$.get('/data', function(data) {  $.post('/save', data, function(result) {    $.get('/status', function(status) {      // ...    });  });});

// Estilo AngularJS (promesas)UserService.getUser(1)  .then(function(user) {    return