Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 829 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



ngmin

3:28 Angular 1.x lesson by

ng-min has been deprecated. Use ng-annotate instead!

Checkout out this lesson on ng-annotate for your min-safe AngularJS needs.

ng-min removes the headache of needing to associate strings with parameter names for minified AngularJS code.

Get the Code Now
click to level up

ng-min has been deprecated. Use ng-annotate instead!

Checkout out this lesson on ng-annotate for your min-safe AngularJS needs.

egghead.io comment guidelines

Avatar
egghead.io

ng-min removes the headache of needing to associate strings with parameter names for minified AngularJS code.

Avatar
Nick

It looks like ng-min is now deprecated and replaced with ng-annotate: https://github.com/olov/ng-annotate

It solves the same goal, but 'better' according to the docs.

In reply to egghead.io

John Lindquist: Ngmin is a tool that helps prepares your angular code to be minified. So if you write something like a service, let's say this is a store that has some products with an item that's an Apple or something and on the right is the result of using ngmin. You'll see there is absolutely no change there, just kind of removes some white space. If you are at a controller that control then you run ngmin again, you'll see that there's no change.

Now, where ngmin really kicks in is when you start using injection. So we are going to inject the service into the controller and you'll see here that it has switched this over to the array syntax for injection which passes a string of store. The ray is a parameter, then the string is the first value, and then the function is the second. It knows to look up this service by the string and then use that as the first value.

Similarly, if I were to do something like scope and then, let's see, scope product = store products, you'd see that the result is still an array with scope and store and scope and store. Now, this isn't a special syntax or anything. This is just a long hand way of writing injection if you wanted to do it and enforce those rules instead of having the special magical way that Angular looks these up.

Now, the reason you need to use this before minifying is if we compare the output of these two, one being the output of running UglifyJS on the pre-ngmin and this one being running UgilfyJS on the post ngmin. These are both minifyers. I just haven't stripped the white spaces. It's unifying and minifying.

So before ngmin, this would actually pass P and R because it changes the variable names if you use the parameter mangling, variable mangling. So P and R that's not going to work when it's trying to look up store because a minifyer will probably rename your variables and shorten them.

But on the right hand side if you use ngmin, it's still going to keep scope and store as the string values that they were. Then P and O here are going to work just fine. Because it knows that P is scope and that O is store. So that when it assigns these later on, it knows exactly what they are.

So that's what ngmin does for you. It just prepares you to minify so that injection stays intact and you don't lose the lookup that happens behind the scenes.

Now, the syntax for using ngmin is very simple. It's just ngmin, the file you want to minify... or to use ngmin on, you are not actually minifying...then the output file on the docs for ngmin. It usually says .annotate or .annotate.js.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?