npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular2bknd-sdk

v3.2.0

Published

Typescript SDK for Backand

Downloads

13

Readme

angular2bknd-sdk

Backand SDK for Angular 2

Compatible with AngularJS 2.0.0

Install

npm install angular2bknd-sdk --save

Dependencies

npm install @types/node --save-dev 
npm install @types/socket.io-client --save-dev 

Import

In src/app/app.module.ts,

import { BackandService } from 'angular2bknd-sdk';

add BackandService to the providers array.

In each component where you use Backand, import it:

import { BackandService } from 'angular2bknd-sdk';

and then in the constructor:

constructor(private backandService:BackandService){}

Use it as this.backandService

Configure secure calls to Backand's REST API

Backand uses OAuth2 authentication, which requires that you include the authentication token in every HTTP call.

In src/app/app.component.ts:

    this.backandService.setAppName('your app name');
    this.backandService.setSignUpToken('your backand signup token');
    this.backandService.setAnonymousToken('your backand anonymous token');

Mobile

In src/app/app.component.ts:

this.backandService.setIsMobile(true);

Do CRUD Operations on Your Database

To fetch, create, and filter rows, from an object, say todo, the CRUD functions in BackandService, should receive 'todo' as their first argument

  • Read one row
    this.backandService.getOne('todo')
        .subscribe(
                data => {
                },
                err => this.backandService.logError(err),
                () => console.log('OK')
            );
  • Create
    this.backandService.create('todo', { name: this.name, description: this.description})
        .subscribe(
                data => {
                },
                err => this.backandService.logError(err),
                () => console.log('OK')
            );
  • Update
    this.backandService.update('todo', this.id, { name: this.name, description: this.description})
        .subscribe(
                data => {
                },
                err => this.backandService.logError(err),
                () => console.log('OK')
            );
  • Query

When q is set to your search pattern, define a filter:

    let filter = [{
                fieldName: 'name',
                operator: 'contains',
                value: q
              }];

Or use NoSQL syntax:

    let filter = {
        "q":{
            "name" : { 
                "$like" :  q
            }
        }
    }

and call filterItem

    this.backandService.getList('todo', null, null, filter)
            .subscribe(
                data => {
                    console.log("subscribe", data);
                    this.items = data;
                },
                err => this.backandService.logError(err),
                () => console.log('OK')
            );

Social Signup

The app opens a dialog supplied by the social network.

    var $obs = this.backandService.socialSignup(provider, spec);
    $obs.subscribe(                
      data => {
          console.log('Sign up succeeded with:' + provider);           
      },
      err => {
          this.backandService.logError(err)
      },
      () => console.log('Finish Auth'));
  • provider is one of: facebook, twitter, googleplus, github

  • spec optionally defines the look of the social network sign in window, like:

    left=1, top=1, width=600, height=600

Socket Service

  • Socket login and logout are done automatially as part of the login and logout calls, respectively.

  • To subscribe to event items_updated from server side via sockets, call this.backandService.on and in your controller, subscribe with:

    this.backandService.on('items_updated')
      .subscribe(
            data => {
                console.log("items_updated", data);
            },
            err => {
                console.log(err);
            },
            () => console.log('received update from socket')
        );

Get User Details

Fetch:

    this.backandService.getUserDetails(true).subscribe(
       data=> {
           console.log(data);
       },
       err=> this.backandService.logError(err),
       () => console.log('Got Details')
       );

Caches user details in the app. The force parameter can cause it to fetch from it from Backand as in the call above.

Backand Storage

Create Backand Action

Create a server side action in Backand by going into the items object actions tab and clicking on the Back& Files icon. Name your action "files"

File Upload

    backand.uploadFile('todo', 'files', fileName, base64Data).subscribe(
          data => { 
            console.log(data);
            //data.url is the url of the uploaded file
          }, 
          err => backand.logError(err),
          () => console.log('OK')
        );

File Delete

    backand.deleteFile('todo', 'files', fileName).subscribe(
          data => { 
          }, 
          err => backand.logError(err),
          () => console.log('OK')
        );