02 Este é o projeto Angular padrão
Essa é a segunda etapa de nosso estudo do framework Angular. Nessa etapa iremos analisar a estrutura e os arquivos criados pelos passos que seguimos no artigo anterior. Na primeira etapa executamos o comando ng new “project_name”, e agora iremos entender a estrutura que os robôs do Angular criaram para nós.
Vamos abrir o projeto criado no artigo anterior na IDE. No meu caso utilizo o Visual Studio Code. Ao abrir encontraremos uma estrutura como essa:
A primeira pasta que listada é a ‘node-modules’. Assim como em outros frameworks JavaScript, o Angular também utiliza de diversas (diversas MESMO!) bibliotecas para executar suas funcionalidades. Essas bibliotecas são as dependências de seu projeto. Essas dependências por sua vez são gerenciadas através do arquivo package.json.
— — — — — — — — — — — — — — — — — — — — — — — — — —
Nesse arquivo podemos encontrar uma lista com as dependências atuais de nosso projeto, e mais algumas outras informações como o nome do projeto, stripts, entre outros.
— — — — — — — — — — — — — — — — — — — — — — — — — —
A estrutura básica de um componente do angular pode ser observada na pasta app. Quando criamos nosso projeto escolhemos utilizar o roteamento padrão do Angular, e o primeiro arquivo da pasta app traz essas configurações. O arquivo de estilização .scss foi criado quando optamos por essa configuração na hora de criar o projeto
No Angular temos as responsabilidades dos componentes separadas basicamente nesses arquivos que podemos observar no app.componente. Conforme avançarmos nos estudos entraremos em detalhes em cada um deles. Por hora vamos nos familiarizando com a estrutura básica. Ok? =)
— — — — — — — — — — — — — — — — — — — — — — — — — —
A pasta assets utilizaremos para armazenar imagens que eventualmente utilizaremos no nosso projeto.
A pasta environments é utilizada para referenciar as variáveis de ambiente, caso necessite utiliza-las.
Três arquivos muito importantes dentro do Angular são o angular.json, tsconfig.json e o karma.config.js. Esses arquivos trazem configurações e informações importantíssimas do projeto. Não se preocupe em saber exatamente o que cada propriedade desses arquivos faz. Mas é bom saber o que basicamente cada um é responsável, pois muito provavelmente você irá precisar fazer algum ajuste e/ou alteração nesses arquivos conforme seu projeto ir crescendo.
Ao lado temos o arquivo angular.json. Basicamente ele contém informações referentes ao projeto no que diz respeito a apontamentos de importações, arquivos de referencia, configurações de padrões utilizados, entre muitas outras informações. Como dito anteriormente, não se preocupe em saber o que cada propriedade faz exatamente, mas é importante saber conceitualmente com um projeto é configurado dentro de um ambiente utilizando Angular.
O arquivo tsconfig.json traz configurações referentes ao TypeScript. Os navegadores hoje não entendem TypeScript. Logo nosso projeto, antes de ser executado em um navegador, precisa ser “traduzido” para uma linguagem que o navegador entenda. No arquivo tsconfig.json podemos fazer algumas configurações quando a esse processo, por exemplo.
O karma.config.js traz as configurações utilizadas pela biblioteca Karma referentes a criação de testes unitários dentro do nosso projeto. Faremos alguns testes dentro do nosso projeto, e é interessante saber ao menos de forma conceitual de que forma o Angular lida com testes unitários.
Muita informação, não acha!! Mas não se assuste. Não se preocupe em saber tudo nesse primeiro momento. O conhecimento vem com a prática e leva tempo. Então, vem comigo que estamos apenas começando!
No próximo artigo iremos criar nosso primeiro componente e aprender como utiliza-lo dentro do nosso projeto. Vem comigo?
