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:

angular.module('seedApp', [ //@@NG_ASYNC_LOAD_FILES_START@@ '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' //@@NG_ASYNC_LOAD_FILES_END@@ ])

###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)