angular-bacon

bacon.js bindings for AngularJS

Usage no npm install needed!

<script type="module">
  import angularBacon from 'https://cdn.skypack.dev/angular-bacon';
</script>

README

angular-bacon

bacon.js bindings for AngularJS.

Make your AngularJS apps even more reactive, by using bacon.js FRP library to process your scope properties.

Usage

Simply require angular-bacon in your AngularJS module, and both $rootScope and Bacon objects are augmented automatically with the following functions:

$scope.$watchAsProperty(property)

Exposes an AngularJS scope property as a bacon.js property. If the property already has a value in the scope (i.e. is not undefined), that value becomes the property's initial value.

$scope.$watchCollectionAsProperty(property)

Exposes an AngularJS scope Array or Object property as a bacon.js property. If the property already has a value in the scope (i.e. is not undefined), that value becomes the property's initial value.

This function is equivalent to $scope.$watchAsProperty but using $watchCollection instead of $watch, so that changes in Array and Object values are properly detected.

Bacon.Observable.digest($scope, property)

Digests a bacon.js observable (stream or property) back to an AngularJS scope property. Attaches an .onValue handler to the observable, which simply $applies the property in the selected scope with the selected key.

$scope.digestObservables(observables)

Digests multiple bacon.js observables at once. Simple syntactic sugar, when multiple observables are involved. observables is a map with object keys representing $scope property names into which the observables are digested into.

$scope.$asEventStream(event)

Subscribes to scope hierarchy events as Bacon.EventStream. event is a name of the event. Created stream will contain AngularJS scope event objects, augmented with an .args property, containing a list of all additional arguments passed in the $emit call.

Examples

For examples, see here. This example somewhat mimics raimohanska's awesome bacon.js tutorials: it features a simple login validation form, where a slow backend "is-nickname-taken" check is simulated by a stream with a 5-second delay. In addition, the two selected passwords must match, and be at least five characters long before the submit button is enabled.

Changelog

2.0.1

Update dependencies.

2.0.0

Use $evalAsync instead of $apply when digesting streams to scopes. This change is potentially backwards-incompatible for code that relies on synchronous digestion of streams.

1.5.1

Fix issue with root scope digest already in progress when digesting streams in directives.

1.5.0

Augment isolate scopes with angular-bacon functions.

1.4.1

Add package.json main module.

1.4.0

Add $asEventStream(event).

1.3.2

Fix issue with end of bus not having its scope bound correctly on scope destruction callback.

1.3.1

Bump bacon.js to newer version.

1.3.0

Add $watchCollectionAsProperty(). Requires Angular 1.2+.

1.2.0

End $watchAsProperty() streams and unsubscribe .digest() listeners when scope is destroyed.

1.1.2

Add MIT License.