103

私はhttp://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.htmlを読んでいますが、javascriptを縮小すると、angularjs依存性注入に問題があることがわかりました。の代わりに

var MyController = function($scope, $http) {
    $http.get('https://api.github.com/repos/angular/angular.js/commits')
      .then(function(response) {
        $scope.commits = response.data
      })
  }

あなたは使うべきです

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

全体的に見て、2番目のスニペットは古いバージョンのangularjs用のものだと思いましたが....

常に注入方法（2番目）を使用する必要がありますか？

javascript angularjs dependency-injection

— ウィシャー
ソース

102

はい、いつも！したがって、ミニファーが$ scopeを変数aに、$ httpを変数bに変換しても、それらのIDは文字列に保持されます。

AngularJSのドキュメントのこのページを参照し、「縮小に関するメモ」までスクロールします。

更新

または、ビルドプロセスでng-annotate npmパッケージを使用して、この冗長性を回避できます。

— セルヴァン・パラニマライ
ソース

これと他のいくつかの問題は、egghead.ioで非常によく説明されています。JFYI

— Wottensprels

@Sprottenwels：うん！そこにはたくさんの役立つリソースがあります。

— Selvam Palanimalai 2013

8

このより冗長な構文を使用する代わりに、縮小を実行する前にngminとビルドツール（Gruntなど）を使用できます。そうすれば、適切に縮小できますが、依存関係注入構文を使用することもできます。

— jkjustjoshing 14

4

縮小に関するメモはここに移動されましたdocs.angularjs.org/tutorial/step_07

— Razvan.432 '26

AngularJS開発者ガイド-Implicit Annotationも参照してください。

— georgeawg 2018

36

2番目のバリアントを使用する方が安全ですが、ngminを使用して最初のバリアントを安全に使用することもできます。

UPDATE：
今すぐNG-注釈は、この問題を解決するための新しいデフォルトのツールになります。

— オズ_
ソース

7

はい、明示的な依存関係注入を使用する必要があります（2番目のバリアント）。しかし、Angular 1.3.1では暗黙的な依存性注入をオフにできるため、（縮小化の前に）名前を一度に変更することで潜在的な問題を解決することは非常に役立ちます。

strictDiconfigプロパティを使用して、暗黙のDIをオフにします。

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

ng-strict-diディレクティブを使用して、暗黙のDIをオフにします。

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

— dizel3d
ソース

7

あなたが使うなら

ヨマン

のようにする必要はありません

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

minify中のうなり声はDIの管理方法を考慮に入れるためです。

— ウィシャー
ソース

1

OZ_が言ったように、ngminを使用して、directive.js service.jsのようなすべての角度のjsファイルを縮小します。その後、Closureコンパイラを使用して最適化できます。

ref：

angularjsスクリプトを縮小する方法

YOで構築する

— fxp
ソース

0

ここ$injectで言及されているように使用することもできます。

MyController.$inject = ['$scope', '$http'];

function MyController($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}

— IDなし
ソース

0

厳密な依存性注入を使用して問題を診断する

暗黙の注釈縮小されると、コードが解除されます。

ドキュメントから：

暗黙の注釈

注意：コードを縮小する場合は、サービス名が変更され、アプリが破損します。

厳密なDIモードにオプトインする場合ng-strict-diと同じ要素にディレクティブを追加できng-appます。

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

Strictモードは、サービスが暗黙の注釈を使用しようとするたびにエラーをスローします。

これは、問題の発見を判断するのに役立ちます。

詳細については、

— ジョージ
ソース

Angularjsはベストプラクティスを縮小します

厳密な依存性注入を使用して問題を診断する

暗黙の注釈