angular_bloc 0.5.0

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 92
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(int currentState, 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.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(int currentState, 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.5.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter packages get

Alternatively, your editor might support pub get or flutter packages 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';
  
Version Uploaded Documentation Archive
0.5.0 Mar 19, 2019 Go to the documentation of angular_bloc 0.5.0 Download angular_bloc 0.5.0 archive
0.4.4 Mar 8, 2019 Go to the documentation of angular_bloc 0.4.4 Download angular_bloc 0.4.4 archive
0.4.3 Feb 21, 2019 Go to the documentation of angular_bloc 0.4.3 Download angular_bloc 0.4.3 archive
0.4.2 Feb 16, 2019 Go to the documentation of angular_bloc 0.4.2 Download angular_bloc 0.4.2 archive
0.4.1 Feb 16, 2019 Go to the documentation of angular_bloc 0.4.1 Download angular_bloc 0.4.1 archive
0.4.0 Feb 13, 2019 Go to the documentation of angular_bloc 0.4.0 Download angular_bloc 0.4.0 archive
0.3.3 Feb 5, 2019 Go to the documentation of angular_bloc 0.3.3 Download angular_bloc 0.3.3 archive
0.3.2 Jan 27, 2019 Go to the documentation of angular_bloc 0.3.2 Download angular_bloc 0.3.2 archive
0.3.1 Jan 22, 2019 Go to the documentation of angular_bloc 0.3.1 Download angular_bloc 0.3.1 archive
0.3.0 Jan 11, 2019 Go to the documentation of angular_bloc 0.3.0 Download angular_bloc 0.3.0 archive

All 19 versions...

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]
100
Overall:
Weighted score of the above. [more]
92
Learn more about scoring.

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

  • Dart: 2.2.0
  • pana: 0.12.14

Platforms

Detected platforms: Flutter, web, other

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

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
angular ^5.0.0 5.2.0
bloc ^0.10.0 0.10.0
Transitive dependencies
angular_ast 0.5.8
angular_compiler 0.4.2
args 1.5.1
async 2.0.8
build 1.1.0 1.1.1
build_config 0.3.1+4
built_collection 4.1.0
built_value 6.3.2
charcode 1.1.2
code_builder 3.2.0
collection 1.14.11
convert 2.1.1
crypto 2.0.6
csslib 0.14.6
dart_style 1.2.3 1.2.4
fixnum 0.10.9
front_end 0.1.9+1 0.1.14
glob 1.1.7
html 0.13.4+1
intl 0.15.7
js 0.6.1+1
json_annotation 2.0.0
kernel 0.3.9+1 0.3.14
logging 0.11.3+2
matcher 0.12.4
meta 1.1.7
package_config 1.0.5
path 1.6.2
plugin 0.2.0+3
pub_semver 1.4.2
pubspec_parse 0.1.4
quiver 2.0.1
rxdart 0.21.0
source_gen 0.9.4+1
stack_trace 1.9.3
string_scanner 1.0.4
term_glyph 1.1.0
typed_data 1.1.6
utf 0.9.0+5
watcher 0.9.7+10
yaml 2.1.15
Dev dependencies
analyzer ^0.32.4 0.34.3 0.35.4
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