StrongLoop Loopback Yeoman Angular

Question

I'm trying to integrate StrongLoop Loopback [backend] with the Yeoman workflow [frontend] but struggling to unite the two codebases. I know I could independently develop my "backend" using StrongLoop's Loopback and just expose it as a REST API. However, I would rather develop using the Loopback Angular SDK and connect to the models programmatically within the same app. I'm wondering how I need to organize my folder structure, update my Gruntfile.js to include Loopback app setting for both serve and build functions, and only run one server instance for development (instead of "grunt serve" for my yeoman app frontend stuff and "slc run" for loopback backend stuff).

I've read about "plans" for yeoman scaffolding as opposed to the CLI workflow for Loopback but they are 5 months+ on Github without any updates.

Any guidance to make it work now (as opposed to waiting for this feature to be developed) would be greatly appreciated.

For reference: Here is the Loopback Angular SDK instructions with Grunt commands detailed http://docs.strongloop.com/display/DOC/AngularJS+JavaScript+SDK

Answer 1

There is a native $resource to interact with RESTful server-side.

Tutorial

Also you can use custom build service to combine loopback API and Angular front end:

angular.module('catalog', [])
    .constant('ENDPOINT_URI', 'http://0.0.0.0:3000/api/')
    .controller('CatalogController', function (ProductsModel) {
        var store = this;
        function getItems() {
            ProductsModel.all()
                .then(function (result) {
                    store.products = result.data;
                });
        }
        store.products = [];
        getItems();
    })
    .service('ProductsModel', function ($http, ENDPOINT_URI) {
        var service = this,
            path = 'products/';
        function getUrl() {
            return ENDPOINT_URI + path;
        }
        service.all = function () {
            return $http.get(getUrl());
        };
    });

Tutorial