ngmin

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 11 years ago
Updated 5 years ago

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

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.

egghead
egghead
~ 11 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today