Node webkit and Angularjs – A MovieStub App7 min read

Node webkit and Angularjs – MovieStub App

In this post, we will take a look at building Node webkit based desktop app using Angular js. By the end of this post, we are going to build a Movie Booking desktop application, where a user can see a list of movies and book tickets as per availability.

The final product would look like

Screen Shot 2014-08-11 at 8.25.26 am Screen Shot 2014-08-11 at 8.25.48 am Screen Shot 2014-08-11 at 8.26.04 amYou can find a live demo of the web version here. You can find the complete code here.  So, let us get started


To build a desktop application using web technologies, you need to be aware of Node webkit. You can find more on Node webkit : Node Webkit – Build Desktop Apps with Node and Web Technologies and you can find an implementation : Node Webkit powered Dashboard application.

If you are not already aware, Angularjs is a Superheroic JavaScript MVW Framework, which makes build web applications developer friendly. If you are new to Angularjs, I would suggest taking a look at Angularjs – A Hands On tutorial.

In this post, we will build the same application I have developed in the Angularjs – A Hands On tutorial post, but will be porting it to a desktop application.

I would also recommend using Sublime text while working with node webkit apps. Refer here for more info.

Project Setup

Create a new folder named nwk-ngApp and open a new terminal/prompt here. Run

npm init

The final package.json  with node webkit configs would look like

Now, Create two new folders named css and js. Inside the js folder, create a new folder named lib. We will be downloading Bootstrap and Angular dependencies and dumping them to respective folders.

You can download the latest copy of bootstrap.css and bootstrap.js from here. Next we are going to download a copy of angular.min.js, angular-resource.min.js and angular-route.min.js from here. Finally download jQuery from here.

Now, create a new file named index.html and add the below code

Your project structure so far would be

Screen Shot 2014-08-11 at 8.53.45 amNow, press ctrl + b or cmd + b inside the index.html after setting the current project’s build system as node-webkit

Screen Shot 2014-07-20 at 5.31.35 pmAnd you should see

Screen Shot 2014-08-11 at 8.55.24 amTo enable the debugging toolbar, back to package.json and set toolbar to true. Now when you launch the app, you will see the toolbar and you can click on the gear icon to debug the application.

Screen Shot 2014-08-11 at 9.00.21 amSo, now we are all setup to build the actual application.

Continue Development

Now, we will be focussing on the app developement. First up, we will show the list of movies a user can pick from. Create a new file inside the js folder and name it app.js.  Update app.js as below

Here we are creating a new Angular module and we are injecting ngResource  and ngRoute  as dependencies.

Next we are going to register a service, from which we are going to fetch the data as well as save the data to. Inside js folder, create a new folder named service and create a new file named services.js and update it as below

Our app is going to have 4 views

  1. Show all movies
  2. Show details of each movie
  3. Book tickets
  4. Show Booked tickets

So, for each view, we will have one controller. Inside js folder, create a new folder named controller and create a new file controllers.js. Update controllers.js as below

Refer prerequisites for further explanation.

Next, We will wire the views & controllers to the routes. Inside the js folder create a new folder named router and create a new file named routes.js and update it as below

Now, we will create the views we have defined in the above routes. Create a new folder at the root of the project named tmpl. Create a new file named home.html and update it as

Next, the header. create a new file named header.html and updated it as


Now, a view to display individual movie details – movie.html

A view to book tickets – bookTickets.html

And finally a view to show the bookings – bookings.html

To clean up the UI, create a new file named app.css inside the css folder and update it as below


Now, the updated index.html

Save all the files and build index.html and you should see the Moviestub app!

Hope you got an understanding of how to integrate an Angular js app with Node webkit to build desktop apps.

Thanks for reading! Do comment.