5. Usage Examples

Basic Example

In order to show you what the provided SIMs can do for you; let me put an example code as easy as pie.

import { Component }             from '@angular/core';
import { BASE_URL, API_VERSION } from '../shared'; 
import { LoopBackConfig }        from '../shared/sdk';
import { Account, AccessToken }  from '../shared/sdk/models';
import { AccountApi }            from '../shared/sdk/services';

@Component(...)

export class SignComponent {

    // Create model instances and set the right type effortless
    private account: Account = new Account();
    
    // Configure LoopBack Once or Individually by Component
    constructor(private accountApi: AccountApi) {
        LoopBackConfig.setBaseURL(BASE_URL);
        LoopBackConfig.setApiVersion(API_VERSION);
    }
    
    // Start making API calls right away
    private signup(): void {
        this.accountApi.create(this.account).subscribe((account: Account) => this.signin());
    }

    // Built-in LoopBack Authentication and Typings like Account and TokenInterface
    private signin(): void {
        this.accountApi.login(this.account).subscribe((token: AccessToken) => alert('Fake Redirect'));
    }
}

As you can see, using the LoopBack SDK for Angular 2 is nice and easy... Now lets make an example of how to subscribe to published events by the server.

IMPORTANT NOTE: WebPack is not very good handling barrels, if you run into issues then you may want to import as follows:

import { LoopBackConfig }        from '../shared/sdk/index';
import { Account, AccessToken }  from '../shared/sdk/models/index';
import { AccountApi }            from '../shared/sdk/services/index';

Real-Time Application Example

import { Component }             from '@angular/core';
import { BASE_URL, API_VERSION } from '../shared'; 
import { LoopBackConfig }        from '../shared/sdk'; 
import { Room, Message }         from '../shared/sdk/models';
import { RoomApi, AccountApi }   from '../shared/sdk/services';

@Component(...)

export class RoomComponent {
  // All the types you need already there
  private room    : Room = new Room();
  private message : Message = new Message();
  // All the services you need already there
  constructor(
    private accountApi: AccountApi,
    private roomApi   : RoomApi
  ) {
    LoopBackConfig.setBaseURL(BASE_URL);
    LoopBackConfig.setApiVersion(API_VERSION);
    this.getRoom(1); // Get room id by params or whatever mechanism
  }
  // Built in support for the LoopBack Query Language (Include, Where, Order, Limit, Offset, Etc...)
  // Built in support for the LoopBack Component Pubsub (roomApi.onCreateMessages(id: RoomId))
  getRoom(id: any): void {
      this.roomApi.findById(id, {
        include: [
          {
            relation: 'messages',
            scope: { order: 'id DESC' }
          }
        ]
      }).subscribe((room: Room) => {
        this.room = room;
        this.roomApi.onCreateMessages(this.room.id)
                    .subscribe((message: Message) => this.room.messages.push(message))
      });
  }

  // Built in logged account functionality
  sendMessage(): void {
    this.message.accountId = this.accountApi.getCurrentId();
    this.roomApi.createMessages(this.room.id, this.message)
                .subscribe(() => this.message = new Message());
  }
}