angular-sizzle

Get the jQuery-selector-engine without the jQuery-overload.


Keywords
angular, sizzle
License
WTFPL
Install
bower install angular-sizzle

Documentation

Angular-Sizzle

Angular.js internally uses jqLite for working with the DOM, a micro-library similar to jQuery but much smaller. As Angular has its own AJAX-implementation and provides animations (version >= 1.1.3), there's actually no real need for jQuery.

Only when it comes to selecting DOM-elements, using just jqLite can become quite a hassle. That's the point where Angular-Sizzle comes into play. It provides the powerful selector-capability of jQuery without the huge AJAX- and animation-overload.

To demonstrate the difference:

Sizzle 1.9.4 (~18 kb) vs jQuery 1.10.0 (~92 kb)

How to use?

The current version of Sizzle.js (v1.9.3) is included, so you only have to include Angular.js and Angular-Sizzle.js. Then, when instantiating your app, include 'ek.Sizzle' as a dependency.

<script src="path/to/angular.js"></script>
<script src="path/to/angular-sizzle-0.0.3.min.js"></script>
<script>
    var app = angular.module('tehApp', ['ek.Sizzle']);
</script>

That's it!

What happens?

Angular-Sizzle saves a reference to the angular.element-method and overwrites it with a custom function, that takes a selector-string and passes a Sizzle-instance to the actual angular.element-method.

What else?

Due to the concept of Angular, heavy DOM-lifting stuff is done by directives, which provide element-, class- and attribute-selectors in a rather abstract way. Inside of these directives one has access to an angular.element-instance of the relevant DOM-element to work with.

So check, if you really need a full-grown selector-engine. Maybe the use of directives and the angular.element-DOM-traversing-method suffices your needs.

How to test?

There are some tests provided. To run them you need Karma. Install it by entering the following into your console:

npm install -g karma

After that you have the Karma Testrunner installed. Now you can run the tests by entering the following line into your console:

karma start karma.conf.js --single-run

Everything should hopefully pass the test …

Who made this little Angular-Sizzle-Intermezzo?

Well, me. And as chance would have it, I have a twitter and a blog. Funny, hein?!

@Herschel_R
EK-Blog

Could you bore me with license stuff?

No problem!

WTFPL


Thx to angular-component-seed!