RFC: dynamic model resources in Angular [DO NOT MERGE]

[bajtos]

The pull request contains a spike implementation of module that can dynamically generate Angular $resource services for all Models exposed in a LoopBack app.

The solutions has several parts:

1. Server-side module

server/lib/angular-resources.client.js
server/lib/angular-resources.js

This module provides a middleware (request handler) that returns
Angular module defining $resource objects for all public models
defined in the loopback application.

It should be probably extracted to a new module, e.g. loopback-angular.

2. Server-side integration

One-liner in server/app.js to install the middleware defined above.

3. Client-side changes

Replace 'client/js/services.js' with the script provided by the new
middleware, rename 'starter.services' to 'lbModels' in depedency
configurations.

/to: @ritch @Schoonology @seanbrookes
/cc: @raymondfeng @altsang

[bajtos]

Note: I haven't run this code to verify that the hack solves the problem as expected. When we start implementing the Angular client properly, we should add an automated test to cover this part.

[ritch]

We can't depend on id being the property name that guarantees the model has been saved.

[bajtos]

We can't depend on id being the property name that guarantees the model has been saved.

How comes that? Could you provide an example (scenario), when it does not work? Is there any other way how to detect that a model has been saved?

BTW my understanding is that LB Models are hard-coded to use id, e.g. for the purpose of REST routing - see loopback/models/model.js and loopback-datasource-juggler/lib/dao.js.

[ritch]

app.model('foo', {properties: {myId: {id: true, type: 'string'}});

[bajtos]

Thanks for the example.

Just for the record, our iOS and Android client SDKs don't support custom name of the id property either. (discussion).

[bajtos]

Moving the discussion about custom ids to strongloop/loopback#126.

[Schoonology]

Minor: should be text/javascript.

[rmg]

@Schoonology Are you sure? Link?

[raymondfeng]

text/javascript is obsolete. application/javascript should be used.

http://stackoverflow.com/questions/876561/when-serving-javascript-files-is-it-better-to-use-the-application-javascript-or

[bajtos]

Express uses application/javascript, our template should use the same content type for the sake of consistency.

[Schoonology]

Non-SO: http://tools.ietf.org/html/rfc4329

I stand (rather, sit) corrected!

[seanbrookes]

I'm a little confused. I thought from our conversation today that the services.js file was 'virtual' but I see a physical file under the /client/js directory

[ritch]

@seanbrookes

this file is removed since we no longer need it

[seanbrookes]

my 2 cents:

• as I said before it is a little confusing trying to figure out where the factory reference is coming from.
  eg in controllers.js 'loginCtrl' has the following method signature: function($rootScope, $scope, $routeParams, User, $location)
• It took a little hunting before I realized I needed to look for the angular-resources.js file to find the 'User' factory reference.
• won't this also affect code helper plugins in developer IDEs? eg: I use WebStorm which has an Angular plugin. If the IDE can't read angular-resources.js it won't be able to provide code hints, etc.

• how to handle GET requests with the following syntax?
  "http://0.0.0.0:3000/api/dealers?filter[where][location][near]=-122.2577174,49.1499898&filter[limit]=25"

• the model definition seems to suggest the user creation api call should be User.create();
  but the code in the controller uses User.save(); this is confusing. It looks like there is a comment in the angular-resources.js file about some hack that adds 'save' to the model prototype, is that what is happening? This is another area where devs can/will get confused.

• Angular already has a file in its library called angular-resource.js so this may cause some confusion as well.

[bajtos]

@seanbrookes Thank you for your comments, I'll keep them in mind.

how to handle GET requests with the following syntax? "http://0.0.0.0:3000/api/dealers?filter[where][location][near]=-122.2577174,49.1499898&filter[limit]=25"

Try this:

Dealers.find(
  {
    'filter[where][location][near]': '-122.2577174,49.1499898',
    'filter[limit]': 25
  },
  function() { /* success */ },
  function() { /* error */ }
);

It is sort of a workaround that is available out of the box. I'll look into ways how to make it easier to use - I'd like to get to something like this:

Dealers.find(
  {
    filter: {
      where: { location: { near: 'lat,lng' } },
      limit: 25
    }
  },
  // etc.

[bajtos]

Actually, the second syntax should work too (probably since loopback v1.2.0).

[seanbrookes]

ok thanks, I'm running 1.4 so will give it a try.

[bajtos]

Moving to a different project.