Saturday, 20 August 2016

Building A Notepad with Dart Angular 2 : Part One

Angular 2 is looking very new and shiny, isn't it? There's not a tonne of example code out there so I thought it was about time to pop some on the DID blog. So let's write a text notepad for the web (and use local storage for saving).

This is an Angular 2 application with a component for the Editor. The Editor has a sub-component that provides a couple of stats. There's not a huge amount to write up on the code. It's interesting to see how Angular 2 differs from the previous version - I found some of the syntax far more readable. For more detal, see the Angular 2 Quickstart - though not complete, it has some great demos.


import 'package:angular2/core.dart';

import 'status_component.dart';
import 'textdocument.dart';

@Component(
    selector: 'plain-editor',
    templateUrl: 'editor_component.html',
    directives: const [StatusComponent])
class EditorComponent {
  @Input()
  TextDocument note;

  void changeHandler() {
    note.save();
  }
}

import 'package:angular2/core.dart';

@Component(
    selector: 'text-status',
    templateUrl: 'status_component.html')
class StatusComponent {
  @Input('text')
  String text;

  String get length => text.length.toString();
  String get wordCount => text.split(' ').length.toString();
}

The editor loads in less than 1 second - not bad! And this is a debug build.

Code is on GitHub and you can try it out here. Feedback and suggestions welcome!