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