angular_bloc 0.1.2

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • new78
Angular Bloc Package

Build Status codecov Pub License: MIT Gitter


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.
  • Github Search - an example of how to create a Github Search Application using the bloc and angular_bloc packages.

Contributors

0.1.0

Initial Version of the library.

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

0.1.1

Minor Updates to Documentation

0.1.2

Minor Updates to Documentation

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 {}

abstract class CounterEvent {}

class Increment extends CounterEvent {
  @override
  String toString() => 'Increment';
}

class Decrement extends CounterEvent {
  @override
  String toString() => 'Decrement';
}

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

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

  @override
  Stream<int> mapEventToState(int state, CounterEvent event) async* {
    if (event is Increment) {
      yield state + 1;
    }
    if (event is Decrement) {
      yield state - 1;
    }
  }
}

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(Increment());
  }

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

Use this package as a library

1. Depend on it

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


dependencies:
  angular_bloc: ^0.1.2

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.1.2 Nov 16, 2018 Go to the documentation of angular_bloc 0.1.2 Download angular_bloc 0.1.2 archive
0.1.1 Nov 5, 2018 Go to the documentation of angular_bloc 0.1.1 Download angular_bloc 0.1.1 archive
0.1.0 Nov 5, 2018 Go to the documentation of angular_bloc 0.1.0 Download angular_bloc 0.1.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
56
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]
78
Learn more about scoring.

We analyzed this package on Nov 16, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.12.6

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-dev.28.0 <3.0.0
angular ^5.0.0 5.0.0 5.1.0
bloc ^0.6.0 0.6.0
rxdart >=0.18.1 <1.0.0 0.19.0
Transitive dependencies
angular_ast 0.5.6 0.5.7
angular_compiler 0.4.0 0.4.1
args 1.5.1
async 2.0.8
build 0.12.8 1.0.1
build_config 0.3.1+4
built_collection 4.0.0
built_value 6.1.6
charcode 1.1.2
code_builder 3.1.3
collection 1.14.11
convert 2.0.2
crypto 2.0.6
csslib 0.14.6
dart_style 1.1.3 1.2.0
fixnum 0.10.9
front_end 0.1.4+2 0.1.6+5
glob 1.1.7
html 0.13.3+3
intl 0.15.7
js 0.6.1+1
json_annotation 2.0.0
kernel 0.3.4+2 0.3.6+5
logging 0.11.3+2
matcher 0.12.4
meta 1.1.6
package_config 1.0.5
path 1.6.2
plugin 0.2.0+3
pub_semver 1.4.2
pubspec_parse 0.1.2+3
quiver 2.0.1
source_gen 0.9.1+3
stack_trace 1.9.3
string_scanner 1.0.4
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.32.6 0.33.3+2
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.4.1
test >=1.3.0 <2.0.0