AngularJS mit jQuery
Es war schon immer einfach, AngularJS in Kombination mit jQuery zu nutzen. Angular selbst bietet uns eine API-kompatible Submenge von jQuery namens jqLite an. Diese Submenge von jQuery implementiert die am meisten genutzten jQuery-Funktionen, um uns die einfache Cross-Browser-DOM-Manipulation in unseren Angular-Anwendungen zu ermöglichen. Wir interagieren mit jqLite jedesmal, wenn wir die Angular element-Funktion nutzen. Falls man die vollständige jQuery-Funktionalität braucht, reicht es, in unserer index.html-Datei jQuery vor Angular zu definieren. Somit wird ein element()-Aufruf zu einem Alias für den jQuery()-Aufruf.
Seit der Version 1.4 haben wir die Möglichkeit, selbst anzugeben, ob wir die element-Funktion als jQuery-Ersatz oder als jqLite nutzen möchten, gleichviel, ob jQuery vor Angular geladen wird. Dies können wir mit der ng-jq-Direktive tun. Wichtig dabei ist es, die Direktive mit einem Element vor dem script-Tag zu nutzen, bei dem wir Angular laden. Der html-Tag bietet sich für solch ein Element an. Ferner ist es immer noch nötig, jQuery vor Angular zu definieren, falls wir jqLite durch jQuery ersetzen möchten.
Die Nutzung der ng-jq-Direktive hat zwei Vorteile:
- Wir können jQuery frühzeitig definieren und trotzdem jqLite für die element-Funktion behalten.
- Wir können jQuery-ähnliche Bibliotheken verwenden, indem wir ng-jq den Namen der Bibliothek übergeben.
jqLite beibehalten
Es kann, je nach Projekt, sinnvoll sein, jqLite beizubehalten, um keine jQuery-Abhängigkeit in unserem Angular-Code zu haben. Beispiel: Wir nutzen Bootstrap-Komponenten, die jQuery benötigen, und schreiben gerade unsere Anwendung um mit dem Ziel, Bootstrap zu entfernen. In diesem Fall kann es sinnvoll sein, auch jQuery zu entfernen, um die Anzahl der Bytes zu reduzieren. Es wird schwieriger sein, jQuery zu entfernen, wenn unser Code implizit (über angular.element) jQuery-abhängig ist. Um jqLite beizubehalten, reicht es, ng-jq ohne Parameter zu nutzen.
<html ng-app ng-jq>
<head>
<script src="jquery.js"></script>
<script src="angular.js"></script>
</head>
<body></body>
</html>
Obwohl jQuery vor Angular definiert wird, wird jqLite für die element-Funktion verwendet.
jQuery-ähnliche Bibliothek nutzen
In manchen Fällen möchte man jQuery-ähnliche Bibliotheken nutzen wie z. B. zepto, die eine jQuery-ähnliche API unter einem anderen Namen zur Verfügung stellen. Es kann aber auch sein, dass wir zwei unterschiedliche jQuery-Versionen nutzen und wir eine der beiden Versionen unter einem anderen Namen als dem Standard-jQuery-Namen zur Verfügung stellen. In einem solchen Fall können wir die ng-jq-Direktive mit dem Bibliothek-Namen als Parameter nutzen. Der gegebene Name muss ein Attribut des globalen Objektes window sein.
<html ng-app ng-jq="jQueryAehnlich">
<head>
<script src="jquery_aehnlich.js"></script>
<script src="angular.js"></script>
</head>
<body></body>
</html>
Hier wird die element-Funktion durch die jQueryAehnlich-Funktion ersetzt.
