Skip to content
This repository was archived by the owner on Oct 10, 2022. It is now read-only.

Commit 1019d42

Browse files
committed
chore(project): initial commit
0 parents  commit 1019d42

25 files changed

+31682
-0
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
build/

Gruntfile.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
module.exports = function(grunt) {
2+
3+
// Project configuration.
4+
grunt.initConfig({
5+
pkg: grunt.file.readJSON('package.json'),
6+
uglify: {
7+
options: {
8+
banner: '/** ngDefine v1.0.0 | (c) Nico Rehwaldt <http://github.com/Nikku>, 2013 | license: MIT */\n'
9+
},
10+
build: {
11+
src: 'src/ngDefine.js',
12+
dest: 'build/ngDefine.min.js'
13+
}
14+
}
15+
});
16+
17+
// Load the plugin that provides the "uglify" task.
18+
grunt.loadNpmTasks('grunt-contrib-uglify');
19+
20+
// Default task(s).
21+
grunt.registerTask('default', ['uglify']);
22+
23+
};

LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2013 Nico Rehwaldt
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

README.md

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
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

Comments
 (0)