The framework consists of several cooperating libraries, some of them core and some optional.
Angular takes over, presenting our application content in a browser and responding to user interactions according to the instructions we provided.
Angular 2 Architecture here comes with the following 8 blocks :
5. Data Binding
8. Dependency Injection
1. Module: Angular apps are modular.
In general we assemble our application from many modules.
A typical module is a cohesive block of code dedicated to a single purpose. A module exports something of value in that code, typically one thing such as a class.
2. Component: A Component controls a patch of screen real estate that we could call a view. The shell at the application root with navigation links, that list of heroes, the hero editor … they’re all views controlled by Components. We define a Component’s application logic – what it does to support the view – inside a class. The class interacts with the view through an API of properties and methods.
3. Template: A template is a form of HTML that tells Angular how to render the Component.
A template looks like regular HTML much of the time … and then it gets a bit strange.
4. Metadata: Metadata tells Angular how to process a class.
5. Data Binding:
Angular supports data binding, a mechanism for coordinating parts of a template with parts of a component. We add binding markup to the template HTML to tell Angular how to connect both sides. There are four forms of data binding syntax. Each form has a direction – to the DOM, from the DOM, or in both directions – as indicated by the arrows in the diagram.
6. Directive: Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by a directive.
7. “Service” is a broad category encompassing any value, function or feature that our application needs. Almost anything can be a service. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.
8. “Dependency Injection” is a way to supply a new instance of a class with the fully-formed dependencies it requires. Most dependencies are services. Angular uses dependency injection to provide new components with the services they need.