Angular.js mit Sizzle.js als Selektor-Engine

Wie weithin bekannt ist, benutzt Angular für DOM-Angelegenheiten intern eine abgespeckte jQuery-Variante namens jqLite, auf die über angular.element zugegriffen werden kann. Diese bietet ein paar Methoden aus dem Bereich DOM-Manipulation und -Traversing, hat jedoch keine Selektor-Engine. Bindet man parallel zu Angular die jQuery-Library ein, wird jqLite durch jQuery ersetzt.

Angesichts der Tatsache, dass Angular eigene Services für AJAX und Animationen (Version >= 1.1.3 in Verbindung mit CSS3) bietet, ist der Einsatz von jQuery jedoch stark übertrieben. Zum Glück gibt es die von jQuery verwandte und von John Resig geschriebene Selektor-Engine Sizzle auch als Stand-alone-Version. Diese kann man alternativ einbinden. Man muss angular.element dann nur noch beibringen, sie auch zu verwenden.

Das wiederum ist schnell erledigt.

// Anlegen einer Referenz auf die eigentliche angular.element-Methode
angular._element = angular.element;

// Ueberschreiben der angular.element-Methode
angular.element = function (selector) {
  // ist das uebergebene Argument bereits eine
  // Instanz von angular._element, wird es ohne
  // Umschweife zurueck gegeben.
  if (selector instanceof angular._element) {
    return selector;
  }

  // Andernfalls wird eine Sizzle-Instanz erstellt
  // und an die angular._element-Methode uebergeben.
  return angular._element(Sizzle(selector));
};

Fertig ist die Laube!

Das ganze gibt es auch als Angular-Modul Angular-Sizzle" auf Github.

Zum Schluss noch der Hinweis, dass der Einsatz von Angular-Sizzle gut überlegt sein will. Das Konzept von Angular sieht vor, dass tiefgreifendere Arbeiten am DOM über Direktiven erledigt werden. Diese bieten abstrahierte Element-, Klassen- und Attribut-Selektoren. Innerhalb der Direktiven gibt es automatisch eine jqLite-Instanz der relevanten DOM-Elemente, mit der man arbeiten kann.

Der Einsatz einer ausgewachsenen Selektor-Engine könnte also übertrieben sein. Das hängt jedoch davon ab, was man vor hat.