Literally the first AngularJS app everyone writes

So, I’m a fan of Javascript frameworks. I don’t know if that’s a controversial opinion or not. I’m in the camp of people who don’t believe they should write everything from scratch (well, obviously, since this is a WordPress site).

There are a lot of great frameworks. My personal favorite so far is AngularJS from the Google people. This is not a religious statement. I’ve written some StackOverflow answers about JQuery and pondered about new offerings like ReactJS. For me, for now, I like Angular.

Why Angular?

Probably my favorite thing about the Angular framework is that it clearly delineates the various pieces of code without making any assumptions about what they should be. EmberJS also has a very intuitive distinction between Models, Views, and Controllers, but I feel like Ember demands more rigidity on the server side. In other words, Ember’s conventions seem more inflexible to me, and that’s difficult since my web host is pretty exclusively a PHP machine. Maybe it’s just that I happened across Angular first, and “got it” more quickly. I could be convinced either way.

So what’s the first app?

One of the most radical properties of Angular is that you don’t actually have to write any Javascript to do basic manipulation on a page. The easiest example of this is a simple tip calculator, where you type in the dollar amount of your bill and the percent you’d like to tip, and the total bill is calculated automagically:

The code for that little bit of mastery:


<style>.ng-cloak {display:none;}</style>
<div ng-cloak ng-app ng-init="bill=0;tip=0">
  <p>Your bill: <input type="text" name="bill" ng-model="bill"/></p>
  <p>Your tip (%): <input type="text" name="tip" ng-model="tip"/></p>
  <p>Total: {{ bill * (1 + tip * 0.01) | currency }}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.min.js"></script>


What’s going on?

Basically, Angular is all about managing data in a given context, called a scope. The ng-app directive creates a new scope, and the ng-model directives declare variables within that scope. Those variables are initialized by the ng-init directive so that the “Total” expression has valid input at the start. Without that, the “Total” area would read “NaN” until the user writes numbers into the fields. The expression for total is just the basic tip formula piped through the built-in currency filter. One cool thing about this filter is that it automatically adjusts to the user’s locale, meaning UK users will see “£” while US users see “$”.

But how does it work?

Ultimately string manipulation. Javascript can do anything to the page it wants, including parsing the page for expressions delimited by curly braces ({{ and }}) and replacing them with calculated values in scope. This is exactly the kind of code best left to the experts, in my opinion. The last bit of trickery is preventing users from seeing the curly brace expressions while the Angular library loads and does its work. That bit is handled by the ng-cloak directive, which, unlike the other ones in this example, was declared as a CSS class. In general, angular directives come in three varieties: elements, properties, and classes. That’s right, you can create your own HTML elements using Angular directives, and that’s awesome! Most of the directives displayed here were properties like ng-app and ng-model="bill". The third type lets us sneak under the radar by declaring a CSS style on the page to initially hide the element (display:none). When the angular directive kicks in, it immediately removes the ng-cloak class to reveal the Angular-powered elements underneath.

Didn’t Google already explain this more clearly?

Yes, they did! However, I thought I’d take this opportunity to prove to myself that A) I understand it well enough to explain it and B) I can demonstrate single-page apps on my WordPress site. Mission accomplished.