There's a step-by-step game plan for using Listing Carousel as our focal point for our discussions as we cover the material in this book together. Though this book was not explicitly broken up into parts (that is, groupings of chapters), we can loosely group them now by partitioning the work we need to do for building our application into three main stages. Follow along with me, and this will all make sense—giving us a way to marry the material (that is, the book's chapters) to the application we'll be building together, as well as to give ourselves a target for what we're shooting for.

It's nice to know where you're going before you start driving and to be able to recognize where you are at all times. Having a roadmap/game plan like that makes the entire process more enjoyable, thereby maximizing the chances that you'll work through the book instead of just using it to look things up here and there. This book wasn't designed to be like a cookbook. Instead, it was designed to teach you how to cook. You will learn to cook by fire (pun intended), by preparing a meal of the right complexity—which demands a certain level of knowledge and skill to cook it properly. There are four main benefits of this book: 

• It gives you all the ingredients and even substitutes ingredients (that is, choices) that you need to prepare the meal.
• It gives you the knowledge and teaches you the process and skills required of the chef in order to cook the meal.
• It does these things in a methodological way so you learn it effectively and as efficiently as possible.
• The meal selection is a dish representative of the complexity of the majority of dishes you're likely to need to cook up. In other words, if you learn how to cook this meal (that is, our example application), you should be confident in being able to prepare any meal that you will be asked to prepare.

Cooking analogies aside, this book's promise is to teach you how to build a practical application using Angular through a methodological process. After all, if you think about it, that's why you bought this book—isn't it? Otherwise, you could have just tried to Google things here and there, hoping to be able to eventually piece everything together. That's not fun, nor is it an intelligent way to go about learning Angular. When you want to learn something new, or take rudimentary skills to the next level—in anything, not just Angular—you need to have a target in mind, and a roadmap/game plan to get there. Well, we know our target, which is to build Listing Carousel, learning Angular, and a bunch of other goodies, along the way. So let's now take a look at our game plan. 

In phase 1 of building our application, we need to decide what to build, what features it will have, and what it will look like. Once we have that all scoped out and wireframed, the next step is to build out the skeleton for our application. By the end of this stage, our application is likely to just be hardcoded—being nothing more than some HTML and CSS. Our only components will be the ones we select to use from Bootstrap's library of components. You can think of this as our application having skin and bones, but not yet having guts or a beating heart.

In phase 2 of building our application, well, you guessed it, we're going to start giving our skin and bones application some guts! Specifically, it will be Angular guts! Remember, in the first phase, we're not even using Angular at all—not a single ounce of it—which is intentional. Though our application will surely be more lively by the end of this second phase than what it will be in its first phase, it'll behave more like a robot—very mechanical. If you remember the movie, The Wizard of Oz, it will be like the Tin Man–very much alive, but with no heart. This second phase (that is, giving our application some guts) will be comprised of Chapter 4, Routing, Chapter 7, Templates, Directives, and Pipes, and Chapter 6, Building Angular Components.

Last, but not least, in phase 3 of building our application, we'll finally be giving our Tin Man a heart! Yeah! OK—what gives our application a heart? The answer is data and APIs! The data is like blood for our application, and the APIs are like the heart—taking data in and pushing data back out. I bet you never thought of web applications in this way, and, from now on, you won't be able to think of them in any other way (smiling). This third phase will comprise Chapter 10, Working with Forms, Chapter 12, Integrating Backend Data Services, Chapter 11, Dependency Injection and Services, and Chapter 14, Advanced Angular Topics.

Chapter 13, Unit Testing, and Chapter 15, Deploying Angular Applications, are not really parts of any of the phases per se, but they play a very important supporting role. In these two chapters, we will learn how to test the code we write for our application, and how to deploy it in a couple of different ways. 

That's our big picture look at our game plan. Let's zoom in a little, and take a look at our five-step game plan for our first phase of building our application, and we'll then be on our way to our first technology topic, SASS.

• Step 1: In this chapter, we're going to look at Bootstrap's responsive grid, as well as several of Bootstrap's components:
  • I'll be explaining how Bootstrap's grid works and can help us lay out our web pages.
  • I'll cover the Bootstrap components that we'll be using on our pages as we build out the pages—and we'll be using our wireframes to guide us, in conjunction with Bootstrap's grid.
• Step 2: In Chapter 5, Flex-Layout – Angular's Powerful Responsive Layout Engine, we're going to replace Bootstrap's grid system with Flex-layout. We'll only be doing this with a couple of web pages, leaving all the others with the Bootstrap grid. There are two reasons why we'll be doing this:
  • To show you that there are always alternate options available—and you can often mix and match these alternatives.
  • Being able to mix and match provides us with a path to replace one technology with another without the need to do it all in one shot. We don't want to keep rebuilding things in their entirety—we just want to redo enough of a couple of pieces of what we built originally in order to learn how to apply that specific alternate technology.
• Step 3: In Chapter 6, Building Angular Components, we'll be looking at how we can build our own components for use in our web pages. Since we are in control of the HTML and CSS when creating our components, we can leverage Bootstrap's components for the look and feel when creating our own Angular components. Note: Chapter 7, Templates, Directives, and Pipes, is a part of this as well, since these two chapters go together.
• Step 4: In Chapter 8, Working with NG Bootstrap, we will discover that there are ready-made Angular-ready Bootstrap components. Just as we will replace Bootstrap's grid with Flex-layout for a couple of our pages, we will do the same thing with components—that is, to replace a couple of Bootstrap components with components from the NG Bootstrap project. Our motivation for doing this is to realize that there are many different third-party components that we can readily use for our Angular applications—including ones that are based on Bootstrap's components.
• Step 5: In Chapter 9, Working with Angular Material, we will once again replace a couple of our Bootstrap components, but this time, they will not have any relation to Bootstrap components. The Angular Material project has beautifully designed components that are tailor-made for use in Angular applications and we'll learn how to incorporate a couple of those into our application.

Again, the important thing to note here is that we have choices in terms of technologies for both laying out our web pages, and as to which components we use—including creating our own custom components—when building our Angular applications. Furthermore, as you'll see in Chapter 12, Integrating Backend Data Services, you have virtually unlimited choices as to server-side and database technology stacks. And, in Chapter 14, Advanced Angular Topics, we will explore a couple of third-party authentication APIs we may want to leverage for our application instead of writing our own from scratch.

Yup! We have a ton of interesting stuff to cover in this book together. That said, let's focus on first things first, and get started with the goodies this chapter has to offer: Sass, Bootstrap, the typical evolution of software projects (that is, inception to realization), and building out our pages for Listing Carousel using Bootstrap (that is, Phase 1 of building our application). I'll provide a similar game plan for phase 2 of building our application at the start of Chapter 7, Templates, Directives, and Pipes, and one final game plan for phase 3 of building our application at the start of Chapter 12, Integrating Backend Data Services.

I know that was a lot of ground to cover, but reviewing our game plan was an important thing for us to do—it's always helpful to know where we are and where we're going. Now, let's pick up the pace and rip through the Sass crash course before our coverage of Bootstrap.