I’m always eager to store data, and AngularJS helped me turn a simple front-end app into a SPA that does just that! (Until you refresh the page, at least.) But I wasn’t always charmed by Angular.

When I was first getting my feet wet with JavaScript and jQuery, I built an application that converted Arabic numerals to Roman numerals. It was centered around a Roman numeral algorithm I’d written for Free Code Camp. As a Latin teacher at the time, I was particularly thrilled by this. I soon modified the app to have it generate random numbers and quiz the user on their Roman numeral conversion skills. It looked like this:

The app was nice and relevant to my interests and (according to others) a bit girly-looking, but not terrifically impressive. So when I started beefing up my JavaScript skills with AngularJS, I thought this app would be the perfect one to rewrite in Angular, purely as a learning exercise.

At first, things were going well. I injected $scope into my single controller and reveled in the eloquence of the Angular syntax. {{ controller.arabicNumber }} was so much more pleasing than all my div id’s hooked up to the jQuery.

When I did away with $scope in pursuit of slightly more advanced techniques (using a controller AND a service!), I began to question the supposed magnificence of Angular. Why had my JavaScript file suddenly doubled in size? AND I was including the AngularJS source file as well? This seemed way more inefficient than my old-fashioned jQuery system.

My tune changed when I began to include UI-Router and templates in the app, which greatly expanded the app’s capacity. I was able to add a template to display the user’s history of answering the app’s problems. I wrote a function in the service to store each of the user’s answers (along with the correct answer, and whether or not the user was correct) and set up a new controller to dispense this data to the new template.

Now (until the browser was refreshed), the user could click on the “User History” link at the top of the app and view their history of answers. More importantly, teachers could assign this app to be used as homework and have definitive proof (through a copy-and-pasted email or screenshot) that the student had completed it. I also made a template including suggestions for how teachers could use this app in the classroom.

In fact, I designed the “User History” page with the teacher in mind: the answers are given in an ordered list (in case the teacher wants to assign a certain number of problems) and the total number of correct answers is displayed at the top (in case the teacher wants students to get a certain number right, or just create a competitive atmosphere in the classroom).

Now AngularJS was worth it: I could have my fun quiz app, and have it store the user’s history of answers… without any backend or database! As long as the user didn’t refresh, their data would remain in the browser window. I could actually see teachers and students using this app.

Here is the finished product, Roman Numeral Quiz:

I recommend AngularJS for anyone who wants to make a SPA that temporarily stores data. Of course, Angular can consume external APIs and serve other functions, but as a data enthusiast, I particularly appreciated this ability of Angular. And while jQuery often suffices for simple apps, building projects in your target language or framework is the best way to learn it–so build away for the sake of learning!