A year ago I wrote my first AngularJS app – TrackerKeeper. It’s a goal management app written in AngularJS 1.5. Read all about it here.

At the time I created it I had designs on refactoring it as a standalone mobile app in Angular 4+, something in the vein of an Ionic 2 application. To that end, I’ve taken a giant step toward competing that goal. Here it is, new and improved TrackerKeeper in all it’s Angular glory. From here on out I’ll be referring to it as TK2 because why not.

Why Angular 4?

This is a two-parter. First off, in all honesty it’s the front-end framework we use at the office. So, I got to kill (wait, why so violent? I’d rather say I maimed) two birds with one stone. By learning a rad new JavaScript framework and boning up on some applicable skills at work it was a win-win I wouldn’t let slip by.

Secondly, I liked AngularJS but I knew Angular was a different animal; an animal written in TypeScript (which a bunch of devs I know said they liked). I love writing JavaScript and TypeScript lets you write it with all the modern features of the newer versions, like utilizing the module pattern with import and export statements. And let’s not forget, Angular still has all the cross-browser compatible polyfills built in so you don’t have to worry about that mumbo jumbo.

What’s New?

With this go-round I had the opportunity to keep what I liked, cut out what I didn’t, and add some new features I wanted since the original came out. Obviously, with the luxury of having a year’s worth of testing under my belt, I knew the interface could use a facelift. But there were also a lot of underlying structural improvements I knew I wanted to implement for maintainability’s sake.

Crucially, the biggest difference occurs behind the scenes. I entirely retooled how my services operated (mostly because I’m admittedly still learning this craft and I’ve gotten a much better understanding of how and why services are used). This let me cleanup my controllers (TypeScript Classes) by removing heaps of business logic (which I should have already done in the first app, I know).

As for the interface, I kept it more minimal this time around. I focused solely on mobile design so I kept the navigation more icon based and focused on user flow. And my favorite new feature must be the charts I implemented by way of HTML5 progress elements. By orienting them vertically and grouping multiples close together, they take on a bar chart appearance and offer a striking visual representation of your progression as you make headway toward completing your goals.

Give ‘er a spin here.