DEV Community

Cover image for Entendendo melhor algumas funcionalidades antes de criar seu primeiro projeto em Angular
Fernanda Gonçalves
Fernanda Gonçalves

Posted on

Entendendo melhor algumas funcionalidades antes de criar seu primeiro projeto em Angular

#angular #typescript

Oi gente, tudo bem com vocês?

Sou estudante de programação, atualmente fazendo o Bootcamp Avanade Angular Developer na Digital Innovation One e vim compartilhar algumas informações que foram na verdade dúvidas que surgiram ao criar meu primeiro projeto em angular (que está em andamento). Sou uma pessoa bastante curiosa, detalhista mas ao compreender melhor essas funcionalidades, vim compartilhar com vocês pois talvez, essas minhas dúvidas em algum momento já foi ou pode vir a ser a sua ❓ 💬 😃.

1. PRIMEIROS PASSOS:

Instalar o Node

nodejs.org

Instalar o gerenciador de pacotes npm
npm install -g npm
Enter fullscreen mode Exit fullscreen mode
Instalar o Angular CLI
npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

Aqui não vou entrar muito em detalhes sobre essas informações, mas essas instalações ficam armazenadas no sistema e não no projeto, por isso serão feitas apenas uma vez. Caso já os tenha instalado, basta verificar se as versões estão atualizadas:

Versão do Node
node -v
Enter fullscreen mode Exit fullscreen mode
Gerenciador de Pacotes
npm -v
Enter fullscreen mode Exit fullscreen mode
Angular CLI
ng version
Enter fullscreen mode Exit fullscreen mode

2. CRIANDO UM NOVO PROJETO

Para criar um novo projeto utilizamos a linha de comando:

ng new nomedoprojeto
Enter fullscreen mode Exit fullscreen mode

E a partir daqui foi onde comecei a buscar informações para entender um pouco melhor sobre essas opções a serem escolhidas:

STRICT MODE

Assim que digitei a linha de comando acima, recebi a seguinte mensagem:

C:\Fer\Projetos\Angular> ng new nomedoprojeto
? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
  This setting helps improve maintainability and catch bugs ahead of time.
  For more information, see https://angular.io/strict (y/N)
Enter fullscreen mode Exit fullscreen mode

A pergunta que ele faz é: Se eu desejo impor uma verificação de tipo mais rígida e orçamentos de pacotes mais restritos, e que essa é uma configuração que auxilia em uma melhor manutenção e detecção de bugs com antecedência.

Mas na íntegra o que exatamente significa isso?
Essa questão tem haver com a utilização do TypeScript no Angular. Pesquisando um pouco sobre o strict mode aprendi que essa é uma das ferramentas adicionais que o Angular possui. Em se tratando desse modo uma vez habilitado, será inicializado um novo workspace com uma configuração que terá o propósito de analisar seu código.

Essa sinalização vai ativar algumas opções para o compilador TypeScript. Veja algumas delas: strictTemplates, strictInjectionParameters, noImplicitAny, noImplicitThis, entre outras.
Quando uma verificação for feita no seu código, você vai receber mensagens de erros, de uma inicialização que deve ser feita diferente ou uma adição, coisas desse tipo, mas todas essas referidas mensagens são de ajustes recomendadas pela própria equipe do TypeScript. Achei isso fantástico e no final de tudo, esse modo trata da segurança do seu projeto a fim de tornar o seu código mais simples de ler e com um risco menor de apresentar falhas.

Esse modo não vem habilitado por padrão, então se a pergunta abordada nesse tópico não aparecer pra você, ela pode ser habilitada manualmente utilizando o sinalizador --strict.

Bom, isso tudo é muuuuito novo pra mim e faltam ainda muitos passos pra chegar lá mas quando eu chegar, já estarei ciente do que se trata o strict mode. Conforme eu for ganhando um pouco mais de conhecimento, eu quero fazer uso dele pois a princípio eu gostei 😁, e se bem entendi a sua proposta, esse modo traz segurança não apenas para o projeto em si, mas também para o próprio profissional.

ROTAS E ESTILOS

Depois da sua escolha sobre o modo estrito ele pergunta se você deseja adicionar as rotas.

C:\Fer\Projetos\Angular\nomedoprojeto>
? Would you like to add Angular routing? (y/N) 
Enter fullscreen mode Exit fullscreen mode

Rotas são simplesmente as demais páginas que vão existir no seu projeto. Vou dar um exemplo bem básico: se a sua aplicação é sobre produtos eletrônicos, então será preciso criar rotas que irão direcionar os usuários para essas demais páginas (que serão os componentes criados) de produtos, orçamento, contato, entre outros.

Para a utilização do mesmo, basta digitar y e um arquivo (módulo) de rotas será adicionado a sua aplicação.

Logo em seguida você precisará escolher qual formato de estilo deseja usar, então basta navegar com a seta para cima ou para baixo, e uma vez selecionado a sua preferência basta pressionar enter para confirmar.

C:\Fer\Projetos\Angular\nomedoprojeto>
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]
  Stylus [ https://stylus-lang.com                                        ]
Enter fullscreen mode Exit fullscreen mode

3. INSTALAÇÃO DO ANGULAR MATERIAL

O Angular Material é uma biblioteca de componentes baseadas no material design do Google (ex.: botões, menus, etc...) e dessa forma você não precisa criar seus conteúdos do zero, basta fazer uso desses componentes.

Para fazer a instalação você digita a linha de código

ng add @angular/material
Enter fullscreen mode Exit fullscreen mode

TEMA

Primeiro ele pede para que escolha a cor do tema que deseja utilizar. Basta descer ou subir com a seta do teclado para fazer a escolha e depois pressionar enter - pode ser personalizado através do arquivo angular.json/styles.

C:\Fer\Projetos\Angular\nomedoprojeto> ng add @angular/material
Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
> Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ] 
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ] 
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ] 
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ] 
  Custom 
Enter fullscreen mode Exit fullscreen mode

TYPOGRAPHY

Logo em seguida precisa escolher se a tipografia será global, ou seja, uma vez confirmando a fonte Roboto fica sendo a fonte padrão da aplicação.
Se ativar essa opção você pode ver no arquivo index.html que será adicionado o link no cabeçalho e uma classe no body - conforme a própria documentação relata - e as mudanças do style, porém, nada impede que você faça a mudança posteriormente para outro tipo de fonte.

? Set up global Angular Material typography styles? (y/N)
Enter fullscreen mode Exit fullscreen mode

ANIMATIONS

São as animações do Angular Material. Na utilização dos componentes do Angular Material, é importante aceitar o uso das animações para que tudo funcione na normalidade.

? Set up browser animations for Angular Material? (Y/n)
Enter fullscreen mode Exit fullscreen mode

Respondendo a todas essas opções, a instalação se dará início e você já pode começar a visualizar a sua aplicação no navegador através da linha de comando:

ng serve
Enter fullscreen mode Exit fullscreen mode

Bom é isso pessoal ... eu espero que esses esclarecimentos possam te auxiliar de alguma forma e qualquer coisa deixa um comentário.
Eu também adoraria ler comentários, orientações dos mais experientes pois já que estou iniciando em programação assim como em Angular, todo feedback e ajuda serão bem vindos 😊❤️


Algumas referências utilizadas:
Node

https://nodejs.org/en/

Angular CLI

https://angular.io/cli

Strict Mode

https://angular.io/guide/strict-mode
https://indepth.dev/posts/1402/bulletproof-angular
https://dev.to/briwa/how-strict-is-typescript-s-strict-mode-311a
https://www.youtube.com/watch?v=QkC1hjXx0dU

Rotas

https://www.youtube.com/watch?v=8OHoAZ6j0Rg
https://balta.io/blog/angular-rotas-guardas-navegacao

Angular Material

https://material.angular.io/guide/getting-started
https://www.youtube.com/watch?v=5-bkwiycFik

Angular Material - Componentes e CDK

https://material.angular.io/components/categories
https://material.io/components
https://material.angular.io/cdk/categories

Angular Material - Tipografia

https://material.angular.io/guide/typography

Top comments (0)