MEAN Stack

Parte I
 O que vamos fazer ao longo do curso
• Vamos falar sobre Node.js/Express, mongoDB e Angular;

• Vamos aprender a conectar Angular como um frontend com

Node.js, Express e mongoDB como um backend;
– Prover apropriados “endpoints” no backend para que o frontend
possa consumir
– Conectar o NodeJS backend com a Angular App através Angular’s
Http Service
– Usar MongoDB com Mongoose para interagir com os Dados no
backend
– Use ExpressJS como um NodeJS Framework

• Construir Componentes Reutilizáveis com Angular

• Vamos construir uma aplicação para aplicar os conceitos;

 MEAN Stack
• O acrônimo MEAN foi cunhado para denotar o uso
de uma stack completa para desenvolvimento de
aplicações incluindo MongoDB, Express, Angular e
Node.js
 (N)ode.js
• Node.js e uma plataforma para aplicações JavaScript
– “toscamente falando” é JavaScript no lado do servidor com
recursos para lidar com tarefas específicas do lado do servidor

• É possível utilizar bibliotecas desenvolvidas pela comunidade

através de seu gerenciador de pacotes chamado npm.
• Na MEAN Stack, Node.js e a condição “base” para seu
funcionamento, o core.
 (E)xpress
• Express é um framework web light-weight, que trabalha junto
com o Node.js, e que ajuda na organização de sua aplicação
web na arquitetura MVC no lado do servidor.

• Facilita “a vida”, em vez de ter que fazer várias tarefas

recorrentes “na mão”, se usasse somente o Node.js

Estende a capacidade padrão

Express é um framework
do Node.js adicionando
que “encapsula” o
middlewares, views e rotas,
Node.js
etc

• Na MEAN Stack, o Express geralmente disponibiliza endpoints

que são consumidos pelo Angular, que por sua vez são
atualizados com base nos dados recebidos.
 (A)ngular
• Angular é um framework MVC no lado do cliente voltado para Single
PageWeb Applications (SPA).
– Aplicações de apenas uma página com grande parte de seu código no cliente,
em JavaScript . (No caso do Angular, TypeScript)

• O foco é a interatividade com o usuário (reactive user experience)

• Diferente da maneira tradicional, na qual dado e lógica são processados no
servidor, Angular facilita o recebimento de dados e execução de lógica
diretamente no cliente.
- Atualiza apenas partes que são
necessárias do DOM
- Lidar com rotas (a lógica de navegação
é praticamente “responsa” do lado
cliente)
- Não precisa enviar request e esperar
response. Tudo acontece “na hora”

• Na MEAN Stack, Angular é o responsável por interfaces dinâmicas e

permite acessar facilmente endpoints diretamente do cliente.
 (M)ongoDB
• MongoDB e um banco de dados NoSQL flexível e escalável.
– Combina a habilidade de escalar com os muitos recursos
presentes nos bancos de dados relacionais como índices,
ordenação etc.

• E um banco fracamente tipado, o que ajuda muito pouco com

validação de dados, de modo que boa parte da
responsabilidade das regras de validação fica nas mãos dos
desenvolvedores.

• Na MEAN Stack, MongoDB permite armazenar e reaver um

dado em um formato muito similar ao JSON (JavaScript
Object Notation)
 Vantagens da stack
• Produtividade e Integração da equipe
– frontend e backend trabalhando com a mesma linguagem

• Prototipação e Debugging
– A estrutura do dado enviado e semelhante no cliente, no servidor
e no banco, o que reduz drasticamente o tempo com conversões.

• Performance
– Há a possibilidade de processar totalmente ou parcialmente
dados e lógica no cliente, onerando menos o servidor.

• Build, teste e gerenciamento de dependências

– Não é necessário utilizar ferramentas de build ou de
gerenciamento de pacotes frontend em outras linguagens.
Como Node.js e Angular trabalham juntos
• Modelo clássico:

• Cliente (browser) e Servidor trocando requisições

para “todas as coisas” solicitadas

• Não há nada de errado com isso…

– A não ser que normalmente temos que enviar uma
request para cada simples alteração da página.
Como Node.js e Angular trabalham juntos
• Single Page Application

• Há uma mudança do modelo tradicional.

• O cliente pode fazer várias coisas sem ter que necessariamente

“visitar” o servidor
– Não precisamos conectar nele frequentemente

• Claro, se for para enviar ou buscar alguma coisa do BD, por

exemplo, a requisição vai ocorrer
– Mas o Angular faz isso em background...
Como Node.js e Angular trabalham juntos
• Angular + Node.js

• O ponto chave a ser entendido aqui é que:

– Uma vez que a página já está carregada no browser, é usado as
“rotas do Angular” para lidar com o usuário e com o DOM ou
direcionar para o server-side;
– O Node.js expõe alguns end-point (“rotas do Node.js”) que o
Angular pode conectar (behind the scenes) para trocar dados e
“conversar” com o servidor. Os route controllers possuem o código
a ser executado e acesso ao BD
– A comunicação entre front e back end é assíncrona
 Preparando o Projeto
• O que precisamos fazer inicialmente:
– Instalar o Node.js para executar o código do lado do
servidor (http://nodejs.org)

– Para verificar:
• Win: no CMD digite “node –v”
• Visual Studio Code: no terminal digite “./node –v”
 Preparando o Projeto
• O que precisamos fazer
inicialmente:
– Descompactar como base o “seed-
project - BASE.zip”, que está
preparado para usar as
dependências e possui uma
estruturação básica de projeto.

– Mais para frente entraremos em

detalhe dos elementos
apresentados
 Preparando o Projeto
• O que precisamos fazer inicialmente:
– Executar “npm install”, dentro do diretório do projeto,
para poder instalar as dependências.
• Do lado do servidor vai pegar o Express.js
• Do lado do cliente vai pegar o Angular.js
 Preparando o Projeto
• O que precisamos fazer inicialmente:
– Para verificar se está tudo OK DO LADO DO CLIENTE,
executar “npm run build” e “deixar rodando”.
• É importante deixar rodando pois “ups” no código são
automaticamente implantados

– Para verificar se está tudo OK DO LADO DO SERVIDOR,

executar, em outro terminal e no mesmo diretório, “npm
start” e “deixar rodando”.
• Esse comando vai “startar” o servidor
 Preparando o Projeto
• O que precisamos fazer inicialmente:
– No browser, acesse “localhost:3000” e deve aparecer
“Hello World”

– Importante observar que isso que está aparecendo já é

Angular com Node.js/Express
 Preparando o Projeto
• Escolher um ambiente/IDE de desenvolvimento
– Supondo que o Node.js, o projeto padrão e as suas
dependências (Express e Angular) já foram instalados via
CMD do SO

– Vamos usar o Visual Studio Code para rodar o cliente e o

servidor e verificar se tudo está OK...
https://code.visualstudio.com/
https://code.visualstudio.com/docs/getst
arted/userinterface
https://code.visualstudio.com/docs/getst
arted/settings
https://aws.amazon.com/pt/cloud9/
 Preparando o Projeto
• Escolher um ambiente/IDE de desenvolvimento:
 Preparando o Projeto
• Escolher um ambiente/IDE de desenvolvimento:
 Preparando o Projeto
• Escolher um ambiente/IDE de desenvolvimento:

– Vamos mexer a incrementar nesse app mais pra frente..

Entendendo a Estrutura do Projeto
!install
• Apenas criado para deixar a instalação do
Node.js e Visual Studio Code
• Não precisa ter.
.vscode
• Configuração pessoal do Visual Studio Code
• É criado quando se personaliza algo

node_modules
• Armazena os arquivos de todas dependências
(é a biblioteca incorporada)
• É gerenciada por nós a medida que vamos
instalando novos recursos no projeto
• Não precisamos mexer aqui...

DICA:
- assets armazena diretórios do cliente (“front-end”)
- Todos os outros são diretórios do lado do servidor
(“back-end”)
Entendendo a Estrutura do Projeto
assets / app
• Armazena a aplicação app feita em Angular
• Os arquivos apresentados fazem parte da
estrutura de uma aplicação em angular
• Aqui temos o nosso “lado do cliente” ou seja,
a nossa aplicação front-end

Rapidamente....
• Aplicações Angular são construídas com
componentes
• Aqui temos o componentes da aplicação app

Rapidamente....
• Setamos qual o código HTML que será
renderizado quando “invocamos” esse
componente
Entendendo a Estrutura do Projeto
bin
• Armazena o servidor Node.js
• Aqui realizamos a configuração do servidor
• A configuração é feita no arquivo www

Rapidamente....
• Setamos o porto, iniciamos o servidor, etc
• Mais para frente vamos ver como a requisição
chega até a aplicação app
Entendendo a Estrutura do Projeto
public
• Armazena o diretório que contém a aplicação
app desenvolvida
• Seria como o local onde fazemos o “deploy” da
aplicação para poder ser invocada pelo
browser
• O bundle.js é “criado automaticamente” não
precisa mexer em nada neste diretório
• Também armazena os CSS utilizados

Rapidamente....
• No diretório assets nós criamos a aplicação
• No diretório public nós disponibilizamos para
o servidor
Entendendo a Estrutura do Projeto

routes
• Armazena as rotas do servidor para a
aplicação app

Rapidamente....
• Aqui temos apenas uma rota registrada no
servidor
• Se chegar em “/” (que significa localhost/)
renderiza o “index”
• O “index” se encontra no diretório “views”
do servidor
Entendendo a Estrutura do Projeto
views
• Armazena um “template engine” usado pelo
servidor para carregar a app
• O arquivo “index.hbs” contém a aplicação app
que vai ser “inicializada”

Rapidamente....
• Está usando Handlebars como “template
engine”, por isso o arquivo tem a extensão
“.hbs”
• O legal de templates é que ajuda a separar os
“views” da sua lógica
• A extensão diz basicamente que estamos
usando templates no servidor.
• Tem o head com os imports de CSS
necessários
• Tem a tag “<my-app>” que é um componente
construído com Angular
• Tem o import do “bundle.js” que empacota a
aplicação app (código criado, frameworks e
dependências)
Entendendo a Estrutura do Projeto
app.js
• De todos os arquivos listado aqui, o “app.js” é o mais
importante
• Ele é o arquivo principal que starta o nosso Express no
servidor
• Cada requisição que chega no servidor passa por esse arquivo
• Desse modo, vários métodos podem ser aplicado na
requisição

Rapidamente....
• Um dos pontos mais importantes é o despacho para a rota
correta
• Aqui encaminhamos a requisição para as rotas da aplicação
app (./routes/app)
Entendendo a Estrutura do Projeto
Os outros arquivos...
• São apenas arquivos de configuração para o
projeto, para o processo de build.
• Normalmente não tem muito o que mexer
aqui... 

Rapidamente....
• De forma geral, o arquivo mais
importante para ser mencionado é
o “package.json”
• Ele gerencia toda a produção e
dependências do projeto
• Aqui vemos os scripts que usamos
para inicializar e construir a
aplicação
 Atividades
• Para fechar
– Vamos rodar o projeto base e ver o resultado no browser

– Altere o conteúdo da página do componente HTML do

Angular e veja se o resultado aparece automaticamente
ao dar um refresh no browser

– Modifique o arquivo de estilo (no local correto) para que

o H1 fique com a cor verde.
 Atividades
• Para fechar
– Incorpore o código abaixo no projeto existente
• Crie um novo arquivo CSS na estrutura
– stylelogin.css
• Crie uma nova linha de chamada
• Atualiza o HTML apropriado com o código oferecido
– login-parteI.txt
 Atividades
• Para fechar
– Incorpore o código abaixo no projeto existente
• Crie um novo arquivo CSS na estrutura
– styleregister.css
• Crie uma nova linha de chamada
• Atualiza o HTML apropriado com o código oferecido
– register-parteI.txt