minify化（ファイル圧縮）とは、改行や空白、コメントなどを取り除きファイルサイズを削減することです。一般的にはminify化でファイルのダウンロードを高速化するねらいで活用されるものです。
minify化は色々なサイトでそのサービスを行っていますので使用した方もいることと思います。
圧縮サービスサイト
https://javascript-minifier.com/
AngularJSを活用したサイトは大規模サイトの場合が多く、minify化は必須の条件になってきます。けれどもここで問題が起こります。
minify化は、改行や空白、コメントなどを取り除きファイル要領を小さくしますが、それとは別にJavaScriptでは引数の名前を変更してしまいます。ここで問題が発生します。
例えば次のコントローラーをminify化します。
myApp.controller('mainController', function($scope,$log,$filter) {
$log.info($scope);
});
minify化した結果は次のようになります。
myApp.controller("mainController",function(n,o,l){o.info(n)});
これはエラーになってしまいます。
なぜならfunction内のn,o,lという引数が何かAngularJSは理解できないからです。
ここはDependency Injectionを使ってオブジェクトを読み込んでいるのですから、この引数はAngularJSが知っているオブジェクトの名前でなければならない訳です。
そこで対処方法として配列を使って次のように記述します。
myApp.controller('mainController',['$scope','$log','$filter',function($scope,$log,$filter) {
$log.info($scope);
}]);
これならminify化してもエラーになりません。
minify化した結果は次のようになります。
myApp.controller("mainController",["$scope","$log","$filter",function(o,l,n){l.info(o)}]);
AngularJSは第2引数の配列の文字列部分を引数と見ています。その次にくるfunctionの引数はどのようなものであっても最初の文字列が引数として当てられるのです。
AngularJSを使うときのminify化の注意点ですが、Vanilla JS（笑）を使う際も気をつけておきたいことです。
