AngularJS 圧縮 JS のヒントの分析

この記事の例では、JSを圧縮するAngularJSの操作テクニックを説明します。参考までに皆さんと共有してください。詳細は次のとおりです:

ほとんどの Web プロジェクトは、js ファイルのサイズを削減し、トラフィックを節約するために、公開時に js コードを圧縮します。

原理は非常に簡単で、パラメーター、いくつかの変数名、関数の名前を変更することです。

ただし、AngularJS アプリケーションでのこの作業方法には例外があります。

AngularJS の依存関係注入はパラメータ名に基づいて注入されるため、明らかにパラメータの名前を変更するとこのメカニズムが破壊されます。

特別な処理を行わない場合、圧縮(minify)後、実行時にこのようなエラーが発生します

不明なプロバイダ: aProvider<-a

このエラーの正式な説明は次のとおりです: 依存するサービスが見つかりません

つまり、この種の依存関係の挿入によりエラーが発生します。

幸いなことに、AngularJS にはこの問題を処理する標準メカニズムが組み込まれています。

最も簡単で一般的な方法は、関数の代わりに配列を使用することです。例:

.controller('RegisterCtrl', ['$scope', '$interval', '$timeout', function ($scope, $interval, $timeout) {
  //do something
}]);

配列の最後の要素は常に関数であり、最初のいくつかのパラメータはすべて文字列であり、この関数のパラメータに対応します。

もう 1 つの形式は、いわゆるアノテーション メソッドです。

var objCtrl = function($scope, $timeout, $interval){
  // do something
}
//给objCtrl函数增加一个$inject属性，它是一个数组，定义了需要被注入的对象
objCtrl.$inject = ['$scope', '$interval', '$timeout'];

など

ここでの依存関係注入の形式は、コントローラーに限定されず、DI を必要とするすべてのもの (依存関係注入のためのディレクティブ、ファクトリー、サービスなど) がこれら 2 つの方法を使用できます。