Write AngularJS Modules Once. Build with RequireJS (AMD), Browserify (CommonJS), or simply concat.
MIT License
Write AngularJS Modules Once. Build with RequireJS (AMD), Browserify (CommonJS), or simply concat.
Using a Simple Example as the input:
These demos may need to be refreshed upon loading.
This plugin requires Grunt ~0.4.1
Install the plugin:
$ npm install grunt-angular-modularize --save-dev
Enable the plugin within your Gruntfile.js
grunt.loadNpmTasks('grunt-angular-modularize');
admin.controllers.home
may reside in public/scripts/admin/controllers/home.js
)admin
instead of app
).admin.js
) should live within a folder of that namespace and not outside of it.path/to/src/admin/admin.js
alongside path/to/src/admin/controllers/home.js
)You'll end up with files that are really light & clean like:
// path/to/src/admin/admin/controllers/home.js
angular
.module('admin.controllers.home')
.controller('HomeController', [
'$scope',
function($scope) {
...
}
])
;
Gruntfile.js
See the options below for detailed usage for each option*.
ngmodularize: {
admin: {
options: {
format: 'amd', // Can be `cjs` for CommonJS
requires: ['admin'], // Used for RequireJS's `main` file...
paths: { //
admin: 'admin' //
} //
},
src: 'path/to/src/admin.js', // admin entry-point
dest: 'path/to/build/admin.js' // AMD-version of admin entry-point
}
}
grunt ngmodularize
$ grunt ngmodularize
This will automatically traverse the entry-point specified in src
for all
dependencies with a known path (via paths
) and write out the corresponding
structure alongside the dest
file.
If you're using grunt-contrib-requirejs (AMD) or grunt-browserify (CommonJS), their tasks are automatically configured for you!
Simply run the appropriate command:
$ grunt ngmodularize requirejs
or
$ grunt ngmodularize browserify
Couple this with grunt-angular-templates, and your entire application can be reduced to one or two HTTP requests!
With a properly structured app (one module per file), AngularJS's DI handles dependency ordering for you.
Simply add the following to your Gruntfile.js
:
concat: {
admin: {
src: 'path/to/src/admin/**/*.js',
dest: 'path/to/build/admin/admin.build.js'
}
},
Now, your index.html
only has to reference one script from now on:
<script src="path/to/build/admin/admin.build.js"></script>
Couple the concat
task or a <script>
tag with grunt-angular-templates,
and avoid HTTP requests for your templates.
Simply add the following to your Gruntfile.js
:
ngmodularize: {
admin: {
options: {
format: 'amd',
requires: ['admin/admin'], // Entry-point: `path/to/src/admin/admin.js`
paths: {
admin: '../admin' // Namespace path: `path/to/src/admin/*`
}
},
src: 'path/to/src/admin/admin.js',
dest: 'path/to/build/admin/admin.js'
}
}
Now your modules will look like:
define([...], function() {
...
});
Additionally, alongside your admin/admin.js
, there will be a RequireJS
admin/main.js
, which is automatically configured for AngularJS to work
with RequireJS!
Add the following to your index.html
:
<script src="path/to/bower_components/requirejs/require.min.js"></script>
<script src="path/to/build/admin/main.js"></script>
Later, when you optimize with $ grunt ngmodularize requirejs
, your HTML can then have:
<script src="path/to/build/admin/main.dist.js"></script>
Notice the .dist.js
extension? This is automatically configured in the requirejs
target for you!
But what about using RequireJS to require vendor dependencies, such as
angular
,require
,bootstrap
, and other stuff!?
Vendors are external, application dependencies that should exist in the environment. That's what NPM & Bower are for. Those problems are solved.
$ grunt browserify
to run in the client.Simply add the following to your Gruntfile.js
:
ngmodularize: {
admin: {
options: {
format: 'cjs',
paths: {
admin: '../admin' // Root path when generating other `require(...)`s
}
},
src: 'path/to/src/admin/admin.js',
dest: 'path/to/build/admin/admin.js'
},
}
Now, you only need the following in your index.html
:
<script src="path/to/build/admin/admin.js"></script>
Later, when you optimize with $ grunt ngmodularize browserify
,
your HTML can then have:
<script src="path/to/build/admin/admin.dist.js"></script>
Again, the configuration of the browserify
task has been handled for you
to create a .dist.js
version.
See the Examples for actual use-cases.
Module format to convert to
amd
: RequireJS (AMD)cjs
: Browserify (CommonJS)Namespaces & their corresponding paths, relative to the entry-point
paths: {
'admin.controllers': '../admin/ctrls',
'admin': '../admin'
}
In this example, the module admin
would expect to be found at admin/admin.js
,
while admin.controllers.home
would be found at admin/ctrls/home.js
.
Whichever namespace matches the module first wins.
In the event you don't have an explicit folder for your application
(e.g. everything lives in /scripts
), then you can use the following:
paths: {
'admin': '.'
}
In this example, the admin
modules would be found in scripts/admin.js
,
while admin.controllers.home
would be found in scripts/controllers.home
.
By specifying the root of the admin
namespace as the current folder (.
),
the namespace has been effectively nullified.
Array of RequireJS paths to require.
You usually only need to put in the web-accessible relative path to the entry-point of your application.
Copyright (c) 2014 Eric Clemmons Licensed under the MIT license.