angular_bloc 0.1.1 angular_bloc: ^0.1.1 copied to clipboard
Angular Components that make it easy to implement the BLoC Design Pattern (Business Logic Component). Built to be used with the bloc package.
An Angular package that helps implement the Bloc pattern.
This package is built to work with bloc ^0.6.0.
Angular Components #
BlocPipe is an Angular pipe which helps bind Bloc
state changes to the presentation layer. BlocPipe
handles rendering the html element in response to new states. BlocPipe
is very similar to AsyncPipe
but has a more simple API to reduce the amount of boilerplate code needed.
Usage #
Lets take a look at how to use BlocPipe
to hook up a CounterPage
html template to a CounterBloc
.
counter_page_component.html
<div class="counter-page-container">
<h1>Counter App</h1>
<h2>Current Count: {{ counterBloc | bloc }}</h2>
<material-fab class="counter-fab-button" (trigger)="increment()">+</material-fab>
<material-fab class="counter-fab-button" (trigger)="decrement()">-</material-fab>
</div>
counter_page_component.dart
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_bloc/angular_bloc.dart';
import './counter_bloc.dart';
@Component(
selector: 'counter-page',
templateUrl: 'counter_page_component.html',
styleUrls: ['counter_page_component.css'],
directives: [MaterialFabComponent],
pipes: [BlocPipe],
)
class CounterPageComponent implements OnInit, OnDestroy {
CounterBloc counterBloc;
@override
void ngOnInit() {
counterBloc = CounterBloc();
}
@override
void ngOnDestroy() {
counterBloc.dispose();
}
void increment() {
counterBloc.dispatch(Increment());
}
void decrement() {
counterBloc.dispatch(Decrement());
}
}
At this point we have sucessfully separated our presentational layer from our business logic layer. Notice that the CounterPage
component knows nothing about what happens when a user taps the button. The component simply tells the CounterBloc
that the user has pressed the increment/decrement button.
Dart Versions #
- Dart 2: >= 2.0.0
Examples #
- Simple Counter Example - a complete example of how to create a
CounterBloc
and hook it up to an AngularDart app.