We saw how to get started with Angular 4 and created a simple hello world app. In this article we will get a short overview of angular architecture and how all parts of app hold together in angular architecture.
Diagram below shows basic parts of an angular app. We will go through them one by one.
- Just like plain HTML, we can create angular templates which understand how to communicate with backing components.
- We can use plain html tags and component tags.
- These templates ultimately create DOM structure on web browser. Data in templates is held by backing components.
- Components are the ones which hold data from view which is created because of templates.
- A Component and a Template collectively create a view.
- Components and corresponding templates communicate through property bindings and event bindings.
- Data Binding:
- Data binding happens between template and component. It can be either one way or two way binding.
- value binding is unidirectional and it is bound from component to template.
- Property binding is unidirectional and it is bound from component to template.
- Event binding is unidirectional and it is bound from template to component. When any event happens on DOM, then Component it notified.
- Two way data binding is bidirectional and combines property binding and event binding.
- Metadata provides all angular functionality to typescript classes. Without metadata, there is nothing angular about classes.
- Templates and components can communicate with the help of metadata.
- Services are not a separate angular component. Anything can be service.
- Usually services include all the business logic and component merely consume it.
- It is good practice to have service layer in any application which is not dependent on view part.
- Usually services are injected in component where there are required using dependency injection mechanism.
- Dependency Injection:
- Angular manages a pool of all service instances and stores them in a location.
- Whenever a component asks for a specific services, angular looks for that service in the pool.
- If service is found then it is given to component so that it can use it.
- If service is not found, a new instance is given to component and placed in pool so that other component can also be given.
- Directives are classes marked with @Directive decoration. They can make structural or behavioural changes in angular apps.
- Angular apps are modular.They are called NgModules.
- Angular apps have one angular class rootModule.
- @NgModule is a decorator function which takes a metadata object.
- We can define providers, imports, exports and declarations in @NgModule
I hope this article helped understand angular architecture in short. In next article, we will see it running with a simple app.