What you should know about Angular.

An overview about Angular architecture and its most important parts

Angular is a frontend framework and a web development platform, very used in modern web applications. It's strongly used to develop SPA (single-page-applications) and PWA(progressive-web-applications).

Angular is a component based framework, means that all you see in the browser is an Angular component, from pages to atomic elements in the view. Angular as its own CLI (Angular CLI)tool that allows to manage the app, by running the app, create its files, testing and more.

Fundamental elements in Angular:

• Components
• Directives
• Services
• Modules

Components

Components are peace of co that put together logic (model) and view to a specific part of the UI. consists of a Typescript (.ts), HTML, and style file. In the .ts file we define all business logic of the component, and we use the .html to present data, for styling we use the style (.css, .scss, .sass, …), as shown in the example:

To create a component using Angular CLI the command is:

// long form
ng generate component componentName


// short form
ng g c componentName

For components, we use the decorator @Component that receive an object containing ‘select’, ‘template’ and ‘style’ t. It's also common to find components with .html code on it.

Directives

Are Classes that add extra functionalities to components view or to the DOM elements. There are two types, Attribute Directives and Structural Directives.

Attribute Directives: change the view or behavior of the components or other directives, are they:

• ngClass: Used to add or remove CSS conditionally from an element.
• ngStyle: To dynamically add inline style based on a condition.
• ngModel: For data-binding “two-way data-binding”

Structural Directives: make changes to the DOM, by creating or removing elements

• ngIf: to rendering elements conditionally.
• ngFor: to create a loop from a data collection.
• ngSwitch: is a powerful structural directive in Angular that allows you to switch between multiple elements based on a conditional expression. It’s useful when you want to render different parts of your template based on a reference value. The ngSwitch directive works in conjunction with other directives such as ngSwitchCase and ngSwitchDefault.

Angular allows us to create customs directives, using Angular CLI we start by running the command as follows:

// long form
ng generate directive uppercase

// short from 
ng g d uppercase

Using custom directive.

Services

It is classes that contain functionalities that can be shared between components. Are commonly used to make requests to the server, global state management, and more…

// long form
ng generate service my-service

// short from 
ng g s my-service

Modules

we can see modules as wrappers, of all elements angular supports, we can create as many as we need modules are very important because it allows us to modularize the applications. As a wrapper we can relate components, services, directives, pipes, and modules in side a module.

// long form
ng generate module my-module

// short from 
ng g m my-module

There's till a lot to learn about Angular architecture, but for now we end here, and we’ll see in next posts more about it.