Learn Angular for Back-End Developer (Part 3)-Angular Fundamentals

The main Angular building blocks explained with simple examples

Photo by La-Rel Easter on Unsplash

In this article I’m going to introduce the fundamentals of building applications with Angular. By the end of this article we will understand the basic Angular building blocks such as: Components, Modules, Templates, Data-Binding, Directives, Services and Dependency Injection.

This article is the continuation of two articles already published about learning Angular for Back-End developer. The Part 1 was a quick introduction to Angular, in which I explained step-by-step how to set up our development environment? How to create and serve our first application using Angular-CLI? How the Angular project is structured? … The Part 2 was about Typescript language, where I introduced notions like Interfaces, Classes, Properties, Modules, Arrow Functions and so on.

The Main Angular Building Blocks

Components

Every Angular app has at least one component called app or root component, a component encapsulates data, HTML template and the logic for the view. Look at this image below, it’s a screen shot of angular website, we can break this view into smaller views or components: the yellow component that represents Navbar, the red component that represents Sidebar and the green component that represents an area to display content.

Angular website with potential components

A real world Angular App is a tree of components starting from the root component.

Modules

Module is a container of related components or domains, for example Angular framework has RouterModule which provides all the routing mechanism. Every Angular app has at least one module called AppModule. This module is responsible for launching the application.

Templates

The template represents the component view, it can combine HTML markup and Angular statements.

Directives and Data-Binding