Scaffolding out the service APIs

Now, let's create the API our services will provide to our app. Starting with PlayerService, we could imagine the following API might be useful to manage tracks and control playback. Most of it should be fairly self-explanatory. We may refactor this later but this is a great start:

• playing: boolean;
• tracks: Array<ITrack>;
• play(index: number): void;
• pause(index: number): void;
• addTrack(track: ITrack): void;
• removeTrack(track: ITrack): void;
• reorderTrack(track: ITrack, newIndex: number): void;

Create app/modules/player/services/player.service.ts and stub out a few of the methods; some of them we could go ahead and implement:

// angular
import { Injectable } from '@angular/core';

// app
import { ITrack } from '../../core/models';
@Injectable()
export class PlayerService {
  
  public playing: boolean;
  public tracks: Array<ITrack>;
  
  constructor() {
    this.tracks = [];
  }

  public play(index: number): void {
    this.playing = true;
  }
  public pause(index: number): void {
    this.playing = false;
  }
  public addTrack(track: ITrack): void {
    this.tracks.push(track);
  }
  public removeTrack(track: ITrack): void {
    let index = this.getTrackIndex(track);
    if (index > -1) {
      this.tracks.splice(index, 1);
    }
  }
  public reorderTrack(track: ITrack, newIndex: number) {
    let index = this.getTrackIndex(track);
    if (index > -1) {
      this.tracks.splice(newIndex, 0, this.tracks.splice(index, 1)[0]);
    }
  }
  private getTrackIndex(track: ITrack): number {
    let index = -1;
    for (let i = 0; i < this.tracks.length; i++) {
      if (this.tracks[i].filepath === track.filepath) {
        index = i;
        break;
      }
    }
    return index;
  }
}

Now, let's apply our standard by exporting this service for our module.

Create app/modules/player/services/index.ts:

import { PlayerService } from './player.service';

export const PROVIDERS: any[] = [
  PlayerService
];

export * from './player.service';

Lastly, modify our PlayerModule to specify the correct providers so our final module should look like the following:

// nativescript
import { NativeScriptModule } from 'nativescript-angular/nativescript.module'; 

// angular
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

// app
import { PROVIDERS } from './services';

@NgModule({
  imports: [ NativeScriptModule ],
  providers: [ ...PROVIDERS ],
  schemas: [ NO_ERRORS_SCHEMA ]
})
export class PlayerModule { }

Next, we can design RecorderService to provide a simple recording API.

Create app/modules/recorder/services/recorder.service.ts:

• record(): void
• stop(): void

// angular
import { Injectable } from '@angular/core';
@Injectable()
export class RecorderService {
  public record(): void { }
  public stop(): void { }
}

Now, apply our standard by exporting this service for our module.

Create app/modules/recorder/services/index.ts:

import { RecorderService } from './recorder.service';

export const PROVIDERS: any[] = [
  RecorderService
];

export * from './recorder.service';

Lastly, modify our RecorderModule to specify the correct providers so our final module should look like the following:

// nativescript
import { NativeScriptModule } from 'nativescript-angular/nativescript.module'; 

// angular
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

// app
import { PROVIDERS } from './services';

@NgModule({
  imports: [ NativeScriptModule ],
  providers: [ ...PROVIDERS ],
  schemas: [ NO_ERRORS_SCHEMA ]
})
export class RecorderModule { }

With our two primary feature modules scaffolded and ready to go, let's revisit the two low-level services we created in Chapter 1, Get Into Shape with @NgModule, and provide implementations.