• Home
  • blog
  • 5 Minutes to Min-Safe Angular Code with Grunt

5 Minutes to Min-Safe Angular Code with Grunt

Optimizing page speed is undoubtedly a primary focus for any developer building web applications. Task runners such as Grunt can play a pivotal role in the development process as they automate the activities of code concatenation and minification, which will be the main topics of this tutorial. Specifically, we’re going to use a set of Grunt plugins that will ensure our AngularJS application is safe for minification. Before I begin to discuss about AngularJS and minification, I want to highlight that developers of all skill levels can benefit from this tutorial, however basic knowledge of Grunt is desirable. In this article, we’ll be generating new folders with Grunt, so those new to using task runners will get a nice feel for how things work.

The Problem with Minifying Angular Applications

AngularJS applications are not min-safe by default. They must be written using the array syntax. Don’t worry if you’re confused as to what the array syntax exactly is, you have probably already written code that utilizes it. Let’s take a look at two examples of AngularJS controllers that are being passed the $scope and $http parameters.

In the first example below, the module’s factory and controller are wrapped in arrays that begin with DI annotations, and as you can see it does not follow the DRY (Don’t Repeat Yourself) principle.

Continue reading %5 Minutes to Min-Safe Angular Code with Grunt%