Angular 2/4 - O Bootstrap da aplicação

 Neste artigo vou apresentar os conceitos envolvidos no fluxo das operações que ocorrem no bootstrap de uma aplicação Angular.

Você sabe me explicar como uma aplicação Angular 2/4 é iniciada ?

Qual é o fluxo das operações necessárias para iniciar uma aplicação Angular 2/4 ?

Se ainda não sabe esse artigo vai te mostrar.

O Bootstrap da aplicação Angular

Quando você cria uma aplicação usando o Angular CLI, usando o comando ng generate nome_app, o Angular vai criar as pastas, os arquivos, vai baixar as dependências e fazer as configurações básicas para deixar a sua aplicação Angular pronta para ser usada.

Para executar a sua aplicação Angular basta então digitar : ng server ou npm start

Esses comandos vão disparar um servidor do webpack usado para o ambiente de desenvolvimento conhecido como Live Development Server.

Nota: O webpack é um empacotador de código para projetos web focado em módulos da aplicação. Ele é um pacote do Nodejs.

O serviço do webpack é mapear e analisar todos os arquivos da nossa aplicação, separando os arquivos em bundles ou pacotes (main.bundle.js, styles.bundle.js, vendor.bundle.js, inline.bundle.js ,etc)

A seguir quando o arquivo index.html da nossa aplicação for solicitado o webpack vai injetar todos os bundles no final do arquivo index.html.

Se você abrir o arquivo index.html de uma aplicação inicial gerada pelo Angular CLI vai notar que não existe nenhuma referência para arquivos CSS nem para arquivos de Scripts:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Teste</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>
  <teste-root>Loading...</teste-root>
</body>
</html>
 

Mas se você visualizar o código fonte da página inicial da aplicação que é exibida, verá o código contendo uma série de referência a scripts no final da página:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Teste</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>
  <teste-root>Loading...</teste-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js">
</script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
 

Assim, quando o webpack injeta esses scripts na página index.html , o navegador vai receber o html com esses scripts e vai iniciar a execução dos scripts.

Assim o script main.bundle.js vai inicializar o bootstrap da nossa aplicação.

Vejamos então esse fluxo...

Fluxo da inicialização de uma aplicação Angular 2

O primeiro arquivo a ser carregado será o arquivo main.ts:

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

 

Esse arquivo é o responsável pelo bootstrap da nossa aplicação. Neste arquivo a linha de código que dá inicia a nossa aplicação é :

platformBrowserDynamic().bootstrapModule(AppModule);

Nesta linha de código estamos passando uma referência do módulo principal da aplicação que é o modúlo que foi gerado pelo Angular CLI chamado AppModule que esta no arquivo app.module.ts.

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

 

Este arquivo app.module.ts é um módulo do Angular que é responsável por agrupar uma série de componentes de uma aplicação Angular.

Neste arquivo temos a classe AppModule e um decorator @NgModule que aplica uma série de metadados a esta classe. Além disso temos imports para os principais módulos do Angular geralmente usados.

Dentre os metadados, temos o metadado bootstrap : [AppComponent] que indica qual componente vai fazer o bootstrap da aplicação. No caso o componente AppComponent, que foi gerado pelo Angular CLI, e, que esta no arquivo app.component.ts:

Nota : Lembre-se que você tem que informar o Angular a qual módulo o componente pertence. Sendo que um componente declarado no módulo raiz será acessado por toda a aplicação.

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

No arquivo app.component.ts temos a classe AppComponent, onde o decorator @Component esta aplicando os seguintes metadados. (específicos para componentes)

  1. selector: 'teste-root'
  2. templateUrl: './app.component.html'   ou   template: '<h1>meu componente</h1>'
  3. styleUrls: ['./app.component.css'] (opcional)

Nota:  Podemos também usar o metadado Template ao invés de TemplateUrl. Neste caso o definimos o código do template direto no arquivo.

O atributo ‘selector’ significa o nome da tag HTML que usaremos em nosso arquivo HTML para chamar o componente que será a nossa view e que será interpretado pelo Angular 2. Definimos o nome da nossa tag como 'teste-root'.

O atributo ‘templateUrl’ contém o caminho e o nome do arquivo que será a nossa view e que será inserido na página dentro da tag definida em ‘selector’.

O atributo ‘styleUrls’ contém o caminho e o nome do arquivo que será usado como arquivo de estilos em nossa aplicação. (Não vamos usar esse recurso)

Assim, no arquivo index.html temos na tag <body> o elemento  <teste-root>Loading...</teste-root>, onde <teste-root> é o valor do selector do nosso componente acima.

Ao carregar a página no navegador você verá a mensagem Loading... ser exibida rapidamente e a seguir ser substituida pelo texto :  "teste work!"

O selector <teste-root> vai carregar o componente contido no arquivo app.component.html

<h1>
  {{title}}
</h1>

Sendo que  a interpolação {{title}} substitui de forma dinâmica o valor de title pelo texto 'teste works!" definido na classe AppComponent.

Podemos então esquematizar o fluxo dos arquivos assim :

webpack -> index.html -> main.ts -> app.module.ts -> app.component.ts -> app.component.html -> index.html(página)

É assim que se dá o bootstrap de uma aplicação angular básica com o webpack.

Sabendo, amados irmãos, que a vossa eleição é de Deus;Porque o nosso evangelho não foi a vós somente em palavras, mas também em poder, e no Espírito Santo, e em muita certeza, como bem sabeis quais fomos entre vós, por amor de vós.
1 Tessalonicenses 1:4,5

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti