This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay
    This lesson is outdated. Click here to find out about changes you should be aware of.

    ngmin

    John LindquistJohn Lindquist

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss