Getting started with Angular SDK

Angular (v4+) framework is officially out for some time and we recently informed you about releasing Angular SDK to help you create Angular applications using Baasic. Now it’s time to show you how to setup Angular application with Baasic SDK.

Setup

Before you start using Baasic Angular SDK, make sure that you created free Baasic account. On your Baasic dashboard, create new Baasic application. To get with Angular starter kit you will need Node.js installed on your machine. To setup Angular application clone the Angular+webpack starter application:

git clone https://github.com/AngularClass/angular-starter.git

or

git@github.com:/AngularClass/angular starter.git

if you are using SSH.

Now it is time to include Baasic SDK npm package into your Angular application. Locate your package.config file and add following line in dependency section:

"baasic-sdk-angular": "1.0.0"

To install all your dependencies use npm install command.

Configuration

After everything is installed with success, locate your \src\app\app.module.ts and make following changes:

Add import statement:

import { BaasicApp } from 'baasic-sdk-angular';

Configure your Angular application. Replace <api-key> with Baasic application unique identifier (api key you used while creating your application on the dashboard):

@NgModule({
    ...,
    imports: [
        ...,
        BaasiApp.forRoot('<api-key>', {
            apiRootUrl: 'api.baasic.com',
            apiVersion: 'v1'
        })
    ],
    ...
})

After these easy steps you are ready to go and use Baasic SDK inside your Angular application! Everything you need to do is import desired Baasic SDK service into your Angular component or service using import { <BaasicService> } from 'baasic-sdk-angular'; pattern.

Membership service

Baasic Angular SDK MembershipService provides all required functionalities for user authentication. To implement basic login services in application, we will create our custom AuthenticationService:

import { Injectable } from '@angular/core';
import { MembershipService } from 'baasic-sdk-angular';
import { TokenService } from 'common';

@Injectable()
export class AuthenticationService {

    constructor(
        private membershipService: MembershipService,
        private tokenService: TokenService
    ) { }

    async login(username: string, password: string): Promise<void> {
        let data = {
            username: username,
            password: password,
            options: ['sliding']
        };

        let token = await this.membershipService.login.login(data);
    }

    async logout(): Promise<void> {
        let token = this.tokenService.getToken();
        if (token) {
            await this.membershipService.login.logout(token.token, token.type);
            this.tokenService.removeToken();
        }
    }
}

Login function requires only username and password to perform login operation. Options property is optional and more information about login API you can find on our Baasic Developer Center.

Note: When sliding token option is set, token doesn’t have absolute expiration time. With each successful request token expiration time will be extended.

When you successfully login, you will be provided with authentication token and you don’t have to pass the token through headers. Baasic Angular SDK will handle storage and token management for you on every request towards Baasic using Angular SDK services.

To logout from your application, you will need to provide token information. In that case we created simple TokenService:

import { Injectable } from '@angular/core';
import { BaasicAppService, IToken } from 'baasic-sdk-angular';

@Injectable()
export class TokenService {

    constructor(
        private baasicAppService: BaasicAppService
    ) { }

    getToken(): IToken {
        return this.baasicAppService.getAccessToken();
    }

    removeToken(): void {
       this.baasicAppService.updateAccessToken(null);
    }

    isExpired(): boolean {
        let token = this.getToken();
        if (token) {
            return token.expireTime < (new Date()).getTime();
        }

        return true;
    }
}

Dynamic Resources Service

With Baasic Dynamic Resources module you can define your own data models using only JSON schema. Dynamic Resources Service provide fast and easy way to perform CRUD operations on your stored resources with support for sorting, paging and filtering using Baasic Query Language (BQL).

Create your simple data model ICar:

export interface ICar {
    id?: string;
    model: string;
    color: string;
    year: number;
}

Be sure to create resource schema inside your Baasic application before you start performing CRUD operations. To manipulate with our Car model we will create simple service that will work with our DynamicResourceService:

import { Injectable } from '@angular/core';
import { DynamicResourceService, IBaasicQueryModel, IOptions } from 'baasic-sdk-angular';
import { ICar } from 'common/models';

@Injectable()
export class CarService {

    private readonly schemaName: string = 'car';

    constructor(
        private dynamicResourceService: DynamicResourceService
    ) { }


    async find(page: number, pageSize: number, orderBy: string, orderDirection: string, search?: string): Promise<IBaasicQueryModel<ICar>> {
        let options: IOptions = {
            pageNumber: page,
            pageSize: pageSize,
            orderBy: orderBy,
            orderDirection: orderDirection,
            search: search
        };

        return (await this.dynamicResourceService.find(this.schemaName, options)).data as IBaasicQueryModel<ICar>;
    }

    async get(id: string): Promise<ICar> {
        return (await this.dynamicResourceService.get(this.schemaName, id)).data as ICar;
    }

    async create(data: ICar): Promise<ICar> {
        return (await this.dynamicResourceService.create(this.schemaName, data)).data as ICar;
    }

    async update(data: ICar): Promise<void> {
        await this.dynamicResourceService.update(this.schemaName, data);
    }

    async remove(data: ICar): Promise<void> {
        await this.dynamicResourceService.remove(this.schemaName, data);
    }
}

Now you just need to call required CarService function. To find first ten cars with red color sorted by model name create following statement:

...
let data = await this.carService.find(1, 10, 'model', 'asc', 'WHERE color=\'red\'');
...

With Baasic SDK MembershipService and DynamicResourceService you can create powerful applications with authentication in a short time. For more information about Baasic modules check our Development center. All APIs that you can find are included in Angular SDK and be free to use them.