5

サーバーでAngularJSフロントエンドを実行しようとしています。私はYeomanを使用してアプリを構築しています。非常に基本的なhelloworldアプリをアップロードすると、JavaScriptがロードされていないプレーンなHTMLテキストが表示されます。Chromeのコンソールはこれを言います：

Error: Unknown provider: aProvider <- a
    at Error (<anonymous>)
    at http://../scripts/vendor/d10639ae.angular.js:2627:15
    at Object.getService [as get] (http://../scripts/vendor/d10639ae.angular.js:2755:39)
    at http://../scripts/vendor/d10639ae.angular.js:2632:45
    at getService (http://../scripts/vendor/d10639ae.angular.js:2755:39)
    at invoke (http://../scripts/vendor/d10639ae.angular.js:2773:13)
    at Object.instantiate (http://../scripts/vendor/d10639ae.angular.js:2805:23)
    at http://../scripts/vendor/d10639ae.angular.js:4620:24
    at update (http://../scripts/vendor/d10639ae.angular.js:13692:26)
    at http://../scripts/vendor/d10639ae.angular.js:8002:24 d10639ae.angular.js:5526

同じことを経験し、抜け道を知っている人はいますか？

編集：

'use strict';

yoAngApp.controller('MainCtrl',['$scope', '$window', function($scope, $window) {
    $scope.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Testacular'
    ];

    $scope.records = [{ title : 'one' }, { title : 'two' }, { title : 'three' }, { title : 'four' }];

    $scope.greet = function() {
        ($window.mockWindow || $window).alert('Hello ' + $scope.name);
    }
}]
);
4

2 に答える 2

8

本番サーバーにコードミニファイアを使用したことは間違いありませんね。

とにかく、Angular Jsの人々は、ミニファイアを使用すると、適切に行われなかった場合に依存性注入を台無しにする可能性があることをかなり明確にしました。なぜこれが起こるのですか？見てください：

依存性注入とコードミニファイア

function MyController($scope, $log) { ... }

上記のスニペットでは、暗黙のDIを使用しています。Angularは変数$scopeを確認し、それを管理対象の依存関係と一致させようとします。この例では、$scopeオブジェクトと一致します。

ただし、これはコードの縮小後には機能しません。結果は次のようになります。

function a(b, c) { ... }

変数名と関数名が縮小されたため、Angularは「a」が正確に何であるかを知ることができません。

解決

明示的な依存性注入構成を使用します。

var MyController = function($scope, $log) { ... }
MyController.$inject = ['$scope', '$log'];

このスニペットでは、名前の配列をコントローラー（またはサービス）の特別なプロパティにアタッチすることで、どの依存関係を解決する必要があるかを定義しています$inject。これで、Angularはそれを解決$scopeし、最初のパラメーターとしてに渡す必要があることを認識しますMyController。次に、それを解決$logし、2番目のパラメーターとして渡します。ミニファイアは文字列変数の内容を変更しないため、すべて可能です。

于 2013-03-19T10:40:17.823 に答える
4

@ŁukaszBachmanが提案したように、必要に応じて$ injectアノテーションを使用するか、インラインアノテーションを使用できます。

  1. 依存関係のアノテーションを関数定義に近づけてください（読みやすくするため）。
  2. グローバル名前空間を汚染しないようにします。

 

app.controller('UsersController',
  [
    '$scope', 'UserService', '$location', '$routeParams',
    function($scope, User, $location, $routeParams) {
      $scope.user = User.get({id: $routeParams.id});
      ...
    }
  ]
);
于 2013-03-19T12:01:22.290 に答える