#Angular-JQM

##Description Native AngularJS directives for jQuery Mobile. Small footprint, no 3rd party JS dependencies (jQuery, jQuery Mobile JS) required!

##Why

• Download size: If you want to use the JavaScript part of jqm, you also need to use jquery. In total you need angular, jquery, jqm and the adapter. A lot of stuff...
• Performance: The original jqm widgets not always do things the most performant way. E.g. they use a lot of css selector queries. Furthermore, they usually only have one refresh method to refresh to whole widget (e.g. a listview), but not parts of it.
• Maintainability: Using the jqm JavaScript part requires some dirty hacks so that it works with angular. However, to maintain those hacks you need a lot of knowledge about the internas of jqm and angular.

This is very similar to the angular bootstrap integration: There is an adapter that uses the JavaScript part of bootstrap, angular-strap (http://mgcrea.github.io/angular-strap/), and another version that uses the boostrap css only from the angular-ui team (http://angular-ui.github.io/bootstrap/).

To ensure that our directives work correctly we will create special ui tests that compare the generated markup of our directives with the markup generated by plain jquery mobile. By this it should also be easy to keep track of changes in jquery mobile when they release newer versions.

Build

Directory structure

• dist: The compiled versions of the adapter
• src: The source files of the adapter
• test/unit: The unit tests

Install the dependencies: npm install and then ./node_modules/.bin/bower install.

Build it: grunt

Auto-Run tests when file change: grunt dev

(this needs grunt-cli installed globally: npm install grunt-cli -g)

Add source file:

1. add it to the src folder
2. add an entry in build/files.js at the right position.

Unit Tests and their access to production code

For the whole build, we are using an immediatly executing function expression to ensure that no variable leaks into the global scope. However, for unit tests we want to be able to look inside this function scope, so we can test small details like regex, ... without making them globally accessible. Therefore when running the unit tests we include the source files without the immediatly excution function expression, allowing the unit tests to access every detail of our code.

Note: The same principle is used by angular for it's sources and unit tests.

TODO