Angular — Entendendo como uma aplicação Angular funciona

Esta é uma continuação do artigo anterior: Angular — Criando e entendendo projetos Angular

Published in

Café Recursivo

5 min readMar 9, 2019

Uma aplicação Angular serve para um propósito: apresentar html para o usuário. Apesar de uma série de arquivos e estruturas serem criados com o comando ng new e com o efetivo uso do framework, o objetivo final é esse.

Neste artigo vamos tentar entender o propósito de cada um dos arquivos e diretórios utilizados no processo de desenvolvimento de uma aplicação e como eles se relacionam entre si. Acho importante esse tipo de abordagem para que possamos sempre ir um pouco mais além da superfície quando utilizamos um framework. Direto ao ponto.

Este artigo é uma continuação do: Angular — Criando e entendendo projetos Angular

Pré-requisitos

Crie sua aplicação com ng new
rode sua aplicação com ng serve

Resultado

Ao criarmos nossa aplicação, uma estrutura como a da imagem a seguir é criada.

Vamos agora ver o conteúdo da pasta src, onde reside o código da nossa aplicação:

A partir de agora, vamos tentar entender como estes arquivos funcionam e interagem entre si

index.html

Se você entrar no diretório src e no arquivo index.html, o conteúdo a seguir é exibido:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoList</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico">
</head><body>
<app-root></app-root>
</body>
</html>

Agora, entre no browser, digite localhost:4200 e entre no código-fonte da página (geralmente o comando é ctrl + u). O código que observamos é o seguinte:

Observe a tag body. O webpack a preenche com os arquivos javascript que vemos na imagem. O arquivo runtime.js representa o core do Angular, enquanto o main.js é o código compilado da nossa aplicação.

Entendendo a inicialização de uma aplicação Angular

O webpack (https://webpack.js.org/), que explicamos brevemente no artigo anterior, é o responsável por carregar dinamicamente os arquivos de scripts para dentro do nosso index.html.
Como já sabemos, o browser executa os comandos javascript na ordem em que aparecem. Portanto, o arquivo runtime.js é o primeiro a ser executado, já que este contém o core do framework.
Para as aplicações, tão importante quanto o core do framework, é o código da própria aplicação, que é encapsulado no main.js (arquivo js já compilado).
A base de uma aplicação em Angular é o arquivo main.ts (note a terminologia ts, diferente de js). Este arquivo é criado automaticamente com o comando ng new e é o responsável por dar boot à nossa aplicação. Vamos analisar o conteúdo deste arquivo por um momento.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';
import { environment } from './environments/environment';if (environment.production) {
  enableProdMode();
}platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Vamos nos focar no código em negrito por um momento.

A função enableProdMode() desabilita uma série de configurações visando a performance da aplicação. Além disso, não exibe mensagens de erros no console, que poderiam configurar um risco à segurança. Essas configurações são desligadas somente em ambiente produtivo, conforme podemos ver pelo if.
A função platformBrowserDynamic() é utilizada para dizer à aplicação que esta será utilizada em um browser. Angular foi desenhado para ser utilizado em uma gama grande de dispositivos, e o browser é somente um deles.
o trecho bootstrapModule(AppModule) chama o módulo raiz da aplicação, no caso, AppModule. BAsicamente, Angular possui dois tipos de módulos: módulo root e feature modules. Existe somente um módulo root em toda a aplicação, e pode possuir vários features modules. Mais a frente teremos um artigo exclusivo sobre módulos.
Note que o que é passado como parâmetro da função bootstrapModule é o nome da classe e não uma instancia desta, tampouco uma String.

O módulo Root

Angular tem um duplo sentido quando a palavra Módulo é utilizada. Pode ser tanto um módulo javascript, quanto um módulo Angular
Um módulo Angular nada mais é que uma classe que possui o decorator @NgModule e fazem parte da configuração de um projeto Angular.
Toda aplicação em Angular tem um, e somente um, módulo Root, que é responsável por descrever a aplicação para o framework, além de dar o bootstrap da aplicação
Vamos checar seu código:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppComponent } from './app.component';@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Observe o atributo bootstrap da class AppModule. Este atributo define qual o componente que será carregado inicialmente na aplicação. No caso, AppComponent.
Um Componente é o bloco de construção de uma aplicação Angular. Não é escopo deste artigo detalhar o funcionamento desta estrutura, isso farei em um artigo posterior. Por ora, vamos entender o funcionamento deste primeiro componente.

import { Component } from '@angular/core';@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'todo-list';
}

O decorator @Component especifica uma classe de componente. Neste caso, um componente que será utilizado para dar inicio à aplicação
O atributo selector indica qual a tag será utilizada para este componente. No caso, app-root.
Os outros atributos, templateUrl e styleUrls são autoexplicativos. Dizem quais os arquivos de template (html) e estilo(css).
Se olharmos novamente nosso index.html, veremos que ele utiliza esta tag: <app-root></app-root> . Isto significa que o componente será incorporado dentro do arquivo e seu conteúdo será mostrado na tela.
E é dentro desse componente, que começaremos a lógica de toda a aplicação.

Por enquanto é isso. No próximo artigo criaremos nossa primeira aplicação em Angular, com base nesses dois artigos que já lemos.