Jornada Frontend

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.

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:

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:

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”.

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.

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.

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.

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.

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Fruto de mais de 7 anos estudando e trabalhando com Front-end, a "Jornada Front-end - O Guia Definitivo" é um manual completo para todos que querem subir em suas carreiras do zero ou subir do seu nível atual.

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Share This