web-dev-qa-db-ja.com

AngularJS Strict DIモードの利点は何ですか？

最近、AngularJS Strict DIモードに遭遇しました。それを使用する目的と利点は何ですか？特にモバイルデバイスで使用することで、パフォーマンスが大幅に向上しますか？

私はそれを自分のコードに適用しようとしましたが、コードを書くときに注釈をしませんでした。ただし、コードを縮小してビルド中にng-annotateする必要があります。しかし、なぜコードにStrict DIモードを追加した後も、「明示的な注釈が必要です」というエラーが表示されるのはなぜですか？

javascriptangularjsdependency-injection
19
user1995781

Strict DI Modeは基本的に、実行時に縮小化に準拠していないコードが見つかった場合にエラーをスローします。ただし、コードは正しい場合があり、論理構文エラーがないことに注意してください。

ドキュメントの引用：

この属性がapp要素に存在する場合、インジェクターは「strict-di」モードで作成されます。これは、依存性注入ガイドで説明されているように、アプリケーションが明示的な関数注釈を使用しない（したがって、縮小には適さない）関数の呼び出しに失敗し、有用なデバッグ情報が追跡を支援することを意味しますこれらのバグの根源。

たとえば、このコードは、_($scope, $http, $filter)_が_$inject_を使用して明示的に挿入されたり、.controller(A,B)メソッドに2番目のフィールドとして配列を与えたりしないため、エラーをトリガーします。

_angular.module("myApp", [])
// BadController cannot be invoked, because
// the dependencies to be injected are not
// explicitly listed.
.controller("BadController", function($scope, $http, $filter) {
  // ...
});
_

右スニペット：

_angular.module("myApp", [])
  .controller("GoodController1", GoodController1);

GoodController1.$inject = ["$scope", "$http", "$filter"];

function GoodController1($scope, $http, $filter){}
_

または：

_angular.module("myApp", [])
  .controller("GoodController1", 
              ["$scope", "$http", "$filter", function ($scope, $http, $filter){
     //...
}]);
_

あなたの質問に答えるために、それを使用することによる大きなパフォーマンスの改善はありません。それはあなたにミニファイアビリティエラーの安全性を与えるだけです。これは、たとえば、明示的な注釈なしで_$scope_を使用すると、コードを壊す変数名が変更されるためです。

33
morels

次のようにstrict-diを追加することもできます：

 angular.bootstrap(document, ['app'], {
        strictDi: true
    });

angular meteor es6タイプのアプリケーションを使用する場合。

6
Milean

Angular strict DIはコードの最小化を強制します。

コードを縮小すると、パラメーターの名前が短くなり、angularのDIが壊れます。その問題に対抗するために、angularは、依存関係を追加するための2つの代替方法を追加しました（たぶんさらに多くの場合）。

おそらく最も一般的な方法であり、ng-annotateで使用される方法は、2番目のパラメーターとして関数ではなく配列を配置することです。依存関係は、配列の最後の要素の前の文字列であり、文字列は依存関係の名前です。

controller.$inject(['$scope']);

angular.module('app', ['dependency']).controller('myCtrl', ['myFirstDep',
function(willBeInjectedHere){}])

angularがチェックする前に、ng-annotateが実行されていない可能性があります。アノテーションとともにuglifyを実行していないことを確認してください。明示的に実行する前に実行してください。コードがエラーをスローしている場合は、おそらくアノテーションが作成されていない場所があるでしょう。

6
Olavi Sau

strict-diを使用することをお勧めします。明示的な関数アノテーションを使用しない関数を呼び出すと、アプリの実行が失敗する必要があります。つまり、使用するメソッドを宣言する必要があります。 ng-strict-diを使用すると、依存性注入ガイドラインでアプリが確実に確認され、そうでない場合は実行に失敗します。

これは、ng-strict-diを使用して実現できます。

<html ng-app="myApp" ng-strict-di>

開発者ガイドを参照： https://docs.angularjs.org/guide/di

4
user4565643