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)