|
| 1 | +ngDefine |
| 2 | +======== |
| 3 | + |
| 4 | +A friendly integration of [AngularJS](http://angularjs.org/) into [RequireJS](http://requirejs.org/) powered applications. |
| 5 | + |
| 6 | + |
| 7 | +How it Works |
| 8 | +------------ |
| 9 | + |
| 10 | +Using `ngDefine` you can leverage [RequireJS](http://requirejs.org/) to define [AngularJS](http://angularjs.org/) modules and their dependencies in a declarative way. The modules can then be published as packages and are (re-)usable in RequireJS applications. |
| 11 | + |
| 12 | + ngDefine('my.module', [ |
| 13 | + './bar', |
| 14 | + 'module:ngResource', |
| 15 | + 'module:my.other.module:my-other-module' |
| 16 | + ], |
| 17 | + function(module) { |
| 18 | + // define the module |
| 19 | + module.value("foo", "bar"); |
| 20 | + }); |
| 21 | + |
| 22 | +`ngDefine` is built as a wrapper around `define` and gives you the same guarantees `define` does with respect to dependency loading (ie. fail if a required dependency could not be loaded). |
| 23 | +At the same time it creates the AngularJS module for you and makes sure that the module dependencies are correctly declared. |
| 24 | + |
| 25 | + |
| 26 | +Sample Application |
| 27 | +------------------ |
| 28 | + |
| 29 | +Have a look at the test suite (`./test`) for a sample application. |
| 30 | + |
| 31 | + |
| 32 | +Building ngDefined applications |
| 33 | +------------------------------- |
| 34 | + |
| 35 | +This will quickly guide you through the neccesary steps to build a application using `ngDefine`. |
| 36 | +We will check out how to employ `ngDefine` to [define AngularJS modules](#AngularJS-Module-Definition), how to [configure RequireJS](#RequireJS-Configuration) to pick up the correct dependencies as well as how to [bootstrap the application](#Application-Bootstrap). |
| 37 | + |
| 38 | + |
| 39 | +### AngularJS Module Definition |
| 40 | + |
| 41 | +AngularJS modules may be declared using `#ngDefine(name, dependencies, callback)`. |
| 42 | +The function accepts the name of the module to be defined or looked up and a callback function that may define or configure the module. |
| 43 | +A (optional) list of arbitrary RequireJS dependencies can be passed that are resolved before the callback function is executed. |
| 44 | + |
| 45 | +The list of dependencies may define AngularJS dependencies in the form `module:{angularModuleName}[:{requirejsPath}]`. |
| 46 | +Each AngularJS module dependency may be specified with an optional path to the RequireJS file defining it. |
| 47 | +Note that if no path is given, the RequireJS path is produced by replacing all `.` with `/`. |
| 48 | + |
| 49 | + ngDefine('app', [ |
| 50 | + // require normal requireJS packages |
| 51 | + 'angular', |
| 52 | + 'jquery', |
| 53 | + |
| 54 | + // require package local files |
| 55 | + './foo', |
| 56 | + |
| 57 | + // require angular modules |
| 58 | + 'module:ngResource', |
| 59 | + 'module:my.module.bar:my-module/bar', |
| 60 | + 'module:my.other.module:my-other-module', |
| 61 | + |
| 62 | + // require without a require js path -> locates the module under foo/baz |
| 63 | + 'module:foo.baz' |
| 64 | + ], |
| 65 | + function(module, angular, jquery) { |
| 66 | + // callback gets passed the defined module as the first parameter, |
| 67 | + // all other objects defined by declared dependencies follow at parameter 1..n |
| 68 | + |
| 69 | + module // --> { .., name: 'app', .. } |
| 70 | + |
| 71 | + // define module now |
| 72 | + module.value("foo", "bar"); |
| 73 | + }); |
| 74 | + |
| 75 | + |
| 76 | +### RequireJS Configuration |
| 77 | + |
| 78 | +As of RequireJS version 2.1.x a require configuration using `ngDefine` / AngularJS may look as follows: |
| 79 | + |
| 80 | + require({ |
| 81 | + paths: { |
| 82 | + // include ngDefine script in path |
| 83 | + 'ngDefine' : 'lib/ngDefine', |
| 84 | + 'angular' : 'lib/angular/angular', |
| 85 | + 'angular-resource' : 'lib/angular/angular-resource' |
| 86 | + 'jquery' : 'lib/jquery/jquery-2.0.0', |
| 87 | + }, |
| 88 | + shim: { |
| 89 | + 'angular' : { deps: [ 'jquery' ], exports: 'angular' }, |
| 90 | + 'angular-resource': { deps: [ 'angular' ] } |
| 91 | + }, |
| 92 | + packages: [ |
| 93 | + // application package |
| 94 | + { name: 'app', location: 'app', main: 'app.js' }, |
| 95 | + |
| 96 | + // other angular modules |
| 97 | + { name: 'my-module', location: 'lib/my-module' }, |
| 98 | + { name: 'my-other-module', location: 'lib/my-other-module' } |
| 99 | + ] |
| 100 | + }); |
| 101 | + |
| 102 | +Note that [jQuery](http://jquery.com/) is an optional dependency and may be excluded from both the path as well as the angular shim configuration. |
| 103 | + |
| 104 | + |
| 105 | +### Application Bootstrap |
| 106 | + |
| 107 | +`ngDefine` defines a global callback that may be used by module definitions. |
| 108 | +That is why bootstrapping must be done in a nested require which makes sure `ngDefine` is loaded prior to all module definitions. |
| 109 | + |
| 110 | +After the application main module is ready, it can be bootstrapped using [`angular.bootstrap(name)`](http://docs.angularjs.org/api/angular.bootstrap). |
| 111 | + |
| 112 | + // require ngDefine and all angular modules you need |
| 113 | + require([ 'ngDefine', 'angular', 'angular-resource' ], function(ngDefine, angular) { |
| 114 | + |
| 115 | + // enable debug to get module dependencies logged |
| 116 | + ngDefine.debug = true; |
| 117 | + |
| 118 | + // require the application |
| 119 | + require('app', function() { |
| 120 | + |
| 121 | + // bootstrap the application |
| 122 | + angular.bootstrap(document.body, ['app']); |
| 123 | + }); |
| 124 | + }); |
| 125 | + |
| 126 | + |
| 127 | +FAQ |
| 128 | +--- |
| 129 | + |
| 130 | +**(1) Why should I use RequireJS? After all, AngularJS includes a dependency injection mechanism, doesn't it?** |
| 131 | + |
| 132 | +AngularJS offers a dependency injection mechanism at runtime. |
| 133 | +When building applications a developer must know which script files to include into his application so that all runtime dependencies are met when the application is bootstrapped. |
| 134 | +AngularJS does not allow application developers to define these dependencies on the file level. |
| 135 | +However, that is exactly what RequireJS does. |
| 136 | + |
| 137 | +`ngDefine` simply employs RequireJS and gives developers the ability to declare AngularJS modules and their dependencies in a portable way. |
| 138 | +This way the modules can be reused and external dependencies can easily be resolved. |
| 139 | + |
| 140 | +**(2) `ngDefine` bridges the gap between RequireJS and AngularJS?** |
| 141 | + |
| 142 | +Not quite, read (1). There is no gap between RequireJS and AngularJS, as both serve different purposes during different stages of the application lifecycle. |
| 143 | +`ngDefine` allows you to leverage the power of both technologies. |
| 144 | + |
| 145 | + |
| 146 | +License |
| 147 | +------- |
| 148 | + |
| 149 | +Use under terms of MIT license. |
0 commit comments