Wednesday, 28 September 2016

Building A Notepad with Dart Angular 2 : Part Four

Another step in my personal 'Learn Angular 2' project... Here's some details of what made it into v0.04.

Services are a core part of Angular (inject-able units of functionality). They are inject-able in that the responsibility of creating the service is the Angular frameworks and any object using it receives a fully configured service when that object is created.

Okay that's a bit abstract - what does it mean for np8080? Well, there are a number of methods that process the data in the text document. Let's extract all that into a text processing service class

import 'dart:math';

import 'package:angular2/core.dart';

@Injectable()
class TextProcessingService {

  String trimText(String src) {
    return src.trim();
  }

  int getWordCount(String text) {
    String workingText = text;
    workingText = workingText.replaceAll('\n', ' ');
    List words = workingText.split(' ');
    words.removeWhere((word) => word.length == 0 || word == " ");
    return min(words.length, text.length);
  }

  int getLineCount(String text) {
    return '\n'
        .allMatches(text)
        .length;
  }
}

This is a regular class other than the @Injectable() next to the class declaration.

This service can be used in any part of our application by injecting it in the constructor. Wait a second how does Angular know how to get this service for the consumer object? We let Angular know via providers statement when we are declaring a component. This can be seen in the updated StatusComponent. Note that _textProcessingService can be declared final as it is assigned once at creation time.

import 'package:angular2/core.dart';
import 'package:np8080/services/textprocessingservice.dart';

@Component(
    selector: 'text-status',
    templateUrl: 'status_component.html',
    providers: const [TextProcessingService])
class StatusComponent {

  final TextProcessingService _textProcessingService;

  StatusComponent(this._textProcessingService);

  @Input('text')
  String text;

  @Input('modified')
  DateTime modified;

  String get length => text.length.toString();

  String get wordCount => _textProcessingService.getWordCount(text).toString();

  String get lineCount => _textProcessingService.getLineCount(text).toString();
}

That's it for this time. A few other visual tweaks have gone in. Check the app out np8080.win (I though it was worth the $1 to get a domain!) and the code is on GitHub.

Monday, 26 September 2016

Building A Notepad with Dart Angular 2 : Part Three

Continuing on with my personal 'Learn Angular 2' project... Here's some details of what made it into v0.03.

Change of plan - we are going to look at pipes! Pipes are the renamed 'Filters' from Angular 1. They work in pretty much the same way. A last modified DateTime object is now stored part of the TextDocument class. Let's add it onto the status component.

Let's use the built-in filters to show the full date in upper case:

Last modified: {{modified |  date:'fullDate' | uppercase}}

Notice the * before ngIf. This is critical for ng2 to identify the target element. If omitted, you will get an error as Angular will search for a template.

Angular 2 is keen to mark attributes more clearly on components. For the updated status bar the square brackets denote an input. Round brackets are for outputs and both types denote 2 way binding as on the TextArea.

    HTML
    text-status [text]="note.text" [modified]="note.lastModified"

    CODE
    @Input('modified')
    DateTime modified;

Check the app out np8080.win (I though it was worth the $1 to get a domain!) and the code is on GitHub.

Thursday, 22 September 2016

Building A Notepad with Dart Angular 2 : Part Two

Last time we got the basic notepad off the ground. A toolbar would be a good incremental step, complete with chunky buttons.

Angular 2 has a different markup for events (click) but after that it is straightforward handler writing as methods of the component. The first button allows that text content to be downloaded as a file. The second trims trailing and leading whitespace. The third displays a crude alert text box. Next time we will look at upgrading this to a dialog.

Check the app out here and the code is on GitHub.There's a few tweaks to the colours and layouts - bring your own CSS to the party if you like!

Sunday, 11 September 2016

Dart SDK and Dartium 1.19.1 Chocolatey Packages for Windows

Chocolatey is a package manager for Windows similar to Linux's apt-get, based on Microsoft's Nuget tool and Powershell scripting language. It works from the command-line and from a WPF GUI interface.

You can install unmoderated versions by specifiying the install version during installation.
Chocolatey has also been updated with versions 1.19.1
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.19.1
To verify you have the right version on your path.
dart --version
Dart VM version: 1.19.1 (Wed Sep 07 09:07:46 2016) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.19.1

Saturday, 27 August 2016

Dart SDK and Dartium 1.19.0 Chocolatey Packages for Windows

Chocolatey is a package manager for Windows similar to Linux's apt-get, based on Microsoft's Nuget tool and Powershell scripting language. It works from the command-line and from a WPF GUI interface.

You can install unmoderated versions by specifiying the install version during installation.
Chocolatey has also been updated with versions 1.19.0
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.19.0
To verify you have the right version on your path.
dart --version
Dart VM version: 1.19.0 (Fri Aug 26 02:40:23 2016) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.19.0

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!

Wednesday, 3 August 2016

Dart SDK and Dartium 1.18.1 Chocolatey Packages for Windows

Chocolatey is a package manager for Windows similar to Linux's apt-get, based on Microsoft's Nuget tool and Powershell scripting language. It works from the command-line and from a WPF GUI interface.

Good news - Chocolatey has cleared the moderation backlog! Dart versions are far more up to date. You can install unmoderated versions by specifiying the install version during installation.
Chocolatey has also been updated with versions 1.18.1
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.18.1
To verify you have the right version on your path.
dart --version
Dart VM version: 1.18.1 (Tue Aug 02 09:21:29 2016) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.18.1