Pensar como Angular, mesmo se você vem do jQuery: guia 2025

De "faça isso" para "que assim seja": como parar de escrever jQuery e começar a pensar em AngularJS

Se você veio para o mundo do AngularJS vindo do jQuery, provavelmente está experimentando um choque cultural. No jQuery, você está acostumado a comandar: "Encontre este elemento, mude sua classe, adicione texto ali". No AngularJS, é diferente. Você diz: "Aqui estão os dados. Deixe o template cuidar deles". Não é apenas uma troca de biblioteca — é uma mudança de paradigma.

Em 2025, o AngularJS (versão 1.x) ainda está vivo em projetos legados, e entender sua filosofia é a chave para um trabalho bem-sucedido. Se você tenta escrever AngularJS como se fosse jQuery, estará fadado à dor e a bugs. Vamos entender como mudar o pensamento.

Problema nº 1: Você ainda está manipulando o DOM

No jQuery, você escreve:

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

No AngularJS, isso não pode ser feito. O DOM é apenas um reflexo do estado. Em vez de tocar no DOM diretamente, você altera o modelo (dados), e o Angular atualiza a visualização automaticamente.

// Estilo AngularJSangular.module('app', []).controller('MainCtrl', function($scope) {  $scope.buttonText = 'Clique em mim';  $scope.isActive = false;

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

E no HTML:

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

Percebeu? Nenhum seletor, nenhuma referência direta ao DOM. Tudo é gerenciado através de $scope e diretivas.

Problema nº 2: Você está escrevendo funções utilitárias em vez de serviços

No jQuery, você frequentemente cria um conjunto de funções globais:

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

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

No AngularJS, você deve usar serviços — singletons que são injetados onde são necessários. Isso proporciona testabilidade, reutilização e código limpo.

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

Esqueça variáveis e funções globais. Tudo deve viver dentro dos módulos do Angular.

Problema nº 3: Você está usando $(document).ready()

No jQuery, você espera o DOM carregar:

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

No AngularJS, isso não é necessário. Controladores e diretivas são inicializados automaticamente quando o Angular "compila" o DOM. Em vez de ready(), use $scope.$on('$viewContentLoaded', ...) ou simplesmente coloque a lógica de inicialização no construtor do controlador.

angular.module('app').controller('StartupCtrl', function($scope) {  // Este código será executado quando o controlador for criado  $scope.init = function() {    console.log('Controlador pronto!');  };  $scope.init();});

Problema nº 4: Você está escrevendo "código espaguete" com callbacks

jQuery incentiva cadeias de callbacks e chamadas aninhadas. AngularJS oferece promises ($q) e uma arquitetura limpa.

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

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