Os aplicativos angulares são um single page web application traduzindo “aplicativo de uma página”; ou seja, quando o estado é alterado, a página não é recarregada. Em vez disso, o Document Object Model (DOM) é modificado para alterar seu conteúdo. Angular implementa isso usando um esquema virtual DOM e um detector de mudança de estado, de modo que quando o estado do aplicativo é alterado, apenas o DOM é modificado para o mínimo necessário para refletir a mudança.
Agora vamos para criação do nosso primeiro projeto.
Para isso é necessário instalar o Node Js o link a seguir contém as instruções para instalação https://nodejs.org/en/
<aside>
<img src="/icons/thought-alert_blue.svg" alt="/icons/thought-alert_blue.svg" width="40px" /> Dica do fdtschmitz:
O processo de instalação do Node.js é bem simples, basta ir em Downloadselecionar Prebuilt Installer se você estiver no Windows ou Package Manager se você estiver no Linux.
</aside>
Teremos que instalar o Angular CLI que consiste num conjunto de comandos, bibliotecas e instruções do Angular. O comando abaixo instala o Angular CLI através do NPM do node.
<aside> <img src="/icons/new-alert_red.svg" alt="/icons/new-alert_red.svg" width="40px" /> O professor utiliza na aula uma versão antiga do Angular, diferente da versão usada na matéria Desenvolvimento Mobile. Minha sugestão é usar uma máquina virtual com alguma distro leve de Linux, a fim de não ter conflito entre versões.
Para instalar a versão usada nas aulas utilize o código abaixo no terminal:
</aside>
npm install -g @angular/[email protected]
Feito isso, abra sua pasta de projeto no VS Code e inicie um novo Terminal. Agora já podemos criar nosso primeiro projeto com o comando abaixo:
ng new descomplica
#Serão feitas algumas perguntas no processo:
? Would you like to enable autocompletion? This will set up your terminal so pressing
TAB while typing Angular CLI commands will show possible options and autocomplete
arguments. (Enabling autocompletion will modify configuration files in your home
directory.) # Selecione Y para habilitar o autocompletar.
? Would you like to share pseudonymous usage data about this project with the Angular
Team at Google under Google's Privacy Policy at <https://policies.google.com/privacy>. For
more details and how to change this setting, see <https://angular.io/analytics>.
# Selecione N para não enviar dados anônimos.
? Would you like to add Angular routing? **Yes** #Selecione Y para adicionar o Routing
? Which stylesheet format would you like to use? **CSS** #Selecione CSS
O Angular CLI nesse momento, uma aplicação Angular básica com apenas um componente.
A imagem abaixo demonstra o projeto criado.
Para entender um pouco sobre a arquitetura de componentes temos que pensar que no Angular sempre temos um componente pai denominado app.components.ts esse componente tem um arquivo HTML um arquivo de module que serve para importar as classes de dependência do projeto. Esse componente pai pode ter vários componentes filhos geralmente se criar um componente de rotas e dentro desse componente renderizamos nossos componentes que vamos denominar páginas.
A pasta node_modules contém os códigos das dependências do projeto você pode incluir quantas dependências forem necessários geralmente se usa o NPM para adicionar uma nova dependência.
Nesse projeto vamos utilizar o modelo de rotas abaixo e vamos no decorrer da disciplina adicionar novas rotas no projeto. Uma rota é a configuração do caminho do componente página que deve ser carregado no componente app-routing.module.ts.
Agora vamos para a configuração das pastas a imagem abaixo demonstra as pastas já criadas. A pasta pages contém os componentes que representam uma página dinâmica no aplicativo, a pasta model contém os objetos e a pasta components contém os componentes filhos que podem ser compartilhados no projeto. Outras pastas serão criadas durante a disciplina.
Agora vamos criar um componente pai e um filho e a partir desses componentes passar informações entre eles. Utilize o comando abaixo para criar os componentes.