At this point, you’re probably starting to feel confident. You experimented with some powerful features of Postgres, quickly made great-looking screens with Bootstrap, and created a dynamic user interface without a lot of code thanks to Angular. You also have rock-solid tests for every part of it. Now, it’s time to level up.
In this chapter, we’ll turn our simple customer search feature into a full-fledged single-page app using Angular’s router and navigating users between pages—all within the browser. You’ll learn how to put our view templates in separate files instead of string literals inside our JavaScript code, and see how to use test-driven development (TDD) to add features.
To illustrate all this, we’ll start on a feature we’ll build over the next few chapters. The feature is a detailed view of the customer’s information, which includes more data than we saw on the result page and requires pulling in data from many different sources, all viewable on one screen, similar to what is shown in the figure.
First, we’ll turn our existing Angular app into a single-page app that allows navigating from the search results to the detailed view (which will just be bare-bones, initially), like what is shown in the next figure.
To make this happen, we’ll set up Angular’s router, making sure our Angular routes play well with Rails’s routes. We’ll then add a second component to represent the detailed view, and write code to navigate to it when the user clicks a new button that we’ll add to the search results. This allows you to learn about one of Angular’s component life-cycle methods, which we’ll use to parse Angular’s route. Finally, we’ll use TDD to connect our new component to the back end in order to fetch customer details. This will give you an outline of how you can develop features using Angular and Rails, as well as serve as a second example of how to test this code.
But first, let’s extract our templates out of string literals and into HTML files, since this will make it much easier to manage our application in the face of multiple components.