Flask com Angular 6 – Modernizando as Views

A fim de que possamos modernizar um pouco a nossa aplicação, nós vamos dar uma olhada em como utilizar o Flask com Angular 6.

Recapitulando

Nós conferimos anteriormente como preparar o  ambiente e criar uma aplicação com o Flask.

Nós pudemos conferir no artigo Começando com Flask Framework como pode ser muito simples criar projetos a partir deste microframework.

Logo depois, nós vimos um pouco sobre o sistema de templates do Flask Framework.

Neste segundo artigo da série sobre o Flask, nós abordamos como criar as nossas views de acordo com os as convenções do Flask.

Contudo, é chegada a hora de utilizarmos um framework para frontend mais moderno, para que desse modo, nós tenhamos mais espaço para forcarmos no que o Flask realmente brilha (na minha opinião): construção de APIs.

O que é o Angular 6

Logo Angular

Logo Angular

O Angular é uma plataforma de de desenvolvimento moderna para web, e mantida por nada mais, nada menos que o Google.

DICA: Quer ver como o Angular funciona na prática sem precisar instalar nada em seu computador? Acesse este link para conferir!

Apesar de levar o mesmo nome, há uma separação muito grande entre o Angular original, e o Angular 6.

O Angular 6, também chamado de Angular 2+ (versões posteriores ao primeiro) são uma versão totalmente reescrita do Angular 1, também chamado de AngularJS atualmente.

Flask com Angular 6

A melhor maneira de utilizarmos o Flask com Angular 6 é focarmos no Flask para construir as nossas APIs, enquanto deixamos a responsabilidade do nosso front end para o Angular, que foi construído exatamente para esta finalidade.

Instalando o Angular 6

Para trabalharmos com o Angular, primeiramente precisaremos instalar o Node.

Nesta série de artigos sobre o Flask Framework, eu estou utilizando uma instalação do Ubuntu 18.04.1 LTS.

Caso você esteja utilizando outro sistema operacional, você poderá encontrar as instruções para instalação em:

Verificando se já possui o Node e o NPM instalados

Para verificar se você já possui o node e o npm instalados em seu computador, basta rodar o comando abaixo:


Caso esteja tudo certo, você terá um resultado semelhante a:

Instalando o Node no Ubuntu

Caso ainda não tenha instalado, é muito simples:


E agora, vamos rodar novamente o comando a seguir para verificar se a instalação foi realizada com sucesso:

Criando um novo projeto com Angular 6

Instalando o Angular 6

Para que possamos utilizar o Angular em nosso projeto, e também o seu excelente angular cli, vamos voltar mais uma vez para o terminal:

Criando um projeto com o Angular Cli

Para criarmos um novo projeto utilizando o Angular Cli, basta utilizarmos o seguinte comando:

Integrando o Flask com Angular 6

Então vamos lá. Vamos dar inicio ao nosso front end criando o projeto webapp dentro de nosso projeto.


Após rodar o comando ng new , teremos um resultado semelhante a imagem abaixo:

Angular Cli - ng new

ng new webapp

Agora basta rodar:

cd webapp && ng serve -open

E poderemos ver a nossa página inicial rodando:

Pagina inicial do Angular 6

Em nosso próximo artigo, veremos como criar algumas views utilizando o Angular 6, além de consumir as nossas APIs diretamente do Flask.

Tutorial Começando com Flask Framework

  1. Começando Com o Flask Framework
  2. Templates no Flask Framework – Uma visão sobre o Jinja
  3. Flask com Angular 6 – Modernizando as Views

No Responses

  1. Pingback: Começando Com o Flask Framework - Rafael Marques 20 de outubro de 2018

Leave a Reply