Welcome to the first chapter of this book. You have hopefully picked up this book because you have experienced issues setting up the architecture of your Angular application. Your application has grown and in that process you slowly feel your are losing track of what your application knows at a given point, what we call the state of the application. There might be other issues, such as parts of your application not being in agreement with what they know. An update that happened in one part may not have been applied to some other part and you scratch your head, thinking should it be this hard and is there a better answer?
It's entirely possible you are just picking up this book as you have heard about NgRx as the way to structure your application and you are curious and want to know more.
Regardless of which motivation drives you to read this book, this book is about learning to structure your application and learning how to set up and communicate your application's state, and its changes, in a way that all parts of your application are in agreement on what is happening. The underlying architectural pattern for NgRx is Redux, which constrains data to live in only one place and ensures data is flowing in only one direction. We will have a chance to cover Redux in more depth in a dedicated chapter in this book.
To get to a point where we have learned to master NgRx, we first need to pick up some paradigms and patterns along the way. We need to build a good foundation of knowledge. A good foundation consists of learning concepts such as Functional Reactive Programming (FRP), the architectural pattern Flux, and a new and exciting way of thinking about async concepts, Observables.
So why are these relevant for our learning journey of mastering NgRx? The Flux pattern has a lot in common with Redux and it is its shortcomings that led to Redux being created. NgRx itself is implemented using RxJS, which promotes a functional reactive style of programming. So you see, the foundations we are about to explore all help us grasp the theory and motivations behind NgRx.
In this chapter, we lay the foundations for the book by discussing the well-known Model-View-Controller (MVC) pattern. To verify we understand the MVC pattern, we use the Angular framework to make things easier. As interesting as it is to talk about architecture, if you don't see it applied to something real, it might be hard to grasp.
We continue diving into an application workflow in Angular and its Dependency Injection machinery. Before concluding the chapter, we will also have a look at how to fetch data through an API because, after all, that is where the data comes from and should flow to.
In this chapter, we will:
- Describe the building blocks of the MVC pattern
- Describe MVC in Angular and the core constructs that help support it
- Review the HTTP service and how to deal with Ajax