OK, to the service (angular service).
This is the piece that actually makes calls to back end.
Again, it’s pretty straight forward, if you’ve used angular before, just slight variations on the syntax.
However, few things to note here:
If you’ll look at Update method, this
var provider = this.resource(“/api/Product”, {}, { update: { method: ‘PUT’ } });
specifies a new method on provider, and tells it to use HTTP PUT, but for this to work you’ll need to make a change in d.ts file. So open angular-resource-1.0.d.ts, find interface IResourceClass, and add update: IActionCall; line to it. Good.
Also, there’s a catch with RavenDB and methods asking for an id. Raven’s ids by default look like “Product/123“, so when you’re making a GET/DELETE requests that look like DELETE http://mysite.com/api/product/Product/123 – MVC gets confused. If you just send a whole object, though, it figures it out just fine.. or you can actually specify an id as a url parameter, like this http://mysite.com/api/product?id=Product/123. You can always supply your own Id, of course, for example make it a GUID, or play with Raven’s DocumentKeyGenerator.
Almost done.
So now to the html, views, and directives.
index.html file looks like this
Pretty basic container, which requires a view module, specifying the routes and controllers:
And a last thing, a directive that displays a message.
Now this uses a pretty interesting mechanism to specify message to display.
First, this is how it’s called from html:
and this is the directive’s html, so that it makes more sense:
see the scope: { messageData: ‘=messageData’ } line in directive? It basically says to create a new local scope for this directive, and create a messageData variable in it. The content of this variable will be taken from a parent scope’s property, and that is defined by data-message-data=“OperationResultMessage” piece in calling code. So, in short, using this code, an OperationResultMessage property from parent scope is bound to the messageData property of a directive’s scope, and the binding it two-ways.
OK, I think that’s mostly it. If I missed anything – ask.
Again, the complete solution is on GitHub.