Yogesh Chauhan's Blog

A complete diagram with building blocks of an Angular application

in Angular on May 9, 2020

We've learned the basics about the main building blocks of an Angular application in the following 3 articles.

Part 1: What Are Modules And Components In Angular?

Part 2: Templates, Directives, Data Binding, Services And Dependency Injection

Part 3: How Routing Works In Angular?

The following diagram shows how these basic pieces are related.

building blocks of an Angular application
building blocks of an Angular application

Together, a component and template define an Angular view.

A decorator on a component class adds the metadata, including a pointer to the associated template.

Directives and binding markup in a component's template modify views based on program data and logic.

The dependency injector provides services to a component, such as the router service that lets you define navigation among views.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
6 Different Functions to Sort Arrays in PHPPHPHow to change HTML content on click using JavaScript?JavaScriptDebugging in WordPress Part 1: WP_DEBUGWordPressOOP, Class and Objects Strategies For Beginners (PHP)PHPHow to read Standard Input in Swift?SwiftWhat is XP (Extreme Programming) and When should it be used?MiscellaneousHow to add a ribbon inside a container using CSS?CSSCreate a menu with a curtain falling animation using CSS and JavaScriptCSSHow to convert datetime to date format in JavaScript?JavaScriptWhat happened to your Google Analytics Tracking ID, can’t find it?MiscellaneousCurrencyPipe in Angular 9 with ExamplesAngularShould we ever delete data from a database?Miscellaneous