JayData.org

AngularJS with JayData– store Todo items in your local database

Author: Peter Aron Zentai July 1st, 2013


This document is obsolete as JayData has been enhanced to better support AngularJS. Please use the updated info: http://jaydata.org/blog/jaydata-and-angularjs

It has been a popular topic across various JayData forums to have support for the fine AngularJS library. I am more then happy to announce that we have just started creating our AngularJS data service plugin that will expose the full JayData functionality to AngularJS controllers, directives or other services.

But in the mean time I provide two examples here on how to use JayData and AngularJS together along the APIs AngularJS provides for “things happening in the outer world”. The first example, detailed in this post, is the obligate Todo application that stores Task items locally using the JayData ItemStore API.  The other in an upcoming post deals with a Northwind OData service.

The JayData ItemStore API is a simplified subset of the full JayData Entity Classes API ideal for simple use cases without navigation properties or database indices. (The ItemStore API supports OData as well.) Read more here

Bootstrap

You’ll need jQuery, AngularJS and JayData included in the page. The simplest way here is just stacking them in the <head> block.

Please note that jQuery is mandatory for the ItemStore API since it uses jQuery promises as the means of interacting with the client.

Intial markup and controller: create and list Todos

Our controller will have a todos collections (array) and an addNew method.  As well the view defines a newTask variable.

Markup

CONTROLLER code

A couple of things should be noted here.

First the $data.define method creates an entity constructor that in turn is the database client for the Todo table as well. Based on its store configuration it can handle  webSql, IndexedDB, LocalStore or OData/WebAPI. By default the configuration is set to ‘local’ – JayData will find a suitable API to store local data probing for any of the listed local store options.

In the addNew() method we are passed an automatic scope variable named $scope.newTodo. This exists because in the markup two input controls point their ng-models to its task and done properties. AngularJS is cool. We will submit this generic JavaScript object to the save() method of the Todo type that returns a promise, and in the then() method we receive the final data instance that is of type Todo.

Finally it is the $scope.$apply. Since data operation happen asynchronously we must notify AngularJS when a data operation completes and UI needs to be refreshed. One way to notify the framework is using $scope.$apply to wrap our model/state changes.

Check this at http://jsfiddle.net/JayData/BMthf/.

Check the sqLite or IndexedDB database created in the background:

image

Updating items

JSFIDDLE: http://jsfiddle.net/JayData/vTwjc/

Let’s extend the example to provide a checkbox for altering the completion state of the task. This can be achieved by simply binding the checkbox input control to the Todo entity’s “done” field. Changes to the fields are not persisted automatically. The call to the save() method of the todo object will store the new value back to the database.

To achieve this we only need to modify the item template within the ng-repeat scope, and the controller can be left unchanged.

Markup

That’s pretty much to it. JayData entity instances have instance level CRUD methods (these are the save(), refresh() and remove() )  and these can be used as click handlers as well. But beware: this way your code will not be notified if an error occurs during an operation. The next paragraph shows how to deal with that.

Delete an item

JSFIDDLE: http://jsfiddle.net/JayData/DkPBg/

Only the D from the CRUD is left to be solved. In this case let’s create a controller method called remove() to handle the “Remove item” click. The controller method can access the actual item from the $scope.todo variable since we are in a repeater scope.

Markup:

Controller code:

As with all the ItemStore methods on the todo instance, remove returns with a promise. Use the then() branch to actually remove the todo from the screen. Use the fail() branch to display some kind of an error message.

An error in a delete can come from for example a cancelling delete event handler you attached to the Todo type. Read this post on event handlers.

Searching Todo items

A simple search feature will filter in the data store (or online data endpoint) using a simple predicate on the task field.

Extend the Markup:

Controller code:

Putting it all together:

HTML

controller.js

What’s next

In the next post I’ll show a bit more complex scenario: managing products and categories in a Northwind database, published with OData.