Gerando Aplicações Angular FullStack - Parte 1

Gerando Aplicações FullStack com Angular, Express e Mongoose

Fala galera! Esse tutorial será dividido em quatro partes. Começaremos gerando nosso projeto usando um gerador do Yeoman, aproveitando nosso projeto, vamos criar um CRUD de cadastro simples de artigos, contento apenar título e o conteúdo, em seguida, vamos conecta-lo a um banco de dados MongoDB remoto e, por fim, vamos fazer o deploy da nossa aplicação no Heroku.

Links Rápidos:

Começando pelo princípio, se você já vem programando em Angular você já deve conhecer a ferramenta de linha de comando, o Angular CLI, . Com ela, é possível criar novos aplicativos e também possui comando para criar novos componentes, serviços e outras ferramentas que o Angular oferece . No entanto, o aplicativo gerado vêm apenas um template básico que dá liberdade ao programador criar suas próprias configurações.

Criando a Aplicação

Se você chegou até aqui é porque quer um template básico e mais algumas coisas. Vamos usar um gerador do Yeoman para gerar uma aplicação fullstack com Angular, Express e Mongoose. O Yeoman, basicamente, ajuda a gerar projetos completos, ou componentes para um projeto, com um simples comando. Começando:

Consideramos que você já tenha o npm instalado. Caso não, instale o Node.js.
Instale o Yeoman com o comando usando o npm.
```
npm install -g yo
```
Instale o gerador com o comando. A documentação do gerador pode ser encontrada na página do Github do projeto.
```
npm install -g generator-angular-api
```
Gere a aplicação com o comando abaixo. Comece criando o diretório.
```
mkdir meuapp && cd meuapp && yo angular-api
```

Parâmetros de Configuração

Abaixo seguiremos por um passo a passo partindo do comando anterior. As configurações escolhidas foram pensadas para esse tutorial, porém, fique a vontade para explorar novas configurações.

Defina um nome para o aplicativo. Como ele está dentro do dirétorio “meuapp”, por padrão o gerador considera “meuapp” como o nome do aplicativo.

Escreva uma descrição para o aplicativo.

Nessa parte vamos escolher qual biblioteca vamos usar para estilizar nossa aplicação. Para esse tutorial vamos escolher o Bulma. A documentação pode ser encontrada aqui.

Algumas bibliotecas do passo anterior já possuem ícones mas o gerador traz outras bibliotecas onde podemos escolher alguma das opções abaixo. Nesse caso, escolhemos Font Awesome.

A ultima opção é se queremos ou não adicionar autenticação, usando algumas das redes sociais mais utilizadas. Para o propósito desse tutorial não vamos utilizar autenticação, porém caso tenha interesse mande um comentário no final do post que iremos providenciar um tutorial adicional.