Angular – Como instalar e iniciar seu primeiro projeto

O que é o Angular

O Angular é um Framework JavaScript de código aberto criado pelo Google para a construção de aplicações em SPA (Single Page Application – Aplicações de Página Única). É um framework muito utilizado no mercado se tratando de desenvolvimento front-end.

O Angular não é a mesma coisa que Angular JS. O Angular JS foi uma versão criada em 2009 que utilizada o JavaScript como linguagem padrão, já o atual Angular é baseado no TypeScript e em termos de código são completamente diferentes. Portanto, Angular é uma coisa e Angular JS é outra, podemos dizer que o Angular JS não é mais algo utilizado pelo mercado.

Preparando o ambiente de desenvolvimento

Para que seja possível o desenvolvimento é necessário a instalação das seguintes ferramentas:

Node.js

Faça a instalação do node.js no site https://nodejs.org/en/. A instalação é simples, basta executar o arquivo baixado e prosseguir na instalação dando next nas etapas.

NPM (gerenciador de pacotes)

Aplicações Angular necessitam de um gerenciador de pacotes, neste caso o gerenciador NPM, que é uma interface de linha de comando que geralmente é instalada com o node.js por padrão. Para verificar se o cliente npm está instalado após a instalação do node.js, basta digitar o comando a seguir no terminal:

npm -v

Angular CLI

Para gerar os projetos, códigos de aplicativo e bibliotecas para seu desenvolvimento, é necessario a instalação do Angular CLI. Basta digitar o seguinte código via terminal:

npm install -g @angular/cli

VS Code (Visual Studio Code)

No desenvolvimento geralmente utilizamos uma IDE para que a digitação de códigos seja feita de uma forma mais fácil de visualização, claro que uma IDE não serve apenas para mostrar o código de uma maneira bonita, tem outras utilidades, porém, não pontuarei isso neste tutorial.

Existem diversas IDEs para utilização, até mesmo o bloco de notas é uma ferramenta possível para codificação, mas utilizaremos o VS Code, já que é uma ferramenta gratuíta e bem completa.

Para instalação do VS Code basta entrar no site e baixar: https://code.visualstudio.com/

Conhecimento necessário

Para desenvolver utilizando o Angular, é necessário que tenha conhecimento em HTML, CSS e JavaScript. O Angular utiliza o Typescript para trabalhar o JavaScript, então o conhecimento em Typescript seria bom, mas tendo o conhecimento em JavaScript já serve.

Iniciando um projeto

Para criar um novo projeto, selecione o local onde seus projetos ficarão salvos. Utilizarei a pasta C: do Windows como exemplo, então dentro de C: criarei uma nova pasta com o nome de Projetos.

Abra o VS Code, clique em Terminal na barra de menus e clique em New Terminal.

No terminal, vá até a pasta onde seus projetos ficarão salvos com o seguinte comando:

cd /Projetos

Já dentro da pasta de Projetos, vamos criar o novo projeto Angular, basta fazer o comando:

ng new nome-do-projeto

Após executar o comando acima, apareceram algumas opções para que seja selecionadas, são elas:

Would you like to add Angular routing? (y/N)

Está perguntando se gostariamos de utilizar o roteamento do Angular. Neste caso você vai digitar y, no caso, sim, utilizaremos o roteamento do Angular.

Which stylesheet format would you like to use? (Use arrow keys)

Está perguntando qual estilo gostaríamos de usar, você pode selecionar aquele que gosta de trabalhar, mas neste tutorial utilizaremos o SCSS, então com as setas do teclado, basta ir ate SCSS e apertar ENTER.

Assim, será criado o novo projeto.

Em seguida, abra seu projeto no VS Code com os seguintes passos:

    1. File;

    2. Open folder;

    3. Selecione a pasta do projeto em seu computador;

    4. Ok (Selecionar pasta).

Essa será a estrutura inicial de pastas do Angular:

Estrutura de pastas de uma instalação do angular
Estrutura de pastas no Angular

e2e: É o diretório que contém arquivos para criarmos os testes unitários.

node_modules: Diretório responsável por armazanar nossas bibliotecas quando adicionamos algo no arquivo package.json, ele irá gerenciar os pacotes e suas versões dentro desta pasta.

src (source): Diretório onde ficam os arquivos principais do nosso projeto. Contém por padrão os sequintes arquivos:

    • app-routing.modules.ts – Arquivo de rotas.

    • app.component.html – Arquivo HTML do nosso componente App, segue o mesmo pensamento que os arquivos de estilo.

    • app.component.scss – Arquivo responsável pelo estilo do nosso módulo.

    • app.component.spec.ts – Arquivo de testes unitários que utiliza a estrutura de testes executada pelo Karma.

    • app.component.ts – Esse arquivo será a nossa classe do componente, conde faremos as funções dos botões, ações e interações que a aplicação vai ter.

    • app.module.ts – O Angular é um framework modular, ele precisa de um ou mais módulos para que possamos gerenciar os nossos componentes, esse módulo acaba sendo um padrão, mas podemos criar outros modules e chamar eles dentro dele.

assets: Diretório que nos permite trabalhar com os arquivos extras da aplicação, como imagens, fontes, entre outros.

environments: Diretório que contém dois arquivos, um para o nosso ambiente de produção e outro para o ambiente de desenvolvimento.

favicon.ico: Este aquivo é uma pequena imagen que fica guardada no site para visualização pelo navegador. Geralmente são utilizados como logotipos em tamanho reduzido, nos sites de empresas, entidades e marcas quaisquer. Ele é aquele icone pequeno que fica ao lado do nome da pagina nos Browsers.

index.html: Esse é o arquivo raiz onde é rodada nossa aplicação SPA (Single Page Application).

main.ts: Arquivo que inicia a aplicação.

polyfills.ts: É um arquivo que funciona como tradutor, por exemplo, se utilizarmos algo novo do JavaScript, mas o navegador utilizado só entende JavaScript mais antigo, o polyfills.ts interpretará (fará a conversão) e passará o código correto para o navegador.

style.scss: Como todos os nossos componentes tem o seu próprio arquivo .css ou .scss, nós podemos utilizar esse arquivo para criar algo global como variáveis para nossa aplicação.

test.ts: Arquivo responsavel por realizar testes na aplicação.

browserslistrc: Arquivo que serve para informarmos os browsers que são suportados pela nossa aplicação.

.gitignore: Arquivo do git que utilizamos para o gerenciamento dos arquivos que serão ignorados no momento do nosso commit.

editorconfig: Arquivo de configurações específicas da IDE que está sendo utilizada.

angular.json: Onde fica armazenada todas as configurações do Angular e do projeto.

karma.config.js: O Karma é uma biblioteca utilizada para criação de testes unitários desenvolvida pela própria equipe do Angular.

package-lock.json: Serve para descrever as características das dependências usadas no projeto. Versão, subdependências, links de verificação de integridade, dentre outras coisas.

package.json: Esse arquivo é o responsável por gerenciar as dependências do nosso projeto, quando nós executamos o comando npm install, ele verifica os pacotes que estão dentro desse arquivo e baixa para o nosso diretório node_modules conforme foi visto antes.

README.md: Arquivo Markdown para documentação da nossa aplicação.

tsconfig.app.json, tsconfig.json e tsconfig.spec.json: São arquivos de configurações do TypeScript.

tslint.json: O tslint fica verificando se estamos escrevendo o nosso código corretamente, ele verifica a sintaxe do nosso projeto em tempo de execução e em caso de algum erro ou warning ele lança uma exception no console.

Para ter certeza de que toda instalação deu certo, no terminal digite o comando:

ng serve -o

Pode aparecer a seguinte pergunta:

Would you like to share anonymous 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. (y/N)

Digite y.

Esse comando fará a execução da aplicação e abrirá uma página no seu browser confirmando que está tudo ok.

Página inicial da instalação do Angular funcional
Página inicial mostrando que o Angular está funcionando

Angular Material

O Angular Material é uma das bibliotecas mais utilizadas no Angular. É a implementação oficial para o Angular do Meterial Design, a especificação de design para interfaces interativas do Google.

Site do Angular Material: https://material.angular.io/

Você poderá trabalhar com diversos componentes que já estão prontos.

Para começar a utilizar o Angular Material, no terminal da sua aplicação será necessário fazer a instalação através do comando abaixo:

ng add @angular/material

Aparecerá três perguntas durante a instalação, são elas:

Choose a prebuilt theme name, or “custom” form a custom theme: (Use arrow keys)

Pergunta se quer utilizar os temas prontos ou customizar. Pode deixar selecionado Indigo/Pink e dar um ENTER.

Set up global Angular Material typography styles? (y/N)

Pergunta se quer utilizar os estilos globais. Digite y.

Set up browser animations for Angular Material? (y/N)

Pergunta se quer utilizar as animações. Digite y.

Artigos relacionados

DEIXE UMA RESPOSTA

Por favor digite seu comentário!
Por favor, digite seu nome aqui

Artigos Recentes