angular-grunt-build

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 */
};