Home Ask Login Register

Developers Planet

Your answer is one click away!

Andrew Cheong February 2016

Self-contained Angular script and data in a single file


I'd like to create a "dashboard" to help me keep organized, e.g. issues I'm working on, issues I've delegated to others, email threads awaiting response, and so on. I know about issue tracking and project management software, but I wanted something lightweight and highly customizable, e.g. flashing red box when a test server goes down (pinged via async call every minute or so), to integrate everything I need to see in a single page.


I'd like to end up with a single HTML file with Angular scripts for adding and removing issues, emails threads, test server IP addresses, etc. Of course the kicker is that I'd like all this data to be saved in the file itself, so the next time I open this HTML file (or if I open it in another tab), my dashboard would always be up-to-date. Is this possible to do, or is there some security-related or filesystem-related restriction that makes it impossible?


I'm not permitted to install anything on our test servers, e.g. Apache, MySQL, nor on my own desktop at work—I had to fight IT to get something as simple as 7-Zip on my machine.

I read about HTML5's storage features, but I'm worried that an accidental disk cleanup or browser data cleanup might wipe out my dashboard.

These are the reasons I'm asking about a self-contained solution.

I only need this to work on my own desktop, I'm willing to use any browser to make it work, and it's okay if I have to grant some kind of permissions each time to make it work, since likely I'll open it once and keep it open until the next Windows Update shuts down my desktop.


chrisbright10 February 2016

Answer to your Question

Since the data in an Angular page is limited to what can be held in the browser you would need to write a custom directive to ping an API to read in the file each time, and some backend to serve up this data. this seems like more work than it is worth.

Answer to Your Problem

The better solution would be to have an Angular.JS frontend and a Firebase backend.

Related Info

Firebase is a Backend as a Service (BaaS) solution that seems to fit you needs. Firebase allows real-time data with very few lines of code. The free tier is quite adequate for what you are asking for and it would allow you to keep your items up-to-date with ease. Firebase has free hosting of your solution (with caveats) and since it is owned by Google (as is Angular) they play together nicely (e.g. they both use 2-way data binding). What's more is Firebase is a No-sql type solution so you can dynamically adapt the structure of the db objects to fit your needs.

I would go with that if I were you.

Post Status

Asked in February 2016
Viewed 3,647 times
Voted 11
Answered 1 times


Leave an answer

Quote of the day: live life