Prof. Fausto Cintra/ outubro 4, 2019/ Desenvolvimento front-end/ 0 comments

beenhere

Angular 9

Tutorial atualizado para a versão 9.x do Angular em 27/05/2020.

Verificação dos pré-requisitos

Para trabalharmos com o Angular 9, será necessário que tenhamos instalado, primeiramente, o Node.js e o Yarn em suas versões corretas. Precisamos de:

  • Node.js: versão >= 12.16
  • Yarn: versão >= 1.22

Caso você já tenha o Node.js e/ou o Yarn instalados e deseje verificar a versão instalada, proceda da forma seguinte:

Em uma janela CMD, execute:

node --version
yarn --version

Em um terminal, execute:

node --version
yarn --version

Se não houver esses programas instalados ou se eles não estiverem nas versões mínimas necessárias, será necessário baixá-los e instalá-los.

Instalação do Node.js

Instalação do Yarn

Embora o Yarn possa ser instalado via download a partir do site oficial, é mais prático fazê-lo utilizando o gerenciador de pacotes do Node.js.

Em uma janela CMD, execute:

npm install -g yarn

Pode ser necessário fechar a janela do terminal e abri-la novamente para que o comando yarn esteja disponível.

Em um terminal, execute:

sudo npm install -g yarn

Instalação do Angular

Trabalharemos com o Angular versão 9. Para instalá-lo:

Em uma janela CMD, execute:

npm install -g @angular/[email protected]

Pode ser necessário fechar a janela do terminal e abri-la novamente para que o comando ng esteja disponível.

Em um terminal, execute:

sudo npm install -g @angular/[email protected]

Verifique a versão instalada:

Em uma janela CMD, execute:

ng --version

IMPORTANTE: caso você obtenha a mensagem 'ng' não é reconhecido como um comando interno ou externo, um programa operável ou um arquivo em lotes., será necessário adicionar manualmente o ng ao PATH do Windows. Veja aqui como fazer isso.

Em um terminal, execute:

ng --version

A versão esperada do Angular CLI, em setembro de 2019, é, pelo menos, 8.3.5.

Configurando o Yarn como gerenciador de dependências

Por padrão, o Angular 9 utiliza o npm como gerenciador de dependências. No entanto, o Yarn oferece mais vantagens desempenhando esse papel. Para fazer com que o Angular 9 passe a utilizar o Yarn como gerenciador de dependências, é necessário executar um comando de configuração.

Em uma janela CMD, execute:

ng config -g cli.packageManager yarn

Em um terminal, execute:

ng config -g cli.packageManager yarn

Criação do projeto Angular

O comando ng é uma caixa de ferramentas que nos ajuda a trabalhar com o Angular. Uma de suas capacidades é a criação do projeto. Para a criação do projeto chamado front-end, devemos executar, o comando a seguir.

Em uma janela CMD, execute:

ng new front-end --minimal --routing --skip-install

Em um terminal, execute:

ng new front-end --minimal --routing --skip-install

Note que adicionamos algumas opções ao comando básico de criação de projetos, que é ng new <nome-projeto>. Vamos às explicações:

  • --minimal: isso desabilita os frameworks de teste de código. Esse é um tópico avançado, que será útil apenas após o aprendizado básico do Angular 9.
  • --routing: assim como os projetos Express, o Angular também trabalha com rotas. Essa opção cria um módulo de código onde poderemos configurar nossas rotas mais facilmente.
  • --skip-install: normalmente, logo após a criação dos arquivos de projeto, o comando ng new já instalaria todas as dependências presentes no arquivo package.json do novo projeto. No entanto, para nos certificarmos de que o Yarn será usado para o gerenciamento das dependências, faremos isso mais adiante.

A execução do comando de criação do projeto fará algumas perguntas.

Which stylesheet format would you like to use? (Use arrow keys). Responda SCSS.

Essa etapa do processo é bem rápida. Em suma, ela irá criar uma nova pasta chamada front-end com alguns arquivos e pastas dentro.

Prosseguindo, precisamos entrar dentro dessa nova pasta criada e, agora sim, instalar as dependências do projeto. Para isso:

Em uma janela CMD, execute:

cd front-end
yarn install

Em um terminal, execute:

cd front-end
yarn install

O comando yarn install passará a baixar as dependências do projeto e a instalá-las. ESSE PROCESSO É UM POUCO DEMORADO, dependendo da sua conexão de Internet. Tenha um pouco de paciência.

Se o processo de instalação de pacotes falhar (o que é relativamente comum, se a qualidade da conexão da Internet não for das melhores), NÃO ENTRE EM PÂNICO. Basta executar yarn install novamente.

Trocando em miúdos, simplesmente estamos fazendo com que o processo de download e instalação de dependências seja iniciado novamente.

Executando o projeto Angular

O comando anterior terá criado uma pasta chamada front-end com vários arquivos dentro dela. Portanto, de agora em diante, para trabalharmos como esse projeto, precisaremos estar dentro dessa pasta. No terminal:

Em uma janela CMD, execute:

cd front-end

Em um terminal, execute:

cd front-end

O comando ng new, que executamos no passo anterior, gera um projeto Angular funcional. Para vê-lo, execute o seguinte comando no terminal:

Em uma janela CMD, execute:

ng serve

Em um terminal, execute:

ng serve

Esse comando irá compilar o projeto (demora um pouco na primeira execução). Ao final, abra seu navegador no endereço http://localhost:4200. Você verá a página padrão do projeto semelhante a essa:

Configurando um ambiente de desenvolvimento Angular 1
Aparência da página inicial de um projeto Angular 9

Adicionando os componentes Angular Material ao projeto

Os componentes Angular Material foram desenvolvidos segundo as diretrizes do Material Design do Google. Utilizando esses componentes, nosso projeto terá uma série de benefícios, como a padronização da interface e a habilidade de deixar a aplicação “pronta” para ambientes mobile.

Para adicionar a biblioteca de componentes ao projeto, execute o comando abaixo no terminal:

Em uma janela CMD, execute:

ng add @angular/material

Em um terminal, execute:

ng add @angular/material

Esse comando também faz algumas perguntas. Responda conforme o modelo abaixo.

  • ? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys) Com a seta, escolha uma das opções. As duas primeiras são temas claros e as duas últimas, temas escuros.
  • ? Set up global Angular Material typography styles? (Y/n) Responda Y.
  • ? Set up browser animations for Angular Material? (Y/n) Responda Y.

Instalando a biblioteca de ícones Material Icons

No terminal:

Em uma janela CMD, execute:

yarn add material-design-icons --network-timeout 1000000000

Em um terminal, execute:

yarn add material-design-icons --network-timeout 1000000000

Há relatos de que a execução desse comando é demorada. É por isso que aumentamos o tempo de expiração da rede (--network-timeout).

Abra o arquivo src/styles.scss e acrescente a seguinte linha no início:

/* Acrescente a linha a seguir */ 
@import "~material-design-icons/iconfont/material-icons.css";

Adicionando um módulo para os componentes do Angular Material

Os componentes Angular Material são frequentemente utilizados, e, como qualquer componente da plataforma, precisam ser importados dentro de um módulo para funcionar.

Para evitar importar esses componentes um a um, é mais prático criar um módulo com todos os componentes do Angular Material e importá-los todos de uma vez para dentro do projeto.

Para tanto, gere um módulo vazio:

Em uma janela CMD, execute:

ng generate module material

Em um terminal, execute:

ng generate module material

Abra o arquivo src/app/material/material.module.ts e substitua seu conteúdo pelo código seguinte:

import { NgModule } from '@angular/core';

//Angular Material Components
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  exports: [
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ]
})
export class MaterialModule { }

Agora abra o arquivo src/app/app.module.ts e acrescente APENAS as linhas indicadas nos comentários (NÃO SUBSTITUA O CONTEÚDO DO ARQUIVO!!!):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// **** ACRESCENTE A LINHA ABAIXO *** 
import { MaterialModule } from './material/material.module';
@NgModule({
    declarations: [AppComponent],
    imports: [
       BrowserModule,
       BrowserAnimationsModule,
       // **** ACRESCENTE A LINHA ABAIXO E UMA VÍRGULA NA LINHA DE CIMA *** 
       MaterialModule
    ],
    providers: [],
    bootstrap: [AppComponent]
 });
 export class AppModule { }

PRONTO! Agora todos os componentes Angular Material já podem ser utilizados no projeto.

Share this Post