executando_a_app - VWJavascript/Alurapic GitHub Wiki

Executando a app

Ainda falta mais um detalhe: como o Angular sabe que deve carregar AppModule assim que a nossa aplicação iniciar? Se abrirmos o arquivo de configuração alurapic/client/systemjs.config.js temos o seguinte trecho de código:

// código anterior omitido
packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
// código posterior omitido

Você deve lembrar que é papel do loader carregar os módulos da aplicação. No caso, usamos como module loader o Systemjs. Nesse arquivo indicamos para o loader que ele deve carregar o arquivo app/main.js. Este arquivo é uma espécie de boot da nossa aplicação. É dentro dele que indicaremos que o módulo AppModule deve ser carregado primeiro. Sendo assim, vamos criá-lo, mas claro, usando a extensão .ts:

// alurapic/client/app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

A primeira coisa que fizemos foi importar platformBrowserDynamic. É uma instância dessa classe que será responsável pelo carregamento do nosso AppModule. Por exemplo, se estivéssemos criando uma aplicação híbrida com Ionic 2, carregaríamos nosso módulo de outra forma.

É claro, agora precisamos importar nosso módulo AppModule:

// alurapic/client/app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

Por fim, vamos criar uma instância de platformBrowserDynamic. Como não faz sentido reatribuirmos o valor dessa variável, usaremos o modificador const do ES6:

// alurapic/client/app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module'; // importa o módulo que será carregado primeiro
const platform = platformBrowserDynamic();

E para terminar, vamos pedir para nossa instância carregar o módulo:

// alurapic/client/app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module'; // importa o módulo que será carregado primeiro
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Prontinho. Agora que já temos tudo no lugar, precisamos indicar para a biblioteca Systemjs lá em index.html que ela deve carregar o módulo alurapic/client/app. Ele procurará automaticamente o arquivo main.js para nós:

<!-- alurapic/client/index.html -->

<!doctype html>
<html>
    <head>
        <base href="/">
        <title>Alurapic</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">

        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>

        <script src="systemjs.config.js"></script>
        <script>

            System
              .import('app')
              .catch(function(err){
                console.error(err);
              });

        </script>
    </head>
</html>

Só faltou indicarmos que AppComponent deve ser exibido em index.html. Para isso, usamos seu seletor:

<!-- alurapic/client/index.html -->

<!doctype html>
<html>
    <body>
        <!-- código omitido -->
        <app>Carregando...</app>
    </body>
</html>

E agora? Como testar nossa aplicação? Precisamos de um servidor. Esse servidor pode ser de qualquer linguagem, mas já temos um criado em alurapic/server. É um servidor feito em Node.js que compartilhará a pasta aluraframe/client assim que for iniciado. Inclusive, ele possui um conjunto de API's e trabalha com um banco de dados para que nossa aplicação fique mais próxima de uma aplicação real.

Para isso, precisaremos abrir outro terminal. Não podemos fechar aquele que abrimos porque então perderemos a compilação em tempo real dos nosso arquivos .ts.

⚠️ **GitHub.com Fallback** ⚠️