A little bit of theory for Angular beginners

Subscribe to my newsletter and never miss my upcoming articles

Introduction

Angular is a front-end framework developed by the Google team and it allows you to create amazing multiplatform applications writing less code and using more organization. Currently, it is written in TypeScript, which is a superset of JavaScript.

TypeScript allows you to write JavaScript code typing your variables and methods. This is very important as your code grows and you have to guarantee that some operations will return what you really expect them to do.

In this article, I will explain to you the theoric part of some Angular features and how to use them to create amazing apps. 🤩

Features

The purpose of Angular is to create Single Page Applications (SPAs). So, in the background, all your code will run into a single index.html file. Of course, the organization of your code will follow a tree that will access your application components level by level. 🌳

Let's understand this concept by analyzing how Angular works with modules, components, and services.

Module

A module is an independent part of your application. It contains its own components, services, and even other modules. And now is when our tree starts to appear for us! 😃

It can be used to create a part of your application that contains its own lifecycle. See the example below:

|---app
   |---app.module.ts
   |---app.routing.ts
   |---header
   |---home
   |---payment
      |---confirm.component.ts
      |---payment.module.ts
      |---payment.routing.ts
   |---product

The structure above represents a folder called app which contains all application files inside itself. app is a module, so inside its folder, we can see app.module.ts. This file contains all configurations for that module.

payment is another module. It has a component and its own routing configuration.

Component

A component has its template, style, and logic. This means that you can use components to delegate and separate responsibilities between small parts of the application.

For example, you could create components for header, footer, cart, and even elements that are used multiple times, like a list item.

By default, a component is composed of four files:

  • name.component.html -> Where your HTML code goes.
  • name.component.styl -> Styles file. In this example, I assuming that the project uses Stylus as its CSS pre-processor.
  • name.component.ts -> All the configuration and logic of your component.
  • name.component.spec.ts -> File used when testing the component.

⚠️ It's very important to keep the DOM and style rules inside their corresponding files and to use the TypeScript file only for logic purposes. The same for the logic: don't implement JavaScript content inside the HTML. It's not a good practice, considering that the component has a file only for writing this type of code.

Services

Services allow the communication between different parts of your application and it's very recommended putting server requests handlers there.

Let's suppose that you're developing an app for music streaming. You could create a component with a button to play some music. When the user clicks that button, your component calls a method from a service that gets the requested resource from the server and updates the status bar in another component.

This way, you create clear communication and separate some functionalities in parts of your application that will be able to properly handle them.

Conclusion

Let's resume the main Angular features:

  • Module: A separated and independent part of the application. Can contain its own components, services, and routing.
  • Routing: URI schema of a module, where each route refers to a path and a corresponding component.
  • Component: Small piece of the application. Has its own template, style, and logic.
  • Service: Enables clear communication between different parts of the application.

Understanding the theoric part of the development is very important before creating your applications. May this article be useful for you to understand how Angular works and to keep learning more about it.

Thanks for reading! 😄

Buy me a coffee

Comments (2)

Sandeep Panda's photo

Bookmarked -- I worked extensively with Angular 1.0 back in 2013. But eventually shifted to React and primarily used it for pretty much everything. I keep reading about Angular and I know that a lot has changed in Angular since 2013. I have been trying to find some time to read some guides to understand Angular better and maybe try it a new side project. I'll start with your article 😀

Luiz Filipe da Silva's photo

I'm glad this article can be useful for you! Angular was the first framework I started to learn and today it is still my favorite. I strongly recommend that you continue to learn more about it ;)