A little bit of theory for Angular beginners
In this article, I will explain to you the theoric part of some Angular features and how to use them to create amazing apps. 🤩
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.
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.
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 am assuming that the project uses Stylus as its CSS pre-processor.
name.component.ts-> The component itself as an entity. Its logic goes here.
name.component.spec.ts-> Tests file. Don't forget to write more tests as new functionalities are added to the component.
Services allow communication between different parts of your application. They are ideal to put server requests and share the responses with as many components as needed.
Let's suppose 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.
Let's resume the main Angular features:
- Module: A separated and independent part of the application. It 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! 😄
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 😀