Criando sua segunda aplicação com Angular

Substituindo o código inicial

HTML

O próximo passo é substituir esse código HTML inicial pelo da nossa aplicação, de forma estática por enquanto. Para isso, vamos pegar o HTML do template que está em ../html/index.html e dividi-lo entre dois arquivos.

Primeiramente, selecione e recorte do template tudo que estiver entre as tags <body> e </body>. Cole esse código no arquivo src/app/app.component.html, substituindo todo o seu conteúdo:

<div class="container">
  <header class="d-md-flex flex-align-center mt-5">
    ...
  </header>

  <main class="card-columns mt-5">
    ...
  </main>
</div>

A seguir, recorte o restante do código do template, abra o arquivo src/index.html e cole o novo código, também substituindo seu conteúdo. Remova a tag <link> que importa o arquivo style.css, já que este será adicionado automaticamente pelo Angular. Entre as tags <body> e </body>, adicione apenas o seguinte: <app-root></app-root>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />

    <title>Minhas listas</title>
  </head>
  <body class="bg-light">
    <app-root></app-root>
  </body>
</html>

CSS

Por fim, substitua o conteúdo do arquivo src/styles.css com o código do arquivo ../html/styles.css. Salve todos os arquivos e confira o resultado no navegador.

Deixar uma resposta