Entendendo melhor algumas funcionalidades antes de criar seu primeiro projeto em Angular
Published: 2021-04-16 19:36:13


[`#angular`](https://dev.to/t/angular)   [`#typescript`](https://dev.to/t/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 :question: :speech_balloon: :smiley:.


### 1. PRIMEIROS PASSOS:
##### Instalar o Node
[nodejs.org] (https://nodejs.org/en/download/)

##### Instalar o gerenciador de pacotes npm
```CMD
npm install -g npm
```
##### Instalar o Angular CLI 
```CMD
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
```CMD
node -v
```
##### Gerenciador de Pacotes
```CMD
npm -v
```

##### Angular CLI
```CMD
ng version
```


---


### 2. CRIANDO UM NOVO PROJETO 
Para criar um novo projeto utilizamos a linha de comando:
```CMD
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:

```CMD
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 :grin:, 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.  
```CMD
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.
```CMD
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
```CMD
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`.

```CMD
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.
```CMD
? 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.
```CMD
? 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:
```CMD
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 :blush::heart:

---


##### Algumas referências utilizadas:
###### Node
[https://nodejs.org/en/](https://nodejs.org/en/)

###### Angular CLI
[https://angular.io/cli](https://angular.io/cli)

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

###### Rotas
[https://www.youtube.com/watch?v=8OHoAZ6j0Rg](https://www.youtube.com/watch?v=8OHoAZ6j0Rg)
[https://balta.io/blog/angular-rotas-guardas-navegacao](https://balta.io/blog/angular-rotas-guardas-navegacao#:~:text=O%20Angular%20nos%20fornece%20um,vou%20te%20mostrar%20neste%20artigo)

###### Angular Material
[https://material.angular.io/guide/getting-started](https://material.angular.io/guide/getting-started)
[https://www.youtube.com/watch?v=5-bkwiycFik](https://www.youtube.com/watch?v=5-bkwiycFik)

###### Angular Material - Componentes e CDK
[https://material.angular.io/components/categories](https://material.angular.io/components/categories)
[https://material.io/components](https://material.io/components)
[https://material.angular.io/cdk/categories](https://material.angular.io/cdk/categories)


###### Angular Material - Tipografia
[https://material.angular.io/guide/typography](https://material.angular.io/guide/typography)