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

Verificação dos pré-requisitos

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

  • Node.js: versão >= 10.16.3
  • Yarn: versão >= 1.17.3

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.

IMPORTANTE: alunos da Fatec Franca podem encontrar as instalações desses programas para Windows 64 bits na pasta de rede Z:\Fausto\INSTALL.

Instalação do Angular

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

Em uma janela CMD, execute:

npm install -g @angular/[email protected]

Reinicie o computador.

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 8 utiliza o npm como gerenciador de dependências. No entanto, o Yarn oferece mais vantagens desempenhado esse papel. Para fazer com que o Angular 8 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 --enable-ivy --routing --skip-tests

Em um terminal, execute:

ng new front-end --minimal --enable-ivy --routing --skip-tests

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 8.
  • --enable-ivy: o Angular possui uma espécie de “compilador” de código, que junta as várias partes de HTML, CSS e JS em um único pacote. O Ivy é um compilador experimental, que promete ser mais rápido que o atual e será padrão a partir da versão 9 do Angular. Vamos experimentá-lo 😉
  • --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-tests: essa opção inibe a criação de alguns arquivos que somente seriam utilizados pelos frameworks de teste e que, por enquanto, só serviriam para “poluir” a estrutura do projeto.

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.

Em seguida, o comando 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 um par de comandos para que as coisas voltem aos eixos:

Em uma janela CMD, execute:

cd front-end
yarn install

Em um terminal, execute:

cd front-end
yarn install

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 entrar 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 8

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 a primeira opção, Indigo/Pink (as demais são horrorosas :P)
  • ? Set up HammerJS for gesture recognition? (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 final:

/* 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';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule,
} from '@angular/material';
@NgModule({
  exports: [
    CdkTableModule,
    CdkTreeModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
  ]
})
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

Leave a Comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*