Automatically sort and inject AngularJS app files depending on module definitions and usage
This plugin requires Grunt ~0.4.5
It is based on gulp-angular-filesort
and wiredep
It will sort and inject javascript angular files into files that you need (HTML, Jade, and TXT are currently supported) if some javascript files are not for angular they will be added at the end of the files list.
/!\ Jade is recognised by the plugin but the injection does not handle right indent. HTML is preferred for inject
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-file-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-file-loader');
In your project's Gruntfile, add a section named angularFileLoader
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
angularFileLoader: {
options: {
scripts: ['*.js']
},
your_target: {
src: ['index.html']
}
}
});
Before running task
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- angular -->
<!-- endangular -->
</body>
</html>
doctype
html(lang='en')
head
meta(charset='UTF-8')
title Document
body
// angular
// endangular
// angular
// endangular
After task run
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- angular -->
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/module.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/module-controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/.." type="text/javascript"></script>
<!-- endangular -->
</body>
</html>
doctype
html(lang='en')
head
meta(charset='UTF-8')
title Document
body
// angular
script(src='app.js', type='text/javascript')
script(src='module.js', type='text/javascript')
script(src='module-controller.js', type='text/javascript')
script(src='...', type='text/javascript')
// endangular
// angular
app.js
module.js
module-controller.js
...
Type: String
Default value: 'angular'
Tag used to identify the block's beginning where files had to be injected.
Type: String
Default value: 'endangular'
Tag used to identify the block's ending where files had to be injected.
Type: String | Array | Object
Default value: 'null'
Script Files to inject into html/jade/txt file.
Type: Boolean | String
Default value: 'true'
When set to true
path to script files will be rewritten to be relative to html/jade/txt file.
When set to false
path to script files will be rewritten to be relative to Grunfile.js
When set to a String path to script files will be rewritten to be relative to the specified file/directory
Type: String
Default value : ''
Add the value before each injected script.
For all examples below consider the following structure :
.
├───.tmp
│ └─── index.html
│
├─── app
│ └─── scripts
│ ├─── app
│ │ ├─── part1
│ │ │ ├─── part1.js
│ │ │ └─── part1.controller.js
│ │ ├─── part2
│ │ │ ├─── part2.js
│ │ │ └─── part2.controller.js
│ │ └─── part3
│ │ ├─── part3.js
│ │ └─── part3.controller.js
│ │
│ ├─── components
│ │ ├─── directive
│ │ │ ├─── directive1.js
│ │ │ └─── directive1.controller.js
│ │ ├─── service
│ │ │ └─── service.js
│ │ ├─── filter
│ │ │ └─── filter.js
│ │ └─── factory
│ │ └─── factory.js
│ │
│ └─── app.js
│
└─── Gruntfile.js
In this example, the default options are used, after ./app/scripts/**/*.js
had been sorted they are injected into index.html
between <!-- angular -->
and <!-- endangular -->
grunt.initConfig({
angularFileLoader: {
options: {
scripts: ['app/scripts/**/*.js']
},
default_options: {
src : '.tmp/index.html'
},
},
});
Before
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- angular -->
<!-- endangular -->
</body>
</html>
After
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- angular -->
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/./app/scripts/app/app.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/./app/scripts/components/factory/factory.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/./app/scripts/components/filter/filter.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/./app/scripts/components/directive/directive.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/./app/scripts/components/directive/directive.controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/./app/scripts/components/service/service.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/./app/scripts/app/part1/part1.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/./app/scripts/app/part1/part1.controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/./app/scripts/app/part2/part2.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/./app/scripts/app/part2/part2.controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/./app/scripts/app/part3/part3.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/./app/scripts/app/part3/part3.controller.js" type="text/javascript"></script>
<!-- endangular -->
</body>
</html>
In this example, the relative options is set to false
, after ./app/scripts/**/*.js
had been sorted they are injected into index.html
between <!-- angular -->
and <!-- endangular -->
grunt.initConfig({
angularFileLoader: {
options: {
scripts: ['app/scripts/**/*.js'],
relative: false
},
default_options: {
src : '.tmp/index.html'
},
},
});
Before
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- angular -->
<!-- endangular -->
</body>
</html>
After
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- angular -->
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app/scripts/app/app.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app/scripts/components/factory/factory.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app/scripts/components/filter/filter.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app/scripts/components/directive/directive.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app/scripts/components/directive/directive.controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app/scripts/components/service/service.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app/scripts/app/part1/part1.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app/scripts/app/part1/part1.controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app/scripts/app/part2/part2.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app/scripts/app/part2/part2.controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app/scripts/app/part3/part3.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/app/scripts/app/part3/part3.controller.js" type="text/javascript"></script>
<!-- endangular -->
</body>
</html>
In this example, the relative options is set to app
directory, after ./app/scripts/**/*.js
had been sorted they are injected into index.html
between <!-- angular -->
and <!-- endangular -->
grunt.initConfig({
angularFileLoader: {
options: {
scripts: ['app/scripts/**/*.js'],
relative: 'app'
},
default_options: {
src : '.tmp/index.html'
},
},
});
Before
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- angular -->
<!-- endangular -->
</body>
</html>
After
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- angular -->
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/app.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/components/factory/factory.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/components/filter/filter.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/components/directive/directive.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/components/directive/directive.controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/components/service/service.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/part1/part1.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/part1/part1.controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/part2/part2.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/part2/part2.controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/part3/part3.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/part3/part3.controller.js" type="text/javascript"></script>
<!-- endangular -->
</body>
</html>
In this example, the prefix options is set to /
each script that will be injected will get /
at the beginning of its path.
grunt.initConfig({
angularFileLoader: {
options: {
scripts: ['app/scripts/**/*.js'],
relatice: 'app',
prefix : '\'
},
default_options: {
src : '.tmp/index.html'
},
},
});
Before
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- angular -->
<!-- endangular -->
</body>
</html>
After
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- angular -->
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/app.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/components/factory/factory.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/components/filter/filter.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/components/directive/directive.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/components/directive/directive.controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/components/service/service.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/part1/part1.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/part1/part1.controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/part2/part2.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/part2/part2.controller.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/part3/part3.js" type="text/javascript"></script>
<script src="https://github.com/AntoineMary/grunt-angular-file-loader/raw/master/scripts/app/part3/part3.controller.js" type="text/javascript"></script>
<!-- endangular -->
</body>
</html>
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.