grunt-angular-async-loader v0.1.13
grunt-angular-async-loader
A grunt task to update the async loader and files to be loaded in angular projects from a json file.
Getting Started
This plugin requires Grunt ~0.4.5
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-angular-async-loader --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-angular-async-loader');
The "angular_async_loader" task
Overview
See this angular seed app for demonstration of this plugin: https://github.com/project-builder/project-builder-angular-seed.git
Sample architecture for application files:
src
|_ projectBuilder-seedApp.json
|_ app.js
In root directory of each of your projects, place a projectBuilder-[app name].json
file.
Inside this file, place a node that has an array of files that need
to be added to the file that contains your async loader script. The contents look like this, for example:
{
"ngAsyncLoadFiles-seedApp": [
"bower_components/angular/angular.js",
"bower_components/angular-route/angular-route.js",
"app.js",
"views/view1/view1.js",
"views/view2/view2.js",
"components/version/version.js",
"components/version/version-directive.js",
"components/version/interpolate-filter.js"
]
}
In your project's Gruntfile, add a section named ngAppDepModuleUpdate
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
ngAsyncLoader: {
seedApp: {
cwd: paths.src,
angularLoaderSrc: 'lib/bower_components/angular-loader',
src: 'projectBuilder-seedApp.json',
srcId: 'ngAsyncLoadFiles-seedApp',
dest: 'index.html'
}
},
});
In your async script loader, wrap your files list with the //@@NG_ASYNC_LOAD_FILES_START@@
and //@@NG_ASYNC_LOAD_FILES_END@@
comments:
###API
####cwd
The directorry to your application where your target files are located.
####angularLoaderSrc
The location where angular-loader.min.js and angular-loader.min.js.map are located.
####src
The json file containing an array of file and modules you want to write to your html file.
####srcId
The key in the json file which contains the array of modules yout want to load.
####dest
The target html file to write the loader and modulee.
When you run the grunt task, this list will be replaced by the projectBuilder-[app name].json
file "ngAsyncLoadFiles-seedApp" object.
To run the task
grunt ngAsyncLoader
Or for the seedApp project.
grunt ngAsyncLoader:seedApp
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
(Nothing yet)