Primeiros passos para construir uma webApp com Angular

No post anterior de setup, vimos como criar nosso primeiro app e configuramos muitas coisas para iniciar esse outro post muito bem. Caso não tenha visto o anterior, dê uma corridinha lá, pois será necessário.

Quando rodamos os comandos vimos que foi criado um monte de arquivos e agora vamos ver como trabalhar com eles e iniciar nossos passos no queridíssimo Angular.

Primeiramente vamos abrir o caminho “/src/app/” e abrir o arquivo app.component.html;
Vamos selecionar tudo e excluir o conteúdo de dentro deste arquivo;
Vamos adicionar uma linha nova.

<h1>Isso é um h1 com interpolação {{ title }}</h1>

Quando abrirmos nosso localhost setado na aula anterior, iremos ver esse h1, porém você irá perceber que não aparece o title. Vamos arrumar isso.

Abra o arquivo app.component.ts
No final do arquivo vamos setar a variável: title = ‘meu-app’.

Você irá reparar que agora no HTML reconheceu o title e irá mostrar o que você escreveu dentro dele no browser.

Com esses simples passos vimos como é fácil e dinâmico o Angular, podemos colocar esse tipo de conhecimento em nosso código facilmente e criar uma dinâmica incrível com informações vindo de outros locais, colocadas de maneira manual pelo usuário, pode vim de API ou mesmo de um DB.

Agora troque o conteúdo do title, e coloque isso “meu primeiro app Angular”, vai ficar parecido com isso:

export class AppComponent {
  title = 'meu primeiro app Angular';
}

Tudo isso é o que chamamos de component no Angular, ele contém HTML (estrutura), CSS (estilo) e TypeScript (funcionalidade). Uma aplicação Angular é feita de vários componentes também.

App Component

Vamos desbravar um pouco ele e ver como funcionam algumas coisas por aqui.

Deixe tudo aberto e abra também o arquivo “index.html” dentro do “/src/”.

Vamos olhar o conteúdo dele:

<body>
  <app-root></app-root>
</body>

Uma coisa que percebemos ao olhar para esse bloco de código é uma tag <app-root> e você deve estar se perguntando, mas de onde está vindo essa tag? Nem existe isso no HTML.

Se olharmos atentamente no “app.component.ts” iremos perceber algo no @Component, e ver que existe o “app-root”.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

O que está acontecendo é que estamos criando um seletor que se transforma em uma tag HTML, isso é absurdo, imagine as possibilidades.

Fora o selector que o nome do seletor que iremos usar no HTML, temos outras duas que são “templateUrl” e “styleUrls”, que nada mais é onde o seletor será colocado no arquivo HTML e onde o estilo será colocado também.

Bootstrapping

Aqui é onde iremos colocar o que será carregador primeiro ou inicializado em nossa aplicação Angular, é uma técnica.

Quando abrimos o inspecionar do browser, podemos ver algo mais ou menos assim.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>MyApp</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.css"></head>
  <body>
    <app-root></app-root>
 
    <script src="runtime.js" defer></script>
    <script src="polyfills.js" defer></script>
    <script src="styles.js" defer></script>
    <script src="vendor.js" defer></script>
    <script src="main.js" defer></script>
  </body>
</html>

Aqui podemos ver como existem scripts importados no index.html. Eles são importados pelo CLI do Angular.

Um exemplo do que está no arquivo main.

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

Ao olhar o código, percebemos que as primeiras linhas tratam de checar se estamos em ambiente de desenvolvimento ou produção. No momento não é muito importante para nós isso, mas é bom saber que existe.

Ao olhar mais para baixo vemos o “platformBrowserDynamic” que importa para nós o método bootstrapModule(), que faz tudo que precisamos para iniciar nossa aplicação.

Quando iniciamos um projeto novo, o Angular automaticamente gera um module padrão para nós, que está no caminho “src/app/app.module.ts”, que é o argumento do método “platformBrowserDynamic” o AppModule.

Agora se abrirmos o “app.module.ts”, vamos ver que no decorator @NgModule temos a propriedade do bootstrap.

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

Aqui temos todos os componentes que serão carregados quando a “index.html” for carregada.

Temos o main component que é o “appComponent” e os sub-components também, tudo declarado e importado.

Primeiros passos para construir uma webApp com Angular