Architecture of Angular
Angular applications are built from a set of fundamental building blocks. Understanding the architecture helps you write better code.
Main Building Blocks:
- Modules – Container for a cohesive block of code (NgModules).
- Components – Control a patch of screen (template, logic, styles).
- Templates – HTML with Angular syntax.
- Metadata – Decorators (@Component, @NgModule) that tell Angular how to process a class.
- Data Binding – Connects component and template.
- Directives – Add behavior to DOM elements.
- Services – Reusable business logic.
- Dependency Injection – Mechanism to provide services to components.
The flow of an Angular app:
1. The browser loads
index.html.2. Angular bootstraps the root module (
AppModule).3. The root module bootstraps the root component (
AppComponent).4. The root component renders its template, which may include other components.
5. User interactions trigger event bindings, which call component methods.
6. Components may use services to fetch data or perform logic.
Two Minute Drill
- Angular apps are composed of modules, components, templates, services, and directives.
- Metadata decorators configure classes.
- Data binding synchronizes data between component and template.
- Dependency injection provides services to components.
Need more clarification?
Drop us an email at career@quipoinfotech.com