Angular 2 - Time to jump in! (Design)

*** This blog was written with Angular2 RC-3, I will be updating to the latest release shortly.  Thanks! ***

This is a series of posts on learning Angular2, you can review my Intro and Setup posts for more information.  Back to our Racquetball League score keeping application Splat-Shot, let's take a look at what we want the application to do and how it should be designed:

• Need to keep track of a list of Players with:
• Name
• Phone
• Email
• Need to create a league which includes:
• Players
• Courts
• Match Date / Time
• Match Results
• Need to create a Leader board summarizing match results

From a UI perspective we need:

• Home screen
• Menu Bar
• Players
• Matches
• Leader board
• Player
• List
• Edit
• League
• List
• Update match results
• Leader board - ordered list of players by match results

Other rules:

• A match consists of 3 games
• Each game is played to 15 points.
• The winner of each game gets a match point.  If you win all three games, you get a bonus match point.

Let's start with the easy one first, creating a home screen, tool bar and slide navigation menu.  First we need to import the material design components:

  'core',

  'toolbar',

  'icon',

  'button',

  'sidenav',

  'list',

  'card',

  'input',

  'radio',

  'checkbox'

(follow instructions from setup, also make sure to follow the extra setup steps for MdIcon).  When creating a new application with AngularCLI, it creates a default component with your application name, in our example splat-shot.component.ts.  First, lets create the toolbar and menu bar:

src / splat-shot.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

import { Component } from '@angular/core'; import {MdToolbar} from '@angular2-material/toolbar'; import {MdButton} from '@angular2-material/button'; import {MD_SIDENAV_DIRECTIVES} from '@angular2-material/sidenav'; import {MD_LIST_DIRECTIVES} from '@angular2-material/list'; import {MD_CARD_DIRECTIVES} from '@angular2-material/card'; import {MdIcon, MdIconRegistry} from '@angular2-material/icon'; @Component({ moduleId: module.id, selector: 'splat-shot-app', templateUrl: 'splat-shot.component.html', styleUrls: ['splat-shot.component.css'], directives: [ MD_SIDENAV_DIRECTIVES, MD_LIST_DIRECTIVES, MdToolbar, MdIcon ], providers: [MdIconRegistry] }) export class SplatShotAppComponent { title = 'splat-shot works!'; views: Object[] = [ { name: "Home", description: "Latest News in the League.", icon: "home" }, { name: "Matches", description: "Show the upcoming matches.", icon: "perm_contact_calendar" }, { name: "Players", description: "Show List of players.", icon: "people" } ]; }

In the code sample above, we import the material design components and setup our directives.  This menu bar design was taken from the PuppyLove example where the views is an object array that is then populated in the HTML file using an *ngFor Loop:

src \ splat-shot.component.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<md-sidenav-layout fullscreen> <md-sidenav #sidenav> <md-nav-list> <a md-list-item *ngFor="let view of views"> <md-icon md-list-icon>{{view.icon}}</md-icon> <span md-line>{{view.name}}</span> <span md-line class="secondary">{{view.description}}</span> </a> </md-nav-list> </md-sidenav> <md-toolbar color="primary"> <button md-icon-button (click)="sidenav.open()"> <md-icon>menu</md-icon> </button> Splat Shot! </md-toolbar> </md-sidenav-layout>

Your application should now look like this:

When you click the menu button, the array of views defined in your component should appear:

In my next post we will look at  creating the components behind the menu items and add routing.