Denken wie Angular, auch wenn du von jQuery kommst: Leitfaden 2025

Von „Mach das“ zu „Lass es so sein“: Wie man aufhört, jQuery zu schreiben und anfängt, in AngularJS zu denken

Wenn Sie aus der jQuery-Welt in die Welt von AngularJS kommen, erleben Sie wahrscheinlich einen Kulturschock. In jQuery sind Sie es gewohnt, zu befehlen: „Finde dieses Element, ändere seine Klasse, füge dort Text hinzu.“ In AngularJS ist alles anders. Sie sagen: „Hier sind die Daten. Lass die Vorlage selbst darauf achten.“ Das ist nicht nur ein Bibliothekswechsel – das ist ein Paradigmenwechsel.

Im Jahr 2025 ist AngularJS (Version 1.x) in Legacy-Projekten immer noch lebendig, und das Verständnis seiner Philosophie ist der Schlüssel zu erfolgreicher Arbeit. Wenn Sie versuchen, AngularJS wie jQuery zu schreiben, sind Sie zu Schmerz und Fehlern verdammt. Lassen Sie uns herausfinden, wie Sie Ihr Denken umstellen.

Problem Nr. 1: Sie manipulieren immer noch das DOM

In jQuery schreiben Sie:

// jQuery-Stil$('#myButton').click(function() {  $('#myDiv').text('Geklickt!').addClass('active');});

In AngularJS sollten Sie das nicht tun. Das DOM ist nur eine Spiegelung des Zustands. Anstatt das DOM direkt zu berühren, ändern Sie das Modell (die Daten), und Angular aktualisiert die Ansicht von selbst.

// AngularJS-Stilangular.module('app', []).controller('MainCtrl', function($scope) {  $scope.buttonText = 'Klick mich';  $scope.isActive = false;

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

Und im HTML:

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

Bemerkt? Kein einziger Selektor, kein direkter Zugriff auf das DOM. Alles wird über $scope und Direktiven gesteuert.

Problem Nr. 2: Sie schreiben Dienstprogrammfunktionen anstelle von Services

In jQuery erstellen Sie oft einen Satz globaler Funktionen:

// jQuery-Stil (schlecht)function getUser(id) {  return $.get('/api/users/' + id);}

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

In AngularJS sollten Sie Services verwenden – Singletons, die dort injiziert werden, wo sie benötigt werden. Das sorgt für Testbarkeit, Wiederverwendbarkeit und sauberen Code.

// AngularJS-Stil (gut)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;  });});

Vergessen Sie globale Variablen und Funktionen. Alles sollte innerhalb von Angular-Modulen leben.

Problem Nr. 3: Sie verwenden $(document).ready()

In jQuery warten Sie auf das Laden des DOM:

$(document).ready(function() {  // Ihr Code});

In AngularJS ist das nicht nötig. Controller und Direktiven werden automatisch initialisiert, wenn Angular das DOM „kompiliert“. Verwenden Sie anstelle von ready() $scope.$on('$viewContentLoaded', ...) oder platzieren Sie die Initialisierungslogik einfach im Konstruktor des Controllers.

angular.module('app').controller('StartupCtrl', function($scope) {  // Dieser Code wird ausgeführt, wenn der Controller erstellt wird  $scope.init = function() {    console.log('Controller bereit!');  };  $scope.init();});

Problem Nr. 4: Sie schreiben „Spaghetti-Code“ mit Callbacks

jQuery fördert Callback-Ketten und verschachtelte Aufrufe. AngularJS bietet Promises ($q) und eine saubere Architektur.

// jQuery-Stil (Callback-Hölle)$.get('/data', function(data) {  $.post('/save', data, function(result) {    $.get('/status', function(status) {      // ...    });  });});

// AngularJS-Stil (Promises)UserService.getUser(1)  .then(function(user) {    return