Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to generate services for Angular2 from Loopback?

Here is documentation about AngularJS JavaScript SDK

This example works perfect for Angular. It is possible to generate Angular client library with command

$ lb-ng ../server/server.js js/lb-services.js

Does exist same easy way to use Angular2 with Loopback?

EDIT

What I found on this theme currently.

  1. Issue in loopback-sdk-angular Github repository with discussion.
  2. Example of realisation: BaseResource and Model mased on BaseResource.
  3. And another way - using upgrade from Angular to Angular2 until the official implemntation of Loopback Angular 2 SDK.
  4. I have done alpha version of code generator for Angular 2 in fork of loopback-sdk-angular.

EDIT

  1. Loopback-sdk-builder (comment)
like image 349
Nick Avatar asked Jan 17 '16 20:01

Nick


1 Answers

At this moment you may use fork of loopback-sdk-angular and loopback-sdk-angular-cli packages.

package.json:

"devDependencies": {
  //...
  "loopback-sdk-angular": "github:qeti/loopback-sdk-angular#188-angular2-support",
  "loopback-sdk-angular-cli": "github:qeti/loopback-sdk-angular-cli#37-angular2-support"
}

Generate client code (TypeScript):

./node_modules/.bin/lb-ng ./server/server.js ./client/src/app/lb-services.ts -l angular2

Example of usage:

import {Component,Injectable} from 'angular2/core';
import {UserApi as UserService} from './lb-services';
import {HTTP_PROVIDERS} from 'angular2/http';

@Component({
  selector: 'my-app',
  providers: [UserService,HTTP_PROVIDERS],
  template: 'some template'
})

@Injectable()
export class AppComponent {

  private login: string;
  private password: string;

  constructor(protected user: UserService) {}

  onLogin() {
    let self = this;
    // Example 1
    this.user.login({
      username: self.login,
      password: self.password
    })
    .subscribe(res => {
      // some actions on login
      this.getData();
    });
  }

  onLogout() {
    // Example 2
    this.user.logout().subscribe(() => {
      // some actions on logout
    });
  }

  public getData() {
    // Example 3
    this.user.count().subscribe((response: any) => {
      let lastRow = response.count;

      let data = this.user
        // Example 4
        .find({
          offset: 0,
          limit: 100
        })
        .subscribe(function(response: any) {
          // Process response
        });
    });
  }
}
like image 145
Nick Avatar answered Oct 14 '22 04:10

Nick