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
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 😊❤️
Algumas referências utilizadas:
Node
Angular 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
Top comments (0)