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

#Angular
#TypeScript

Oi gente, tudo bem com vocês?

Vim compartilhar algumas informações que foram na verdade dúvidas que surgiram ao criar meu primeiro projeto em angular (que está em andamento) 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

Instalar o Angular CLI

npm install -g @angular/cli

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

Gerenciador de Pacotes

npm -v

Angular CLI

ng version

2. CRIANDO UM NOVO PROJETO

Para criar um novo projeto utilizamos a linha de comando:

ng new nomedoprojeto

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)

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)

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                    ]

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

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

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)

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)

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

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 😊❤️

Ah, você também pode ler esse artigo no dev.to

https://dev.to/fegoncalves/entendendo-melhor-algumas-funcionalidades-antes-de-criar-seu-primeiro-projeto-em-angular-32d6

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