Instalación

groceryApp

LoopBack
mongoDB
Crear Modelo
Angular 4
Generar SDK

Loopback:

Instalar: $ npm install -g loopback-cli

Y se crea el proyecto: $ lb

• Nombre: groceryApp
• Directorio: groceryApp
• EmptyServer

Una vez realizado este paso se creará el modelo:

mongoDB

Una vez creado se configurará la base de datos, en este caso se utilizará mongoDB.

$ brew install mongodb

En una carpeta del sistema se creará la carpeta que contendrá la base de datos: /data/db

$ mongod

En la carpeta del proyecto se ejecutará: $ mongo posteriormente se ejecutarán las siguientes dos instrucciones:

> use yourGroceryDB
> db.createUser(
    {
      user: "groceryUser",
      pwd: "groceryPassword",
      roles: [
         { role: "readWrite", db: "Items" }
      ]
    }
)

Se instalará el conector mongodb:

$ npm install loopback-connector-mongodb --save

Y se configurará el proyecto:

{
{
  "db": {
    "host": "127.0.0.1",
    "port": 27017,
    "database": "db_name",
    "username": "groceryUser",
    "password": "groceryPassword",
    "name": "db",
    "connector": "mongodb"
  }
}

Crear Modelo

Se creará un nuevo modelo Items

Al lanzar la aplicación mediante npm start en el enlace http://127.0.0.1:3000/explorer/#/Items se podrá visualizar:

Angular 4

Para crear el cliente se deberá ejecutar:

$ npm install -g @angular/cli
$ ng new client

Una vez creado se ejecutará mediante el comando: $ ng serve

Generar SDK

A continuación se generará el cliente SDK con la herramienta SDK-Builder, para ello se deberá seguir estos pasos:

$ cd to/loopback/project
$ npm install --save @mean-expert/{loopback-component-realtime,loopback-sdk-builder}
$ ./node_modules/.bin/lb-sdk server/server.js /path/to/client/sdk

En este caso se utilizará la ruta de cliente ~~path/to/client/sdk~~ -> /client/src/app/sdk.

Una vez generado se configurará el cliente para poder utilizar los métodos generados en vez de las peticiones REST. Para ello se deberá añadir en app.module los import necesarios:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { SDKBrowserModule } from './sdk/index';
[...]
  imports: [
    BrowserModule, HttpModule, SDKBrowserModule.forRoot(),
  ],

Permitiendo realizar una llamada asíncrona desde app.component

import { Component, OnInit } from '@angular/core';

import { LoopBackConfig } from './sdk';
import { Items } from './sdk/models';
import { ItemsApi } from './sdk/services';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [ItemsApi],
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = "Cargando...";

  constructor(private items: ItemsApi) {
    LoopBackConfig.setBaseURL("http://127.0.0.1:3000");
    LoopBackConfig.setApiVersion("api");
  }

  ngOnInit() {
    this.getItems();
  }

  private getItems() {
    this.items.count().
      subscribe(
      data => {
        console.log(data);
        this.title = "total " + data.count;
      },
      error => console.log("Error getItems() found")
      );
  }
}

Bootstrap

Añadir dependencia:

$ npm install ngx-bootstrap bootstrap --save
$ npm i ngx-bootstrap@next

En angular-cli.json

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
]