7

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)
Nick
  • 9,735
  • 7
  • 59
  • 89

1 Answers1

14

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
        });
    });
  }
}
Eesa
  • 2,762
  • 2
  • 32
  • 51
Nick
  • 9,735
  • 7
  • 59
  • 89
  • I am getting the following exception `EXCEPTION: No provider for Http! (App -> UserApi -> Http)` thoughts? – Eesa Mar 12 '16 at 12:10
  • @essaji, show your code please. How you provide Http into your component? Are there `providers: [Http]`?. You can create an issue (https://github.com/Qeti/loopback-sdk-angular/issues) with code example. – Nick Mar 12 '16 at 12:47
  • Using `providers: [UserService,Http],` produces `EXCEPTION: No provider for ConnectionBackend! (AppComponent -> UserApi -> Http -> ConnectionBackend)` and using `providers: [UserService,Http,ConnectionBackend],` produces `EXCEPTION: No provider for RequestOptions! (AppComponent -> UserApi -> Http -> RequestOptions)` – Eesa Mar 12 '16 at 13:01
  • And using `providers: [UserService,Http,ConnectionBackend,RequestOptions],` produces `EXCEPTION: Cannot resolve all parameters for 'RequestOptions'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RequestOptions' is decorated with Injectable.` – Eesa Mar 12 '16 at 13:03
  • Here is the link to [plunker](https://plnkr.co/edit/mebNcuund9zWYtUOWWE9?p=preview) see console for the error messages. – Eesa Mar 12 '16 at 13:14
  • 1
    Try to provide also `HTTP_PROVIDERS` – Nick Mar 12 '16 at 13:22
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/106098/discussion-between-essaji-and-mnv). – Eesa Mar 12 '16 at 15:02
  • Did you use `Codegen` for generating Angular2 typescript SDK? – Eesa May 17 '16 at 19:44
  • 1
    @essaji I use loopback-sdk-angular package – Nick May 20 '16 at 06:38
  • Would you mind sharing the server.js file of the above application? I'm trying to implement a similar application with a loopback API and Angular 2 frontend and having a difficulty in integrating them. Thanks! – imesh Apr 14 '17 at 04:20
  • @imesh Did you try https://github.com/mean-expert-official/loopback-sdk-builder ? – Nick Apr 14 '17 at 07:14