JayData.org

Jaydata and AngularJS continued

Author: Gábor Dolla October 22nd, 2013


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

In the first blogpost about our new AngularJS module we created a simple master-detail list using remote Northwind database with oData. Let’s enhance it further so it becomes a fully featured product editor which can be used to edit existing products, to delete products and to add new products to our database.

Edit products

Two-way binding is not unique to AngularJS, other frameworks like KnockoutJS, KendoUI, JsViews  also give you this feature, but still it’s quite handy. With a few lines of javascript and a little additional markup you’re ready to edit the various properties of the selected product and your changes in the form are written back to the backing model.

For the actual save we use JayData with JSQL:

Remove a product

It really is a no-brainer. Let’s add a button alongside the save button:

And add a simple method to the scope:

Add a new product

“Everything should be as simple as possible, but not simpler” Mosolygó arc  Add a button to the Product list:

And finally the function to create the necessary backing object:

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

To be continued…