wake-up-neo.com

Wie verwende ich Bluebird mit Angular?

Ich habe versucht, Angular mit den Bluebird-Versprechen zu verwenden:

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 ]

Egal was ich ausprobierte, es blieb "$q promises" und wurde nicht aktualisiert. Außer wenn ich ein Handbuch $scope.$apply hinzugefügt habe, das ich lieber vermeiden möchte.

Wie kann ich Bluebird dazu bringen, mit AngularJS zusammenzuarbeiten?

(Ich weiß, es ist möglich, da $ q es tut)

Ich verwende Bluebird 2.0, das ich hier erhielt.

44

Das ist möglich und sogar ganz einfach!

Nun, wenn wir uns anschauen, wie Angulars eigene Versprechen funktionieren , müssen wir Bluebird irgendwo zu $evalAsync bringen, um dasselbe Verhalten zu erhalten.

Wenn wir das tun, sind beide Implementierungen Promises/A + - konform, was bedeutet, dass wir zwischen $q-Code und Bluebird-Code wechseln können, was bedeutet, dass wir alle Funktionen von Bluebird im Angular -Code frei verwenden können.

Bluebird stellt diese Funktionalität mit der Promise.setScheduler -Funktionalität zur Verfügung:

// 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);
        });
    }]);
}

Jetzt müssen wir nur noch folgendes hinzufügen:

trackDigests(app); 

zeile hinter der var app = ...-Zeile, und alles funktioniert wie erwartet. Um Bonuspunkte zu erhalten, fügen Sie Bluebird in einen Dienst ein, sodass Sie ihn einbetten können, anstatt ihn im globalen Namespace zu verwenden. 

Hier ist ein [ Fiddle ], das dieses Verhalten veranschaulicht. 

Beachten Sie, dass Bluebird neben all den Funktionen, die über $q hinausgehen, eine der wichtigsten Funktionen ist, dass Bluebird nicht ausgeführt wird, $exceptionHandler ausgeführt wird. Stattdessen werden automatisch nicht behandelte Ablehnungen verfolgt, sodass Sie throw mit den Bluebird-Versprechen und Bluebird-Versprechen frei definieren können aus. Darüber hinaus kann der Aufruf von Promise.longStackTraces() beim Debuggen viel helfen.

59

Bibliothek Angular bluebird verspricht ersetzt $q-Dienst durch bluebird. $http läuft auch über bluebird

0
Sel