angular-grunt-build v0.1.1
angular-grunt-build
A Grunt plugin that allows to write code using modular structure without including dependency names.
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.
Installation
To install plugin using npm run this command:
npm install angular-grunt-build
Getting Started
Gruntfile
Once the plugin has been installed, it may be enabled inside your Gruntfile:
grunt.loadNpmTasks('angular-grunt-build');
Next, add a section named angular_build
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
angular_build: {
your_target: {
source: 'source directory of a project, e.g. app or <%= app.src %>',
destination: 'directory where result will be generated',
appName: 'your application name, e.g. myApp'
},
},
});
So your Gruntfile should look like this:
module.exports = function (grunt) {
grunt.loadNpmTasks('angular-grunt-build');
grunt.initConfig({
app: appConfig,
angular_build: {
dist: {
appName: 'myApp',
source: 'app',
destination: 'public'
}
}
});
grunt.registerTask('default', ['angular_build:dist']);
};
Project structure
In the root of your app source folder you need to add the app.js
file like this:
angular.module('myApp', [/* list of used modules */]);
You can also add bootstrap.js
file:
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
Next, you have the following list of permitted folder names to get the MVC-like structure:
- configs
- constants
- controllers
- directives
- filters
- models
- runs
- services
All listed folders are able to place appropriate Angular files in it (model
and service
are just other names for factory
).
Files in folders should look like this:
var <controller/directive/etc name> = function (/* list of dependencies, e.g. $scope */) {
/* your code below */
};