Components are the molecules of Angular 2 applications, and we are going to spend a few minutes introducing this new building block. We are going to assume a basic familiarity with Angular 1 and the fundamental mechanisms of the framework. And now time for a brief history lesson!
A Brief History of Angular 1.X Views and Controller
In Angular 1, the prevalent theme was a controller and template pair. As the novelty of sample applications wore off, there was a natural evolution of how views and controllers were approached within an Angular application. People wanted to build complicated things that solved hard problems.
Sample Application Scenario
The initial approach was to build out an HTML template and drop in a controller via ngController. This approach worked as long as we were doing sample applications and to-do lists. Small and limited functionality resulted in a small controller that was easy enough to manage.
Sample Application Meets the Real World Scenario
As our application grew, so did our controller. This eventually became unwieldy, and we needed to find a better way to divide our application up into smaller pieces. There are two dominant approaches to this problem, and each has their own merits. You could break your app up into template-controller pairs with named routes using ui-router, which essentially turned your application into a state machine. Or, you could divide your interface up into self-contained directives that encapsulated the template-controller pair.