Reflections on AngularJS

I started learning JavaScript a little over a year ago, but before starting at DigitalCrafts, I was entirely focused on just learning vanilla JS and jQuery. Despite all of the hype (some might call it noise) in the web development world, I generally avoided frameworks because they seemed overwhelming, especially because I was mostly self-teaching from books and the internet. In fact, one of the main reasons I wanted to attend a coding bootcamp was to learn some of the newer technologies commonly used in the industry. Angular 1 was probably the topic on the 16 week curriculum that I was most interested in and so far, I’ve been impressed by what it has to offer.

Conceptually, Angular is a significant departure from how front-end code is typically organized. Instead of writing up a bunch of HTML and modifying it with JS, you write a template loaded with JS (in Angular’s jargon) that compiles on page load and builds the HTML dynamically. It’s a complete role-reversal. As our instructor Toby said in one of his first presentations on the topic: “It’s the DOM that knows about the JS rather than the other way around.” Wrapping my head around this idea has been fairly tough but just like learning anything else, it begins to make more sense once you get in there and start building things.

One of the coolest features Angular has to offer is two-way data binding, which means that information that’s changed in either the model (the data) and the view (the visible page) will instantly be modified in the other. This looks like straight-up magic when you see it for the first time. For example, while building a movie search engine app, some of my fellow students structured their pages so that a user’s results would update on every keystroke, which is pretty slick. This lightning-fast feedback is a key aspect of one of Angular’s best uses: single page applications. An SPA is a website that loads its layout and some content up front and then only has to update the specific content that the user asks for rather than having to refresh the entire page to fulfill what might have just been a small request. The reduction in load time is typically so drastic and the performance so much smoother that using the page feels more like using a dedicated application rather than a website…hence the name.

Angular has its own extensive environment that’s unlike any other web technology I’ve used before. There’s a lot of terminology to learn, much of which ties into what I mentioned before regarding “the Angular way of thinking”. Despite this fairly steep learning curve, I can already see the benefit of investing time into understanding this tool. Some of the new concepts I’ve been digesting over the past week include:

  • Dependency injection: the ability to pass modules (chunks of code) around to other modules freely and easily
  • Services: bundles of code that serve a specific purpose (such as making AJAX calls) and are engineered to neatly fit into the architecture of Angular applications
  • Directives: attributes that are attached to HTML elements in order to define the behavior of the application

Angular has been impressing me since the first day we started learning it. A recent instance of this was when I learned that you can define and use your own directives in Angular. Here’s a link to some code I wrote in order to better understand this idea. The point of this feature is to minimize redundancy and increase flexibility — for example, take this HTML form:

<form>
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="form-group">
<label>Last name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="form-group">
<label>Email address</label>
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

This is what I reduced it to using custom directives:

<form ng-show="showForm">
<form-group label="First name"></form-group>
<form-group label="Last name"></form-group>
<form-group label="Email address"></form-group>
<form-group label="Password" type="password"></form-group>
<bt-button type="submit">Submit</bt-button>
</form>

Now we’re talking. All of the clutter of typical HTML markup has been defined within the <form-group> directive, and all of the associated properties and even the <label> tag are defined as attributes inside the directive. It’s simple, modular, and easy to scale.

Another useful thing about custom directives is being able to clearly and succinctly describe behavior. Here’s another example featuring a button that toggles the previous example’s form visibility when you click it and also changes the button’s own text:

The button itself:

<toggle-button on-text="open form" off-text="close form" bool="showForm"></toggle-button>

And the code for the custom directive:

app.directive('toggleButton', function() {
return {
scope: {
'onText': '@',
'offText': '@',
'bool': '='
},
controller: function($scope) {
// sets the button text on page load
$scope.text = $scope.onText;
$scope.switch = function() {
$scope.bool = !$scope.bool;
if ($scope.bool) {
$scope.text = $scope.offText;
} else {
$scope.text = $scope.onText;
}
};
},
template: '<button ng-click="switch()">{{text}}</button>'
};
});

The visibility of the form is determined by the directive ng-show=“showForm”. When the button is clicked, it calls a function to switch a boolean state variable to its opposite state (either true or false). This affects both the text shown on the button and the value of the showForm variable. Because the variable bool changes when the button is clicked, its value that has been linked with showForm does as well, therefore showing or hiding the form. Again, here’s a link if you want to try it out yourself.

Angular is still very new to me, but I’ve been enjoying what I’ve learned so far. We’ve built a few small projects in class and I’m consistently fascinated with how fluid and powerful it is. This upcoming week we’re going to be using it to build out the front-end of the e-commerce sites we’ve been working on — I’m looking forward to it.