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.