angular_bloc 0.9.0

Angular Bloc Package

Pub Build Status codecov Flutter.io Awesome Flutter Flutter Samples Star on GitHub Gitter License: MIT


An Angular package that helps implement the BLoC pattern.

This package is built to work with bloc.

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_bloc.dart

enum CounterEvent { increment, decrement }

class CounterBloc extends Bloc<CounterEvent, int> {
  @override
  int get initialState => 0;

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.decrement:
        yield currentState - 1;
        break;
      case CounterEvent.increment:
        yield currentState + 1;
        break;
    }
  }
}

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(CounterEvent.increment);
  }

  void decrement() {
    counterBloc.dispatch(CounterEvent.decrement);
  }
}

At this point we have successfully 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 #

  • Counter - a complete example of how to create a CounterBloc and hook it up to an AngularDart app.
  • Github Search - an example of how to create a Github Search Application using the bloc and angular_bloc packages.

Maintainers #

0.9.0 #

Updated to bloc: ^0.14.0 and Minor Updates to Documentation

0.8.0 #

Updated to bloc: ^0.13.0 and Minor Updates to Documentation

0.7.0 #

Updated to bloc: ^0.12.0 and Minor Updates to Documentation

0.6.0 #

Updated to bloc: ^0.11.0 and Minor Updates to Documentation

0.5.0 #

Updated to bloc: ^0.10.0 and Minor Updates to Documentation

0.4.4 #

Additional Minor Updates to Documentation

0.4.3 #

Updated to bloc:^0.9.3 and Minor Updates to Documentation

0.4.2 #

Additional Minor Updates to Documentation

0.4.1 #

Minor Updates to Documentation

0.4.0 #

Updated to bloc: ^0.9.0

0.3.3 #

Additional Minor Updates to Documentation

0.3.2 #

Additional Minor Updates to Documentation

0.3.1 #

Minor Updates to Documentation

0.3.0 #

Updated to bloc: ^0.8.0

0.2.5 #

Additional Minor Updates to Documentation

0.2.4 #

Additional Minor Updates to Documentation

0.2.3 #

Updates to Documentation and Examples

0.2.2 #

Additional Minor Updates to Documentation

0.2.1 #

Minor Updates to Documentation

0.2.0 #

Updated to bloc: ^0.7.0

0.1.2 #

Minor Updates to Documentation

0.1.1 #

Minor Updates to Documentation

0.1.0 #

Initial Version of the library.

  • Includes the ability to connect presentation layer to Bloc by using the BlocPipe Component.

example/example.dart

import 'dart:async';

import 'package:angular/angular.dart';

import 'package:angular_bloc/angular_bloc.dart';

import 'package:bloc/bloc.dart';

@Component(
  selector: 'my-app',
  template: '<counter-page></counter-page>',
  directives: [CounterPageComponent],
)
class AppComponent {}

enum CounterEvent { increment, decrement }

class CounterBloc extends Bloc<CounterEvent, int> {
  @override
  int get initialState => 0;

  @override
  void onTransition(Transition<CounterEvent, int> transition) {
    print(transition);
  }

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.decrement:
        yield currentState - 1;
        break;
      case CounterEvent.increment:
        yield currentState + 1;
        break;
    }
  }
}

const String template =
    '<div class="counter-page-container"><h1>Counter App</h1><h2>Current Count: {{ counterBloc | bloc }}</h2><button (click)="increment()">+</button><button (click)="decrement()">-</button></div>';

@Component(
  selector: 'counter-page',
  styleUrls: ['counter_page_component.css'],
  pipes: [BlocPipe],
  template: template,
)
class CounterPageComponent implements OnInit, OnDestroy {
  CounterBloc counterBloc;

  @override
  void ngOnInit() {
    counterBloc = CounterBloc();
  }

  @override
  void ngOnDestroy() {
    counterBloc.dispose();
  }

  void increment() {
    counterBloc.dispatch(CounterEvent.increment);
  }

  void decrement() {
    counterBloc.dispatch(CounterEvent.decrement);
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  angular_bloc: ^0.9.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:angular_bloc/angular_bloc.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
83
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

We analyzed this package on Jul 23, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19

Platforms

Detected platforms: Flutter, web, other

No platform restriction found in primary library package:angular_bloc/angular_bloc.dart.

Maintenance issues and suggestions

Support latest dependencies. (-10 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency (angular).

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
angular ^5.0.0 5.3.1 6.0.0-alpha
bloc ^0.14.0 0.14.4
Transitive dependencies
angular_ast 0.5.9 0.5.10
angular_compiler 0.4.3 0.4.4
args 1.5.2
async 2.3.0
build 1.1.5
build_config 0.4.1
built_collection 4.2.2
built_value 6.7.0
charcode 1.1.2
checked_yaml 1.0.1
code_builder 3.2.0
collection 1.14.11
convert 2.1.1
crypto 2.0.6
csslib 0.14.6+1 0.16.1
dart_style 1.2.4 1.2.9
fixnum 0.10.9
front_end 0.1.14 0.1.20
glob 1.1.7
intl 0.15.8
js 0.6.1+1
json_annotation 2.4.0
kernel 0.3.14 0.3.20
logging 0.11.3+2
matcher 0.12.5
meta 1.1.7
package_config 1.0.5
path 1.6.2
pedantic 1.8.0+1
pub_semver 1.4.2
pubspec_parse 0.1.4
quiver 2.0.3
rxdart 0.22.1
source_gen 0.9.4+3
stack_trace 1.9.3
string_scanner 1.0.4
term_glyph 1.1.0
typed_data 1.1.6
watcher 0.9.7+12
yaml 2.1.16
Dev dependencies
analyzer ^0.32.4 0.35.4 0.37.0
build_runner ^0.9.0
build_test ^0.10.2+5
build_web_compilers ^0.4.0+4
mockito ^3.0.0
source_span ^1.4.0 1.5.5
test >=1.3.0 <2.0.0

Admin