Node webkit and Angularjs – A MovieStub App

This post is part 3 of 7 in the series Node Webkit Apps
Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

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

Prerequisites

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.
@arvindr21

Series Navigation<< Node Webkit powered Dashboard applicationnode-webkit and Firebase – Simple and Social Authentication >>
Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • Hornigold

    Even after copying the code from GitHub….. it does not respond to Review and Book Ticket options. It just refreshes the movies list and the node server issues /GET 304 error…. :)

  • Hornigold

    Please ignore my previous doubt. I think the code shown in the web page is different from the one in Github. I started comparing myself… and if I still have a problem, I will get back to you. Sorry and thanks.

  • Hornigold

    Hi Arvind, I have tried the whole sample, But I am not able to go to mybookings, book or review. the code looks correct, I am trying to understand the data / control flow . I don’t want to download from Github. Is there anything wrong in the code shown in this web page? Please let me know. Thanks in Advance. The URL for book tickets is “http://localhost:2595/#!/#%2FbookTickets%2F3″ & Review is “http://localhost:2595/#!/#%2Fmovie%2F3″. Can you help me?

  • Sarvani Annamraju

    Hi I have already built web application built on angular and node js and I want to use same code for desktop application. How to do that without express?

  • Cl Sah

    I simply download code form git and run own local host then it doesn’t show anythings. I attached screen shot please find.

  • catchlui

    Hi Arvind…It’s very well explained..it would be great if you start creating video tutorials :)

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks catchlui, I will soon!

  • Eric Leibenguth

    Thanks for the tutorial. What IDE are you using? I really like the fact that you can select node-webkit as the build system, and then just run it with ctrl-b. I am using Atom on Ubuntu, but it does not offer this level of integration.

  • Leroy

    Thanks so much for taking the time to put this together! It’s easily the best tutorial for anyone looking for a quick example on how to use the two techs together! I’m as impatient as they come and wanted a quick way to review nw and ng working together so this was great for me!

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks Leroy! You can check out my other tutorials on Node webkit too where I integrate Node webkit with other technologies like Ionic and Firebase.
      (Series : http://thejackalofjavascript.com/series/node-webkit-apps)

      — Thanks.

      • Leroy

        Oh don’t worry, I’m going through you’re whole back catalog! You’ve done a lot of great work here! Great stuff.

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Great! Thanks.