18 Feb 2014
Introduction to Jaggery.js from CmbJS
First is the slide deck. It doesn’t have much slides but gives a list of features of jaggery.
Next is the interesting bit where we develop a todo-list app from scratch. I am using Angular for this project since I am tried of binding stuff to my UIs.
First clone the Github project for the hands-on exercise. I took [Grunt] and [Yeoman] as the tools to scaffold the app.
Next download the Jaggery server from the jaggerjs site and extract the server. In the server there is a folder called apps. This folder has all the apps that will be deployed when the server starts up. To start up the server run
sh bin/server.sh. I have [soft linked] the cloned repo’s app folder to the apps folder of the jaggery server.
When you browse to
https://localhost:9763/apps/app it will show a scaffolded page. Next we are going to remove that content and place a list with some angular directives.
When we have the todos object in the angular scope, it will be looped and added as
Next objective is to get the todo items from the server side. Before go further we have to know little bit about the jaggery.conf file.
jaggery.conf to the rescue
- URL mappings
- specifying log level
- basic authentication
- error pages
We are going to add a
jaggery.conf file for our app as well.
What this will basically do is - map all the requests that arrive to
api/* URL pattern to the
After mentioned the
.jag files you might be confused as to what’s this new extension.
.jag is the extension used for jaggery.js server pages. Below is our
We have used a module called goose.js that is used for jaggery routing and added a route for
todos endpoint. We’ll also change our client side accordingly.
Querying the Database
Jaggery.js has a neat feature to get database tables as json objects. First we have to download the driver of the database, in my case MySQL driver and place the driver in the
I am also going to create a table called
todos in a database. Below is the SQL for the table -
Next I am changing the
router.jag to query the database.
If you view the page now - you’ll see that the rows in the table got rendered to the list.
Adding a new todo
We added the
In our controller we also extracted the logic to get new todos to a method called
list_todos(). Calling this method when the script runs will add the todos to the current scope. Also when a new todo is added it will rerun the method to get the new todos from the server and adding it to the current scope.
Now we are going to prepare the server side for the adding of a todo item.
Ticking a todo
Now what’s left is crossing off a todo when it’s done. For this we are going to modify the html of the view first.
Only change we did was add a
Next tweak the
router.jag to handle the new
put API call.
Till next time mate,
Dulitha at 20:19