Chapter 3. Rapid Prototyping with AngularJS

In the previous chapter, we saw how to set up the various tools that will aid in building our AngularJS app. In this chapter, we will see how AngularJS lends itself as an excellent tool to create prototypes.

Rapid Prototyping is an excellent way of validating the goals of the web application you are planning to build. It gives useful and important feedback from users and stakeholders on various aspects of the application, such as user click flows, usability issues, and usefulness of the requirement specifications that were initially outlined.

In the past, prototypes were built using either wireframing tools, or developers would create a series of HTML pages linked with each other that would mimic the functioning of the web application. While the former never gave the right feel of how the app would look and behave, the latter would take a much longer time to build, especially if it was a large application.

Now, thanks to AngularJS, building such prototypes has become a lot easier, and one can build nearly functional prototype within a short time frame and with significantly less code.

In this chapter, we will do the following:

• Run through the various components of the application that we are going to prototype
• Understand Grid Layouts and see how Bootstrap works
• Add UI components such as carousels, accordions, and modal windows using Angular UI
• Learn the modular way to build pages using partials
• Create dummy data models to simulate dynamic data
• Use routes to link the controllers to the views