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 while delegating types for 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 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.
⚠️ 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 write JavaScript scripts inside the HTML file. It's not a good practice since the component has a file only for writing this type of code.
Services
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.
Conclusion
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! 😄
