Jaydata and AngularJS

Author: Gábor Dolla October 15th, 2013

Please be sure that you use the latest JayData, 1.3.4 or newer !

Be sure to check the next post on this topic at: http://jaydata.org/blog/jaydata-and-angularjs-continued!

You can see this example running at http://jaydata.org/examples/AngularJS/ProductEditor where you can also play with it.

Our kudos to AngularJS team for their help.

The model part of AngularJS is really simple, it just uses Javascript objects that can be bound to the UI. Being simple is good and bad at the same time. It’s good because it’s easy to comprehend and the developer is not limited by some API but it’s also bad because the developer has to reinvent the wheel sometimes. Other frameworks like EmberJS Data, KendoUI, Sencha, Backbonejs all offer some mechanism for defining a schema, doing basic CRUD operations, etc.

On the other hand JayData shines in just those areas where AngularJS is lacking so JayData + AngularJS can be a match made in heaven. With JayData the developer can define the schema of her data, can do all CRUD operations with local or remote databases and other nifty stuffs. We’ve created an extension for JayData which makes the cooperation between the two frameworks seamless.

First steps

You’ll have to include jquery, angularjs, jaydata and the jaydata-angularjs adapter:

Let’s add some markup:

And add some Javascript:

So what is going on ? AngularJS will create an instance of our controller (ProductEditorController) and a new scope, which is our model. We add an empty array to the model. It will hold our records once we’ll have them but currently it’s empty and so will be the list on the screen. Our code in the controller is executed so we create our context to our remote Northwind database using JayData. When the context is ready we download all the Categories from the remote database and give the data to AngularJS which will update the list with the category names.

toLiveArray() is a new method which is only available when you include the angular.js module of JayData. It extends our toArray() method with two new behaviours:

  • As we get the data back asynchronously AngularJS must be notified when the data is ready so the UI must be refreshed.
  • It caches the data returned. For the same query we must return the same objects so AngularJS won’t rerender the screen. Returning the same data but different objects would trigger a rerendering.

So far so good. The next function that we add to this example is to list the products belonging to a category when the category is selected. The necessary steps are:

  • make the category selectable so we create link from the name
  • when a category is selected (the link is clicked) we store which category the user selected
  • download the products belonging to the selected category
  • update the screen with the products

Most of the steps are straightforward but we add a little twist here. When something happens like a click on a link AngularJS tries to update the screen by comparing the model (the scope) with its previous state. For the comparison the current value must be read and we utilize this mechanism. We override the getter method of the property ‘categoryProducts’ so when AngularJS tries to read its actual value it triggers our function.

The updated Javascript:

If you’re uneasy about defineProperty then of course you can use $watch:

Read our next article on JayData and Angular.js with CRUD operations – Jaydata and AngularJS continued

You can try a live example of Angular.js integration here – Angular.js product editor with JayData