Update loader and js files to load in the angular seed project architecture.
npm install grunt-angular-async-loader> A grunt task to update the async loader and files to be loaded in angular projects from a json file.
~0.4.5If 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:
``shell`
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:
`js`
grunt.loadNpmTasks('grunt-angular-async-loader');
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().
`js`
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.
```
grunt ngAsyncLoader
Or for the seedApp project.
grunt ngAsyncLoader:seedApp