Primeiras aulas do curso Angular parte 1: Fundamentos

Angular parte 1: Fundamentos

Bem começado, metade feito - Introdução

Olá, meu nome é Flávio Almeida, meu twitter é @flaviohalmeida, e muito provavelmente já nos encontramos em outros cursos da Alura. Este curso foi dividido em três partes numa tentativa de agrupar conceitos. Ao longo dessa trilogia construiremos uma aplicação completa no lado do front end, desde a criação dos primeiros componentes e boas práticas até a autenticação de usuários em uma Single Page Application.

Nesta parte 1, de Fundamentos, aprenderemos a organizar o projeto de maneira profissional, criar componentes, diretivas, lidar com a biblioteca RxJS para o benefício da nossa aplicação, entre outros.

É recomendado que se faça o primeiro exercício desta aula, por conta de toda a infraestrutura, e do que é necessário para darmos continuidade. Também é indicado o exercício sobre as motivações do Angular, em que há uma história de um projeto real, para melhor compreensão de quando o Angular passou a ser interessante para um projeto.

Bom estudo e sucesso nessa empreitada!

Bem começado, metade feito - Angular CLI, instalação e criação do projeto

Após todos os requisitos em relação à infraestrutura, instalação do Node.js e do editor Visual Studio Code, podemos dar início à criação do nosso projeto. Há um detalhe, porém: o Angular é um conjunto de diversos frameworks, libs, bibliotecas, e por aí vai. A configuração desta infraestrutura é essencial para construirmos nosso projeto, acessarmos ele em nosso navegador, e empacotarmos e gerarmos o arquivo para a produção. Gastaremos um tempo considerável antes de começarmos a programar efetivamente.

Então, vamos acessar o site do Angular CLI (Angular Command Line Interface), que é cliente de linha de comando do Angular, atualmente patrocinado pela sua própria equipe. Trata-se de um projeto que nos auxilia na construção de projetos, a partir do zero, sem necessidade de nos preocuparmos com toda essa infraestrutura, bastando a execução de um único comando. Isso poupa bastante tempo, e é este o fluxo que vamos seguir no curso. Aliás, é o fluxo recomendado pela própria equipe do Angular.

Para instalarmos o Angular CLI, precisamos do npm, um gerenciador de pacotes do Node.js — sendo assim, o npm só estará disponível caso o Node esteja instalado na máquina. É uma ferramenta que baixa módulos, bibliotecas e frameworks da internet, para que possamos usá-los.

Vamos abrir o Prompt de Comando, sem nos preocuparmos com qual pasta estamos. Verificaremos se o npm está instalado com npm --version. Será retornado 6.1.0, que é a sua versão. Para solicitar a instalação do Angular CLI globalmente, ou seja, para que esta ferramenta esteja disponível em qualquer diretório da aplicação, utilizaremos o comando npm install -g @angular/cli@6.0.7.

Acrescentamos `@6.0.7` para indicar que usaremos esta versão específica, já que na data de gravação deste curso, esta é a versão mais recente. Deste modo garantimos paridade entre o que faremos aqui e o que poderá ser feito posteriormente. Se deixarmos o comando sem este final, a versão mais recente será instalada automaticamente, e não é isto que queremos.

Outro detalhe: para que o -g funcione, é necessário privilégio de administrador no Prompt de Comando em uso, ou no Terminal, no caso do Linux. Este comando é executado apenas uma vez por máquina de desenvolvimento, e ele irá acessar a internet e baixar o Angular CLI. O processo é rápido e, para confirmarmos sua instalação, usaremos o ng, que é o módulo do Angular CLI, colocado globalmente para uso no terminal: ng --version. Serão exibidas as versões instaladas de todos os módulos, inclusive do TypeScript do RxJS.

Para começar o nosso trabalho, de que forma criaremos um projeto?

Com o comando cd Desktop, acessaremos a área de trabalho, e solicitaremos ao ng o alurapic, que é o projeto a ser desenvolvido, um sistema de gerenciamento de fotos. O comando será ng new alurapic, e desta vez o processo costuma demorar um pouco, pois quando se cria um projeto com Angular CLI, ele vem com pré-configurações de todos os módulos que a nossa aplicação necessitará, isto é, vários downloads são feitos por meio do npm.

Após a finalização do processo, aparecerá uma mensagem que pode parecer preocupante, mas não é: "found 13 vulnerabilities <9 low, 4 high>", isto é, foram encontradas 13 vulnerabilidades, 9 baixas e 4 altas neste projeto. A partir das versões mais novas, o npm começou a ter um sistema de análise da consistência e da segurança dos módulos utilizados pela aplicação.

Isso quer dizer que os módulos baixados pelo Angular CLI possuem algumas vulnerabilidades. No entanto, o responsável pela correção delas não é a equipe do Angular CLI, e sim de quem criou estes módulos, que são numerosos, e sobre os quais não temos controle. O mais importante é que isso não nos afeta em nada, pois o que baixamos são dependências de desenvolvimento, os quais não entrarão em produção.

Se quiséssemos um servidor em Node, por exemplo, e algum módulo tivesse vulnerabilidades, pode ser que fosse algo problemático mas, no nosso caso, não há problema algum.

Criado o nosso projeto, se acessarmos a área de trabalho, encontraremos a pasta "alurapic". Então, poderemos utilizar os comandos cd alurapic, e em seguida ng serve --open. Isso subirá um servidor local configurado pelo Angular CLI usando-se boas práticas de desenvolvimento, e automaticamente abrirá o navegador em uma página padrão. Este projeto será simples porque iremos personalizá-lo utilizando a estrutura criada para o desenvolvimento do nosso projeto.

Bem começado, metade feito - Entendendo a estrutura

Vamos entender a estrutura que foi gerada? Inicialmente, abriremos a pasta "alurapic" no Visual Studio Code, em "File > Open Folder...", ou pelo atalho "Ctrl + K Ctrl + O". Selecionaremos a pasta, cujo conteúdo será exibido em um painel lateral esquerdo no programa.

O Visual Studio se integra muito bem à linguagem utilizada pelo Angular, que é o TypeScript. Mas onde é que se localiza a página gerada anteriormente, com "Welcome to app!", em nosso projeto? Neste painel lateral, não há nenhum index.html, e o importante, neste momento, é que todo código que diz respeito à aplicação está dentro de "src" (de source), inclusive index.html.

Pode ser tentador abrirmos diretamente a pasta "src" no programa, porém isto não é recomendado. Deve-se sempre abrir a "alurapic" como pasta raiz do Visual Studio Code, pois ele precisa encontrar alguns arquivos de configuração dentro dela. Caso contrário, teremos muitos problemas.

Vamos, então, abrir index.html, que é a página padrão criada pelo servidor local configurado pelo Angular CLI. Entretanto, a página do navegador (localhost:4200) possui uma imagem, lista de links, entre outros elementos que não aparecem no código de index.html. Além disso, o conteúdo dentro das tags <body> são tags que nem existem no mundo HTML, <app-root>.

Em Angular, tudo é um componente, capaz de guardar um comportamento, o CSS, e a marcação HTML, a estrutura, em um único local. Assim, a página localhost:4200 não é diferente no Angular, já que uma página também é um componente, e possui HTML, CSS e, caso haja, JavaScript, tudo vinculado em um único objeto denominado componente. Assim, <app-root> indica a existência de componentes.

Mas onde se encontram estes componentes, em nosso projeto?

Tudo que formos criar ao longo do curso ficará dentro de "app", em que há app.component.ts. Abrindo-o, veremos que, basicamente, temos uma classe do ECMAScript 6, com um Decorator anotado com @Component, o qual torna a classe um componente. O Decorator é uma sintaxe especial do Angular, do TypeScript, em que é possível incluir uma metainformação sobre uma determinada classe, no caso.

O que é uma metainformação?

Ao criarmos instâncias desta classe, criamos objetos. Estamos incluindo mais uma informação desta classe, que diz respeito ao framework. Então, a classe AppComponent só é um componente porque está anotada com @Component. Nele, existe um selector: 'app-root', mesmo nome encontrado em index.html.

Este selector nos permite utilizar o componente em templates em sua forma declarativa, então, todo o conteúdo de app.component.ts, sua apresentação, o que ele faz, seu CSS, são acessados por meio dele. Também neste arquivo, há templateUrl: './app.component.html', que informa a apresentação deste componente.

Se abrirmos app.component.html, encontraremos o código referente à apresentação que vemos na página do navegador. Então, o Angular carregará, exibindo o primeiro componente, e seu template. Voltando a app.component.ts, o styleUrls: ['./app.component.css'] informa onde se localiza o CSS utilizado por este componente.

Quando uma aplicação Angular é carregada pela primeira vez, sabemos que é a <app-root> que será carregada, pois ela, na sua forma declarativa no selector, é que está no index.html.

De que forma o Angular consegue acessar tudo isso que vimos e transformá-los em algo que o navegador consegue carregar e entender?

Internamente, o Angular utiliza um webpack, um module bundle, isto é, um empacotador de módulos famoso, utilizado por Create React App, Vue CLI, e outros frameworks Single Page Application. O interessante é que em nenhum momento estas configurações do webpack são exibidas, pois elas ficam encapsuladas pelo Angular CLI.

Com isso, fizemos o primeiro tour em relação à aplicação. Antes de começarmos a criar nossos próprios componentes, veremos mais um detalhe, a seguir.

Sobre o curso Angular parte 1: Fundamentos

O curso Angular parte 1: Fundamentos possui 325 minutos de vídeos, em um total de 87 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Angular acessando integralmente esse e outros cursos, comece hoje!

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas