Penser comme Angular, même si tu viens de jQuery : guide 2025

De « fais ceci » à « laisse faire » : comment arrêter d'écrire du jQuery et commencer à penser AngularJS

Si vous venez du monde jQuery à AngularJS, vous ressentez probablement un choc culturel. Dans jQuery, vous avez l'habitude de commander : « Trouve cet élément, change-lui sa classe, ajoute-lui ce texte ». Dans AngularJS, c'est différent. Vous dites : « Voici les données. Laisse le modèle les surveiller lui-même ». Ce n'est pas juste un changement de bibliothèque — c'est un changement de paradigme.

En 2025, AngularJS (version 1.x) est toujours vivant dans les projets legacy, et comprendre sa philosophie est la clé pour travailler avec succès. Si vous essayez d'écrire AngularJS comme du jQuery, vous êtes voué à la douleur et aux bugs. Voyons comment changer votre façon de penser.

Problème n°1 : Vous manipulez encore le DOM

Dans jQuery, vous écrivez :

// Style jQuery$('#myButton').click(function() {  $('#myDiv').text('Cliqué !').addClass('active');});

Dans AngularJS, vous ne devez pas faire cela. Le DOM n'est qu'un reflet de l'état. Au lieu de toucher directement au DOM, vous modifiez le modèle (les données), et Angular met à jour la vue automatiquement.

// Style AngularJSangular.module('app', []).controller('MainCtrl', function($scope) {  $scope.buttonText = 'Cliquez-moi';  $scope.isActive = false;

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

Et dans le HTML :

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

Vous avez remarqué ? Pas un seul sélecteur, pas un seul accès direct au DOM. Tout est géré via $scope et les directives.

Problème n°2 : Vous écrivez des fonctions utilitaires au lieu de services

Dans jQuery, vous créez souvent un ensemble de fonctions globales :

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

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

Dans AngularJS, vous devez utiliser des services — des singletons qui sont injectés là où ils sont nécessaires. Cela apporte testabilité, réutilisabilité et propreté du code.

// Style AngularJS (bon)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;  });});

Oubliez les variables et fonctions globales. Tout doit vivre à l'intérieur des modules Angular.

Problème n°3 : Vous utilisez $(document).ready()

Dans jQuery, vous attendez le chargement du DOM :

$(document).ready(function() {  // votre code});

Dans AngularJS, ce n'est pas nécessaire. Les contrôleurs et les directives sont initialisés automatiquement lorsque Angular « compile » le DOM. Au lieu de ready(), utilisez $scope.$on('$viewContentLoaded', ...) ou placez simplement la logique d'initialisation dans le constructeur du contrôleur.

angular.module('app').controller('StartupCtrl', function($scope) {  // Ce code s'exécutera lorsque le contrôleur sera créé  $scope.init = function() {    console.log('Contrôleur prêt !');  };  $scope.init();});

Problème n°4 : Vous écrivez du « code spaghetti » avec des callbacks

jQuery encourage les chaînes de callbacks et les appels imbriqués. AngularJS propose des promesses ($q) et une architecture propre.

// Style jQuery (enfer des callbacks)$.get('/data', function(data) {  $.post('/save', data, function(result) {    $.get('/status', function(status) {      // ...    });  });});

// Style AngularJS (promesses)UserService.getUser(1)  .then(function(user) {    return