Hero Service

Purpose

The Hero Service is an injectable service providing an instance of the Hero Model particularly for the Hero Component. The purpose of the service is to separate the data acquisition concern from the presentation and business logic concerns. Different apps might implement user management in different ways and the Hero Service provides the flexibility to tie the Hero Component to arbitrary service implementations with out changing the component itself.

Contract

The Hero Service defined the following contract:

• protected GetData():Hero - this method returns an instance of the Hero Model. In a derived implementation, the realization of this contract would implement whatever logic necessary to obtain the required information about the user.

• get Hero():Promise - this property returns a promise for a Hero object.

• get SupportsLogout():boolean - this property returns true if the service implementation supports logout functionality.

• get PostLogoutRedirect():string - this property return the url to which to redirect the user on logout.

• Logout():Promise - this method implements the actual logout functionality (if the service supports logout) and returns a promise for string containing any appropriate logout message (or error).

Implementing your own Hero Service

Generally, you will want to build your own Hero Service. To do that, simple implement an injectable class extending the Hero Service:

import { Component, Injectable } from '@angular/core';
import { Hero, HeroService } from 'ng2-app-scaffold';

@Injectable()
export class MyHeroService extends HeroService{
   constructor(){
      super();
      this._supportsLogout = true;
      this._postLogoutRedirectUrl = "/login";
   }     

   protected GetData(){
      if (this._hero) return;

      //
      // add payload to get user info from back-end system.
      //
      this._hero = new Hero(...);

      // get data is called by the promise resolver, which will return the 
      // Hero object as part of the promise resolution. 
   }

   public Logout():Promise<string>{
      return new Promise<string>((resolve, reject) => {
          let success: boolean = true;
          // 
          // implement payload to facilitate logout
          //
          if (success) {
             resolve("You have been successfully logged out..");
          }
          else {
            reject("There was an error...");
          }
     }); 
   }
}

Note: the caller of Logout is expected to first check the SupportsLogout property and then perform a redirection to PostLogoutRedirect once the logout promise is resolved.

Typically, you will want to provide your own implementations for the GetData() and Logout() methods. For the other members of the contract, you can generally rely on the default implementation.

Bind your Hero Service implementation

Once you have created your Hero Service implementation, you can inject it during NgModule registration:

@NgModule({
    bootstrap: [ ... ],
    declarations: [...],
    imports: [...],
    providers: [
        {
            provide: HeroService, deps: [], useFactory: HeroProviderFactory }
        }
    ] 
})

export function HeroProviderFactory(...){
    return new MyHeroService();
}

Note: The provider factory was moved into an exported method to accomodate Angular 4 requirements to no have lambda functions in the provider loading.