current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Using angularJS is great. Although i see a problem in that i have the following files:

  • app.js
  • controllers.js
  • filters.js
  • directives.js
  • services.js

That along with the actually AngularJS library files and perhaps jQuery is allot of http requests to the server.

Is there a way to combine all these together for a production environment? More to the point is there a specific AngularJS recommended way to do this?

share|improve this question
    
What are you using for server side? –  James Kleeh Jul 4 '13 at 3:08
    
Laravel 4 (PHP) –  AndrewMcLagan Jul 4 '13 at 3:24
add comment

2 Answers

up vote 1 down vote accepted

The Grunt.js project is able to execute tasked commands such as minification and concatenation as I described above. The two grunt.js plugins with the widest support for these tasks are:

  • Uglify (minification)
  • Concat (file concatenation)

below is a sample task script for these:

module.exports = function(grunt) {

  grunt.initConfig({
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['assets/**/*.js'],
        dest: 'assets/js/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'assets/js/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('default', ['concat', 'uglify']);

};

I dont usually answer my onw questions although i believe that relying on a server to compile, cache and check cached versions is not the way to go. Unnecessary processors and systems to maintain on a production environment.

share|improve this answer
add comment
up vote 0 down vote

Combining and minification of script is mostly done on server. Different technologies\tools provide different mechanism to support this feature. I dont think it is a AngularJS concern.

The only thing you need to take care if using minification is dependency injection can break in Angular. So this form of DI would be preferred.

app.controller('myController',['dependency1',
    function(dependency1) {
    }
]);
share|improve this answer
    
yeah im aware that this is outside the domain of AngularJS. Although im looking for suggestions on how to carry out this task. I would like to steer away from server side asset compilation / minification and more towards production compilation / minification. –  AndrewMcLagan Jul 4 '13 at 5:39
    
What is the difference between server side and production compilation? –  Chandermani Jul 4 '13 at 5:45
    
If you are thinking that the server has to process the files to generate the minified version, then that is not the case. The minification on the server happens one time (using some tool) and is not done with each request. So actual server processing is not affected. –  Chandermani Jul 4 '13 at 11:17
    
Yes. But simple to reduce systems that i have to maintain, i would prefer to have a build script that is executed prior to pulling changes into a production branch. I understand that there are ways to setup an automatic build with caching. I have since discovered grunt.js –  AndrewMcLagan Jul 4 '13 at 11:22
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.