Unleash the power of AngularJS to your users' computers

Following our introduction to the Electron framework, this article wants to give you the tools to develop and serve a real, complex application to your users, regardless of their platform.

To illustrate this article, we enriched our electron-boilerplate repository. You can checkout the electron-with-angular branch to see how we put in place AngularJS on our project.

Context of the project

Here at Theodo, we specialise in delivering apps and websites to our clients using the latest web technologies. So, when a former client came back to us with a project of an offline Windows application, this seemed far from our zone of expertise. However, we were able to put our skills to work to answer his needs with the help of Electron.

If you have never heard of it, you might want to read our previous article or follow the Quick Start Guide on the official website. In short, this framework allows you to serve web contents to your users in a desktop application. The best known example is Github’s IDE : Atom.

As soon as our development environment is set up with Electron, we can get back to better-known grounds such as AngularJS.

Cleanig up our folder structure

If you have read our previous article, you might have noticed where and how Electron launches your app. Everything takes place in the main.js script that runs your main process.
More exactly, all the magic happens with this particular line:

mainWindow.loadUrl('file://' + __dirname + '/index.html');

The loadUrl function takes the URL of your app’s entry point file to render it in your mainWindow process.

The example above corresponds to the Electron minimal app given in their “Quick Start” tutorial, with the folder structure being:

your-app/
├── package.json
├── main.js
└── index.html

For any project, you can expect files to multiply quite a bit and it is important to keep our workspace clean and logical throughout the lifespan of the project.

To do so, we decided to add a folder where all our code would go:

your-app/
├── client/
    └── index.html
├── package.json
├── main.js

To keep our app running, we had one change to make to the former configuration. It was to tell it where to look for our index.html now that we had moved it!

mainWindow.loadUrl('file://' + __dirname + '/client/index.html');

Using AngularJS with Electron

In this section, we explain our choice of using AngularJS alongside Electron. This is not an obligation, and you are free to code your app in anyway you want, provided you tell Electron where to look for your index.html file.

The fact that Electron needs a single file as an entry point to your app turned us quickly towards the AngularJS framework. Indeed, with Angular, everything starts at with the index.html file of your app.

From this point onward, we only had to work on building a functional Angular app answering our client’s needs. Much closer to our core business wouldn’t you say?

To convince you of how easy running an Angular app with Electron is, checkout our work on our repository.

As explained in the “Unleash the power of AngularJS for your desktop app” readme, we chose a sample Angular app on Github. With no further change to Electron’s configuration, we copy/pasted the app’s code in our client folder. And there it was, running on any given platform, whether it was a Linux, a Windows or a Mac computer thanks to the power of Electron.

To infinity and beyond

Coding with Electron, we realised it offered us even more possibilities than coding a regular Angular app intended for running in a browser.

Indeed, one of the main advantages of Electron was our app’s ability to communicate directly with our user’s computer through Node modules. This means you can easily write files on the computer, access its information etc…

A whole world of new opportunities, from which we have selected a few that will be detailed in following articles. Stay tuned!

[joinus]