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

The main Angular building blocks explained with simple examples

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 App is a tree of components starting from the root component.
Angular App is a tree of components starting from the root component.
Angular website with potential components

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

Directive provides different ways to connect application data with the view, this connection is called Data-Binding.

Services

Components should not include any logic other than presentation logic, the details of getting data from a database or web API must be delegated to another element called Service.

Dependency Injection

This pattern is implemented with Angular framework to manage services and inject them inside the components.

Create Components

Open your project hello-angular, already created in the first article here , in vscode, then run ng serve to serve the application Like this:

cd hello-angular
code .
-------------
ng serve
ng g c users
Angular CLI creating users component
Angular CLI creating users component
Angular CLI creating users component
A component basic code
A component basic code
Users component class

Modules

Now let’s take a look at app module, note that this module is decorated with another decorator called @NgModule().

Root Module basic code
Root Module basic code
Root Module

Use Selector as an HTML Element

To add this component in an HTML markup we use its selector app-users Anywhere we have an element like <app-users> Angular is going to render the template of this component shown below:

External template for UsersComponent
AppComponent
AppComponent
External template for AppComponent
AppComponent
AppComponent
The root Component
index.html that contains the angular application
index.html that contains the angular application
index.html that contains the angular application.
index.html markup
index.html markup
index.html

Data-Binding

As I said before, Angular component encapsulates data, HTML template and the logic for the view. Data-Binding is a mechanism that creates a connection between the template and the data. When the data changes, the view is automatically notified and updated.

UsersComponent with title field
users component template
browser result

Structural Directives

Directive is one of the Angular building blocks, we use structural Directives to manipulate the DOM by adding, removing, and replacing elements.

Using ngIf and ngFor directives
UsersComponenet with users field array

Creating Services

To create a new service called users we can use Angular CLI command like this:

ng g s users
Angular CLI creating users service
Angular CLI creating users service
Angular CLI creating users service
users service class

Dependency Injection

We can use the constructor of our component to create an instance of the service. Then, we can call getUsers() to populate the users filed as shown in the following code:

call the service inside the component constructor
use Dependency Injection to inject the service inside the component constructor

Conclusion

That’s the end of this article, in which I’ve covered the main Angular building blocks. In my next article, I’ll address several subjects including event handling, binding and formatting data.

Learn More / Resources

Senior Full Stack .Net / Angular Developer, Cloud & Azure DevOps, T-Shirt Designer, Husband, and Father.