web-dev-qa-db-ja.com

AngularでBluebirdを使用するにはどうすればよいですか？

私はAngularをBluebirdの約束と一緒に使ってみました：

HTML：

<body ng-app="HelloApp">
    <div ng-controller="HomeController">{{name}} {{also}}</div>
</body>

JS：

// javascript
var app = angular.module('HelloApp', []);

app.controller("HomeController", function ($scope) {
    var p = Promise.delay(1000).then(function () {
        $scope.name = "Bluebird!";
        console.log("Here!", $scope.name);
    }).then(function () {
        $scope.also = "Promises";
    });
    $scope.name = "$q";
    $scope.also = "promises";
});

window.app = app;

[ Fiddle ]

しかし、何を試しても、それは"$q promises"と更新されませんでした。マニュアルを追加した場合を除いて$scope.$apply避けたい。

BluebirdをAngularJSと連携させるにはどうすればよいですか？

（私は$ qがそれをするのでそれが可能であることを知っています）

私が入手したBluebird 2.0を使用しています here 。

javascriptangularjspromisebluebirdangular-promise
45
Benjamin Gruenbaum

これは可能で、非常に簡単です！

まあ、 Angular自身のプロミスがどのように機能するか を見ると、まったく同じ動作をするためにBluebirdをどこかで_$evalAsync_にする必要があります。

その場合、両方の実装が Promises/A + に準拠しているという事実は、_$q_コードとBluebirdコードを相互運用できることを意味します。つまり、AngularコードでBluebirdのすべての機能を使用できます自由に。

Bluebirdは、 _Promise.setScheduler_ 機能でこの機能を公開します。

_// after this, all promises will cause digests like $q promises.
function trackDigests(app) {
    app.run(["$rootScope",function ($rootScope) {
        Promise.setScheduler(function (cb) {
            $rootScope.$evalAsync(cb);
        });
    }]);
}
_

今、私たちがしなければならないすべては、以下を追加することです：

_trackDigests(app); 
_

_var app = ..._行の後の行。すべてが期待どおりに機能します。ボーナスポイントとして、Bluebirdをサービスに配置して、グローバル名前空間で使用するのではなく注入できるようにします。

これはこの動作を示す[ Fiddle ]です。

Bluebirdが_$q_よりも優れているすべての機能に加えて、Bluebirdがnot_$exceptionHandler_を実行する代わりに、未処理の拒否を自動的に追跡するため、Bluebirdの約束を自由にthrowでき、Bluebirdはそれらを理解します。さらに、Promise.longStackTraces()を呼び出すと、多くのデバッグに役立ちます。

61
Benjamin Gruenbaum

ライブラリ Angular bluebird promises は、$qサービスをbluebirdに置き換えます。 $httpもbluebirdを通過します

0
Sel