[Tutorial] Node.js Webkit Desktop app with AngularJS - A Todo List
In this post, we’ll implement a simple Node.js Desktop application with Node-webkit, Bootstrap and AngularJS :) This is a recipe to help you getting started with Desktop development with Node. To show you the basic about Node.js, NW.js and AngularJS, we’ll create a simple Todo application.
So, let’s start :)
I - AngularJS
It’s a powerful JS framework to develop big web apps easily, because it provides a good interface between your HTML(views), logic(models) and configuration files.
AngularJS is one of the most used JS frameworks, and in this post, I’ll show you how to use its features to help you with Desktop app development.
In this tutorial, AngularJS will help us with the application views, routing and logic.
II - NW.js - Meet the Node Webkit
It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.
Using NW.js brings a lot of advantages:
- Apps written in modern HTML5, CSS3, JS and WebGL.
- Complete support for Node.js APIs and all its third party modules.
- Good performance: Node and WebKit run in the same thread: Function calls are made straightforward; objects are in the same heap and can just reference each other;
- Easy to package and distribute apps.
- Available on Linux, Mac OS X and Windows
For more information, visit the NW.js web site
About the Tutorial
You can get this tutorial source code at github:
|Get updates||Follow @aron-bordin|
And this is the Running demo:
III - Hey Yeoman! Give me some directions!
To create a new project, it’s a good idea to use Yeoman. Yeoman helps you to create new projects, providing best practices and tools to help you stay productive. It’s a project generator, so you basically needs to select a project template and Yeoman prepares everything for you.
You can check for project generators here: http://yeoman.io/generators/
IV - Creating the project
First, if you don’t have Yeoman installed, just run the command to install it globally:
Also, in this tutorial you’ll need Bower and Grunt. So, run:
Here we’ll be using the Node-webkit generator https://github.com/Dica-Developer/generator-node-webkit
Now, go to your project directory(or just create a new one) and run the following command to download the template:
Type basic information about your project(name, description, etc).
We’ll use TODC Bootstrap with Bootstrap to design the UI. Add them as a dependency::
Install the project dependencies with:
V - Build and Run
(You can read more about node-webkit-generator here)
On a Linux use:
You can see the build output in the dist folder.
After building, you can run with:
If everything is working, you should see your first NW.js app running:
Your application settings goes on app/package.json. Edit the
main field to use the index.html.
In this post, to ignore jshint errors, open the Gruntfile.js and find
and inside the array, remove
VI - Application UI
Let’s start the development ;) Now you’ll do everything in the app folder.
First, a simple overview of the Application. To show you the basic about AngularJS routes, this app will have two views:
- Todo List
- List Todos
- Todo Editor
- Used to create a Task
So, first start with the
Here we have some important points.
The app.js initialize your application with
var todoApp = angu ... and then set the application routes in the routeProvider.
Notice that, when your app navigates to
views/todo.html will be loaded.
This file is usually used to configure your app settings.
Now, create the
js/controllers.js, this file will contains the app logic.
This code create the application controller and initialize two controllers,
and just to test, on
You can run the app now, and if everything is working, you’ll see the hello world :)
If it’s working, just update your app/index.html’s body:
This is a simple html template with the Navbar at top, and then we add a Angular view inside
We need to move the html body bellow, then, edit the
VII - New Task
Now, let’s implement the New Task logic and view.
First, create the
views/todo.html with the following layout:
This is a simple html form. The ng-click=”newTask()” will call the
newTask function in the controller.
And form fields use ng-model directive to bind data.
Here, to save the tasks, we are using Node.js lowdb, a simple json database.
Add the following code in app.js
And then update your
In this controller, we create an empty task and declare the newTask function, that will push the new task to the json db.
VIII - Listing Tasks
Let’s start with the view/index.html
First we declare a html table to display our data, with two buttons: “View”, “Delete”. And then we declare a modal to display the task.
And you can update your
This code loads the tasks when loading and declare the functions to delete and view tasks.
Check the full demo working:
If you prefer, you can now easily add more features to this simple Node.js Webkit Desktop App :)