Permalink
Browse files

added amd module support

  • Loading branch information...
1 parent 94191ac commit 3f4cc8dbcfef4edc0fad770db3cdb752f99a8a2a Tobias Bosch committed Jul 7, 2012
Showing with 2,279 additions and 93 deletions.
  1. +3 −1 Changelog.md
  2. +67 −15 README.md
  3. +28 −20 compiled/jquery-mobile-angular-adapter-1.1.0.js
  4. +28 −20 compiled/jquery-mobile-angular-adapter-standalone-1.1.0.js
  5. +1 −1 compiled/min/jquery-mobile-angular-adapter-1.1.0.js
  6. +1 −1 compiled/min/jquery-mobile-angular-adapter-standalone-1.1.0.js
  7. +1 −1 jstd-server.sh
  8. +1 −1 jstd-ui.sh
  9. +1 −1 jstd-unit.sh
  10. BIN misc/{JsTestDriver-1.3.4.b.jar → JsTestDriver.jar}
  11. +1 −0 misc/JsTestDriver.version.txt
  12. +1 −11 pom.xml
  13. +15 −0 src/main/webapp/WEB-INF/web.xml
  14. +1 −1 src/main/webapp/integration/compileIntegration.js
  15. +1 −1 src/main/webapp/integration/jqmAngularWidgets.js
  16. +1 −1 src/main/webapp/integration/jqmDestroyFix.js
  17. +1 −1 src/main/webapp/integration/li.js
  18. +1 −1 src/main/webapp/integration/ngIncludePatch.js
  19. +1 −1 src/main/webapp/integration/ngInputPatch.js
  20. +1 −1 src/main/webapp/integration/ngOptionsPatch.js
  21. +1 −1 src/main/webapp/integration/ngRepeatPatch.js
  22. +1 −1 src/main/webapp/integration/ngSwitchPatch.js
  23. +1 −1 src/main/webapp/integration/ngmLocationProvider.js
  24. +1 −1 src/main/webapp/integration/option.js
  25. +1 −1 src/main/webapp/integration/precompileSupport.js
  26. +1 −1 src/main/webapp/integration/scopeReconnect.js
  27. +1 −1 src/main/webapp/integration/scopeReentrance.js
  28. +8 −0 src/main/webapp/jqm-angular-standalone.jsp
  29. +8 −0 src/main/webapp/jqm-angular.jsp
  30. +1 −1 src/main/webapp/utils/event.js
  31. +1 −1 src/main/webapp/utils/if.js
  32. +1 −1 src/main/webapp/utils/navigate.js
  33. +1 −1 src/main/webapp/utils/paging.js
  34. +1 −1 src/main/webapp/utils/sharedController.js
  35. +1 −1 src/main/webapp/utils/waitDialog.js
  36. +2 −1 src/test/webapp/UiSpecRunner.html
  37. +3 −0 src/test/webapp/devSnippetPage.html
  38. +2,037 −0 src/test/webapp/lib/require.js
  39. +11 −0 src/test/webapp/ui/amdUsageSpec.js
  40. 0 src/test/webapp/ui/{standaloneBuildTest.js → standaloneBuildSpec.js}
  41. +42 −0 src/test/webapp/ui/test-fixture-amd.html
View
@@ -3,7 +3,9 @@ Changelog
1.1.0
-------------
-- Updated to angular 1.0.1
+- Updated to angular 1.0.1.
+- Added link to german book about using the adapter and a more complex example.
+- Added AMD module support.
- complete refactoring for performance improvements, and to support directives with template and templateUrl.
- $location service can now be used again. Note that by default, this uses
a new `jqmCompat` mode. For routes to work this has to be disabled.
View
@@ -7,8 +7,10 @@ Description
Integration between jquery mobile and angular.js. Needed as jquery mobile
enhances the pages with new elements and styles and so does angular. With this adapter,
all widgets in jquery mobile can be used directly in angular, without further modifications.
+Furthermore, this adapter also provides special utilities useful for mobile applications.
-Note that this adapter also provides special utilities useful for mobile applications.
+If you are interested in how to build mobile web apps with this adapter, have a look at the german book
+[Mobile Web-Apps mit JavaScript](http://www.opitz-consulting.com/go_javascriptbuch).
Dependencies
@@ -17,27 +19,30 @@ Dependencies
- jquery 1.7.1
- jquery mobile 1.1.0 Final
-Sample
+Examples
------------
-- Js fiddle [Todo mobile](http://jsfiddle.net/tigbro/Du2DY/).
-- Single source app for jquery-mobile and sencha touch: [https://github.com/tigbro/todo-mobile](https://github.com/tigbro/todo-mobile)
+- [Todo mobile](http://jsfiddle.net/tigbro/Du2DY/): JsFiddle
+- [Todo mobile](https://github.com/tigbro/todo-mobile): Single source app for jquery-mobile and sencha touch:
+- [Rent Your Legacy Car](https://github.com/mjswa/rylc-html5): A more complex example from the german book [Mobile Web-Apps mit JavaScript](http://www.opitz-consulting.com/go_javascriptbuch).
Reporting Issues
-------------
- Issues can be reported at the Github project.
-- Please provide a jsfiddle, using the following template: http://jsfiddle.net/tigbro/ZHKBA/
+- Please provide a jsfiddle, using [this template](http://jsfiddle.net/tigbro/ZHKBA/).
Usage
---------
+### Plain ###
+
Include this adapter _after_ angular and jquery mobile (see below).
-Attention: The directive `ng-app` for the html element is required, as in all angular applications.
+Note: The directive `ng-app` for the html element is required, as in all angular applications.
- <html xmlns:ng="http://angularjs.org" xmlns:ngm="http://jqm-angularjs.org" ng-app>
+ <html ng-app>
<head>
<title>MobileToys</title>
<link rel="stylesheet" href="lib/jquery.mobile-1.1.css"/>
@@ -47,10 +52,53 @@ Attention: The directive `ng-app` for the html element is required, as in all an
<script src="lib/jquery-mobile-angular-adapter.js"></script>
</head>
+### With requirejs 2.x ###
+
+Create a `index.xhtml` file like the one below:
+
+ <html>
+ <head>
+ <title>MobileToys</title>
+ <link rel="stylesheet" href="lib/jquery.mobile-1.1.css"/>
+ <script src="lib/requirejs.js" data-main="main.js"/>
+ </head>
+ <body>
+ ... your jqm pages ...
+ </body>
+ </html>
+
+And a `main.js` file with the following content:
+
+ require.config({
+ shim:{
+ 'angular':{ deps:['jquery'], exports:'angular'}
+ }
+ });
+ require([
+ "angular",
+ "jquery-mobile-angular-adapter",
+ ... // your controllers, angular modules, ...
+ ], function (angular) {
+ angular.element(document).ready(function() {
+ angular.bootstrap(document.documentElement, [<your angular modules>]);
+ });
+ });
+
+
+Notes:
+- This assumes that all libs are in the root folder of your webapp. To put them into a subfolder like `lib` use the
+ paths argument in the call to `require.config` (e.g. `paths: {angular: lib/angular}`, ...)
+- The libraries jQuery, jQuery Mobile and the adapter are already AMD modules. Only angular is not, which is why
+ we need a shim config for it.
+- We do NOT specify an `ng-app` directive in your html, but boostrap angular manually, when all modules have been loaded.
+ This is needed as the event `DOMContentLoaded`, for which the auto bootstrap of angular waits, may occur before all
+ modules have been loaded by requirejs.
+
+
Directory layout
-------------------
-This follows the usual maven directory layout:
+This project follows the usual maven directory layout:
- src/main/webapp: The production code
- src/test/webapp: The test code
@@ -63,10 +111,14 @@ Build
The build is done using maven and node js.
- `mvn clean package`: This will create a new version of the adapter and put it into `/compiled`.
+- `mvn clean package -Ptest -Dbrowser=<path to your browser>`: As above, but will also execute the unit and ui tests.
+
+Results of the build:
-The build also creates a standalone library including jquery, jquery-mobile and angular.
-If you want to do something during the initialization of jquery-mobile, use the following callback:
-`window.mobileinit = function() { ... }`
+- `compiled/jquery-mobile-angular-adapter-<version>.js`: The adapter in one file, without dependencies.
+- `compiled/jquery-mobile-angular-adapter-standalone-<version>.js`: The adapter in one file including jquery, jquery-mobile and angular.
+ If you want to do something during the initialization of jquery-mobile, use the following callback:
+ `window.mobileinit = function() { ... }`
Running the tests
-------------------
@@ -78,7 +130,7 @@ Running the tests
The ui-tests can be run via the url `localhost:8080/jqmng/UiSpecRunner.html`
-`$location` service, routes and jqm hashchange handling
+Jqm hashchange handling, `$location` service and routes
---------------------
By default, jqm listens for all hash changes and shows the the page with the id of the current location hash.
@@ -104,7 +156,7 @@ so there is no performance interaction between pages.
For communicating between the pages use the `ngm-shared-controller` directive (see below).
-Widgets, Directives and Services
+Directives, Filters and Services
-----------
### Directive `ngm-shared-controller`
@@ -143,8 +195,8 @@ using the `ngm-event` directive with the corresponding event name.
Usage: E.g. `<a href="#" ngm-swipeleft="myFn()">`
-### Attribute Widget ngm-if
-The attribute widget `@ngm-if` allows to add/remove an element to/from the dom, depending on an expression.
+### Directive ngm-if
+The directive `@ngm-if` allows to add/remove an element to/from the dom, depending on an expression.
This is especially useful at places where we cannot insert an `ng-switch` into the dom. E.g. jquery mobile
does not allow elements between an `ul` and an `li` element.
@@ -5,6 +5,13 @@
* Copyright 2011, Tobias Bosch (OPITZ CONSULTING GmbH)
* Licensed under the MIT license.
*/
+(function(factory) {
+if (typeof define === "function" && define.amd) {
+define(["jquery", "angular", "jquery.mobile"], factory);
+} else {
+factory(window.jQuery, window.angular);
+}
+})(function($, angular) {
(function ($) {
function patch(obj, fnName, callback) {
var _old = obj[fnName];
@@ -75,7 +82,7 @@
return old.apply(self, args);
});
-})(window.jQuery);
+})($);
/**
* Helper that introduces the concept of precompilation: Preprocess the dom before
* angular processes it.
@@ -148,7 +155,7 @@
}]);
}]);
-})(window.jQuery, window.angular);
+})($, angular);
(function (angular) {
var ng = angular.module('ng');
@@ -186,7 +193,7 @@
return $rootScope;
}]);
}]);
-})(window.angular);
+})(angular);
(function (angular) {
var ng = angular.module('ng');
ng.config(['$provide', function ($provide) {
@@ -209,7 +216,7 @@
return $rootScope;
}]);
}]);
-})(window.angular);
+})(angular);
(function ($, angular) {
// Only digest the $.mobile.activePage when rootScope.$digest is called.
var ng = angular.module('ng');
@@ -491,7 +498,7 @@
});
}
-})(window.jQuery, window.angular);
+})($, angular);
(function (angular, $) {
var widgetConfig = {
checkboxradio:{
@@ -828,7 +835,7 @@
}
-})(window.angular, window.jQuery);
+})(angular, $);
/**
* This is an extension to the locationProvider of angular and provides a new mode: jqmCompat-mode.
* <p>
@@ -1093,7 +1100,7 @@
}]);
-})(window.angular, window.jQuery);
+})(angular, $);
(function ($, angular) {
// Patch for ng-repeat to fire an event whenever the children change.
// Only watching Scope create/destroy is not enough here, as ng-repeat
@@ -1165,7 +1172,7 @@
}
};
});
-})(window.jQuery, window.angular);
+})($, angular);
(function ($, angular) {
// This is a copy of parts of angular's ngOptions directive to detect changes in the values
// of ngOptions (emits the $childrenChanged event on the scope).
@@ -1237,7 +1244,7 @@
}]);
-})(window.jQuery, window.angular);
+})($, angular);
(function (angular) {
var ng = angular.module("ng");
ng.directive('option', ['$interpolate', function ($interpolate) {
@@ -1257,7 +1264,7 @@
}
};
}]);
-})(window.angular);
+})(angular);
(function (angular) {
var ng = angular.module("ng");
ng.directive('li', function() {
@@ -1281,7 +1288,7 @@
}
};
});
-})(window.angular);
+})(angular);
(function (angular) {
// Patch for ng-switch to fire an event whenever the children change.
@@ -1300,7 +1307,7 @@
}
}
});
-})(window.angular);
+})(angular);
(function (angular) {
// Patch for ng-include to fire an event whenever the children change.
@@ -1322,7 +1329,7 @@
}
}
});
-})(window.angular);
+})(angular);
(function ($, angular) {
var mod = angular.module('ng');
mod.directive("input", function () {
@@ -1365,7 +1372,7 @@
};
});
-})(window.jQuery, window.angular);
+})($, angular);
(function (angular) {
@@ -1407,7 +1414,7 @@
ng.directive('ngmIf', function () {
return ngIfDirective;
});
-})(window.angular);
+})(angular);
(function (angular) {
var mod = angular.module('ng');
@@ -1445,7 +1452,7 @@
createEventDirective(directive, eventDirectives[directive])
}
-})(window.angular);
+})(angular);
(function($, angular) {
function splitAtFirstColon(value) {
var pos = value.indexOf(':');
@@ -1567,7 +1574,7 @@
return navigate;
-})(window.jQuery, window.angular);
+})($, angular);
(function(angular) {
var storageName = '$$sharedControllers';
@@ -1628,7 +1635,7 @@
}
};
}]);
-})(window.angular);
+})(angular);
(function($, angular) {
var showCalls = [];
@@ -1760,7 +1767,7 @@
}]);
return res;
-})(window.jQuery, window.angular);
+})($, angular);
(function ($, angular) {
function pagedListFilterFactory(defaultListPageSize, filterFilter, orderByFilter) {
@@ -1916,4 +1923,5 @@
var mod = angular.module(['ng']);
mod.constant('defaultListPageSize', 10);
mod.filter('paged', pagedListFilterFactory);
-})(window.jQuery, window.angular);
+})($, angular);
+});
Oops, something went wrong.

0 comments on commit 3f4cc8d

Please sign in to comment.