Using AngularJS for fast prototyping

One of the big pain points in web application development used to be quickly prototyping site layouts. Now we have things like Bootstrap and other CSS frameworks, which give you a quick grid and a bunch of other reusable components.

But that does not solve the whole issue: In today’s web applications, standard page load style actions just don’t cut it anymore. You need to have all kinds of UI features, from tooltips to dynamic form validations and who knows what else.

How do you quickly build a working UI prototype for a highly dynamic web based interface? Everyone knows building DOM in JavaScript for doing that stuff is kind of a pain, even with jQuery or Mustache.

Here’s how: With AngularJS. Not only is it great for building dynamic UIs, it’s actually amazingly fast for prototyping as well!

Getting started

Prototyping UIs with Angular is very easy. You don’t even need to know much about how Angular works, as you’ll simply be using the data binding features most of the time.

Using Bootstrap along with this is a good pick, as there’s a great library, Angular UI Bootstrap, which wraps many of the useful Bootstrap components into AngularJS directives.

So slap Angular on your page, Bootstrap, Angular UI, whatever libraries you feel like might be useful.

Prototyping

Since we’re just going to be doing quick prototyping, we’re going to throw away many of the best practices.

Set up a controller for your Angular code, plonk it into the body, and that’s all you need for starters.

Now just start building your UI with Bootstrap components. Need to build some dynamic UI stuff? Use an Angular directive. Ng-bind, ng-change, ng-show, whatever. Do it the easy way.

Do you need some value in scope? Use ng-init. Even though it generally isn’t recommended, this is just a quick prototype, so might as well.

For example, if I wanted to build a prototype of a list component, I could simply do this:

<div ng-init="myList = []">
  <input type="text" placeholder="Name" ng-model="name">
  <button ng-click="myList.push({ name: name })">Add</button>
 
  <ul>
    <li ng-repeat="m in myList">{{m.name}}</li>
  </ul>
</div>

How much code would this be to set up using jQuery? Or even something like Backbone?

Thanks to the data binding in Angular, it’s very easy to do dynamic lists, removing stuff from the list, toggling elements.. All by simply adding a few attributes to your HTML markup.

Moving from a prototype to a real model

Another thing that’s great about prototyping with Angular is that it’s actually very easy to take it and refactor it into something maintainable.

You’ve already set up your model using ng-init, simply move your initialization into a controller. Data loading? Just set up your controller(s) to do some Ajax, it’s all wired in the DOM already.

If you have some clunky ng attributes, it’s very easy to take them and convert them into functions in the scope or directives. It’s almost just copy-paste.

For example, taking the list prototype I showed, I could simply have something like this instead:

<div>
  <input type="text" placeholder="Name" ng-model="name">
  <button ng-click="add()">Add</button>
 
  <ul>
    <li ng-repeat="m in myList">{{m.name}}</li>
  </ul>
</div>

function SomeController($scope) {
  $scope.myList = [];
  $scope.add = function() {
    $scope.myList.push({ name: $scope.name });
  };
}

Not a huge change as you can see.

Conclusion

There really aren’t many tools that give you the ability to prototype dynamic UIs almost for free.

When you prototype a UI with jQuery or such, you usually end up with a jumble of selectors and other crud. Refactoring that into something maintainable is usually quite a lot of changes.

Prototyping using Angular on the other hand is almost effortless, and moving from the prototyped code into code which is more aligned with best practices is very fast.

Angular is quickly becoming an almost must-have tool for me whenever more dynamic UIs are involved. It simply works beautifully well!

Want to know how Angular compares to Knockout or Backbone? Read my comparison of AngularJS vs Backbone vs KnockoutJS