AngularJS on Raspberry Pi

Being a library assistant at a technology school allows me the opportunity to do some really cool things.

Just recently I put together digital signage that promotes our library and school events. I had the opportunity to use some AngularJS in the process.

This project was the third time I utilized Raspberry Pi at work to create digital signs. I used PiPresents, open source software, which runs in python. The software allows me to display slideshow containing videos, photos, text, and even webpages. I put together some awesome infographics along with a web app that displays time and weather.

I used AngularJS to do an http request and data-binding on the web app slide. Once I got the application to work I experienced load time issues. The way I was able to initially speed up the load time was by making less http requests. I downloaded AngularJS locally, along with all the images and instead of doing an http request to the weather api, I downloaded the weather api to the raspberry pi every 10 minutes and pulled from a local JSON file.

To get the api to download locally, I used the Linux wget command. This command was put as a loop at the bottom of the Linux .bashrc file. However, when I did the http request to the local file, I got an error in the browser console and no load. To fix this I installed a local server with Apache and made it run on boot. I then had PiPresents pull my Aangular app from the htdocs directory in Apache and all was well! My app loaded quickly and accurately.

If anyone is interested in using a Raspberry Pi to display web based digital signage, I highly recommend running a local server. This will highly optimize the load time and make the user experience much better.
webapp-e1453186391809-660x1024

Fig1. – AngularJS weather app running on Raspberry Pi and TV.

About the Author Eddie Pantoja

I really like programming in JavaScript. I am a full-time Programmer Analyst with the County of San Bernardino. When I am not at work, I love to hike and play tabletop games!

follow me on:

Leave a Comment: