Fluxo de trabalho típico do AngularJS e estrutura do projeto (com Python Flask)

Eu sou bastante novo em todo esse frenesi de estrutura do lado do cliente MV *. Não precisa ser o AngularJS, mas eu o escolhi porque me parece mais natural do que Knockout, Ember ou Backbone. Enfim, como é o fluxo de trabalho? As pessoas começam com o desenvolvimento de um aplicativo do lado do cliente no AngularJS e depois conectando o back-end a ele?

Ou o contrário, primeiro construindo o back-end no Django, Flask, Rails e depois anexando um aplicativo AngularJS a ele? Existe uma maneira "correta" de fazê-lo, ou é apenas uma preferência pessoal no final?

Também não tenho certeza se devo estruturar meu projeto de acordo com o Flask ou o AngularJS? práticas comunitárias.

Por exemplo, o aplicativo minitwit do Flask está estruturado da seguinte forma:

minitwit
|-- minitwit.py
|-- static
   |-- css, js, images, etc...
`-- templates
   |-- html files and base layout

O aplicativo tutorial do AngularJS está estruturado da seguinte forma:

angular-phonecat
|-- app
    `-- css
    `-- img
    `-- js
    `-- lib
    `-- partials
    `-- index.html
|-- scripts
 `-- node.js server and test server files

Eu conseguia imaginar um aplicativo Flask sozinho e é bastante fácil ver o aplicativo AngularJS como o ToDo List sozinho, mas quando se trata de usar essas duas tecnologias, não entendo como elas funcionam juntas. Parece que eu não preciso de uma estrutura da Web do lado do servidor quando você já possui o AngularJS, um simples servidor da Web Python será suficiente. No aplicativo de tarefas do AngularJS, por exemplo, eles usam o MongoLab para conversar com o banco de dados usando a API Restful. Não havia necessidade de uma estrutura da web no back-end.

Talvez eu esteja muito confuso, e o AngularJS não seja mais do que uma biblioteca jQuery sofisticada, por isso devo usar da mesma forma que usaria o jQuery nos meus projetos do Flask (supondo que eu mude a sintaxe do modelo do AngularJS para algo que não entre em conflito com o Jinja2). Espero que minhas perguntas façam algum sentido. Eu trabalho principalmente no back-end e essa estrutura do lado do cliente é um território desconhecido para mim.

Eu começaria organizando o aplicativo Flask na estrutura padrão da seguinte maneira:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
|-- templates

E, como btford mencionou, se você estiver criando um aplicativo Angular, precisará se concentrar em usar modelos Angular do lado do cliente e ficar longe dos modelos do lado do servidor. Usar render_template ('index.html') fará com que o Flask interprete seus modelos angulares como modelos jinja, para que eles não sejam renderizados corretamente. Em vez disso, faça o seguinte:

@app.route("/")
def index():
    return send_file('templates/index.html')

Observe que usar send_file () significa que os arquivos serão armazenados em cache; portanto, você pode usar make_response (), pelo menos para o desenvolvimento:

    return make_response(open('templates/index.html').read())

Depois, crie a parte AngularJS do seu aplicativo, modificando a estrutura do aplicativo para que fique assim:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
        |-- app.js, controllers.js, etc.
    |-- lib
        |-- angular
            |-- angular.js, etc.
    |-- partials
|-- templates
    |-- index.html

Verifique se o seu index.html inclui o AngularJS e outros arquivos:

<script src="static/lib/angular/angular.js"></script>

Neste ponto, você ainda não construiu sua API RESTful, para que seus controladores js retornem dados de amostra predefinidos (apenas uma configuração temporária). Quando estiver pronto, implemente a API RESTful e conecte-a ao seu aplicativo angular com angular-resource.js.

EDIT: montei um modelo de aplicativo que, embora um pouco mais complexo que o que descrevi acima, ilustra como alguém pode criar um aplicativo com o AngularJS + Flask, completo com a comunicação entre o AngularJS e uma API simples do Flask. Aqui está, se você quiser conferir: https://github.com/rxl/angular-flask

Você pode começar dos dois lados.

Você está certo de que provavelmente não precisa de uma estrutura completa do lado do servidor com o AngularJS. Normalmente, é melhor servir arquivos HTML / CSS / JavaScript estáticos e fornecer uma API RESTful para o back-end para o cliente consumir. Uma coisa que você provavelmente deve evitar é misturar modelos do lado do servidor com modelos do lado do cliente AngularJS.

Se você deseja usar o Flask para servir seus arquivos (pode ser um exagero, mas você pode usá-lo), copia o conteúdo de "app" de "angular-phonecat" para a pasta "estática" de "minitwit".

O AngularJS é mais direcionado para aplicativos do tipo AJAX, enquanto o flask oferece a capacidade de executar os aplicativos Web de estilo mais antigo, bem como criar APIs RESTful. Existem vantagens e desvantagens em cada abordagem, portanto depende realmente do que você deseja fazer. Se você me der algumas idéias, talvez eu possa fazer mais recomendações.

Este vídeo oficial do Jetbrains PyCharm de John Lindquist (angular.js e guru do jetbrains) é um bom ponto de partida, pois mostra a interação do serviço da web, banco de dados e angular.js no balão.

Ele constrói um clone do Pinterest com flask, sqlalchemy, flask-inquiet e angular.js em menos de 25 minutos.

Aproveite: http://www.youtube.com/watch?v=2geC50roans

editar : o novo guia de estilo Angular2 sugere uma estrutura semelhante, se não a mesma, com muito mais detalhes.

A resposta abaixo visa projetos de grande escala. Passei bastante tempo pensando e experimentando várias abordagens para poder combinar alguma estrutura do lado do servidor (Flask com o App Engine no meu caso) para funcionalidade de back-end junto com uma estrutura do lado do cliente como Angular. Ambas as respostas são muito boas, mas eu gostaria de sugerir uma abordagem um pouco diferente que (pelo menos em minha opinião) seja dimensionada de maneira mais humana.

Quando você está implementando um exemplo TODO, as coisas são bem diretas. Quando você começa a adicionar funcionalidades e pequenos detalhes interessantes para melhorar a experiência do usuário, não é difícil se perder no caos de estilos, javascript etc.

Meu aplicativo começou a crescer bastante, então tive que dar um passo atrás e repensar. Inicialmente, uma abordagem como sugerida acima funcionaria, tendo todos os estilos juntos e todo o JavaScript juntos, mas não é modular e não pode ser facilmente mantido.

E se nós organizássemos o código do cliente por recurso e não por tipo de arquivo:

app
|-- server
    |-- controllers
        |-- app.py
    |-- models
        |-- model.py
    |-- templates
        |-- index.html
|-- static
    |-- img
    |-- client
        |-- app.js
        |-- main_style.css
        |-- foo_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
        |-- bar_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
    |-- lib
        |-- jquery.js
        |-- angular.js
        |-- ...

e assim por diante.

Se construirmos assim, podemos agrupar todos os nossos diretórios em um módulo angular. E dividimos nossos arquivos de uma maneira agradável, para que não precisemos passar por códigos irrelevantes quando estivermos trabalhando com um recurso específico.

Um executor de tarefas como o Grunt configurado corretamente, poderá encontrar e concatenar e compilar seus arquivos sem muito aborrecimento.

Outra opção é separar completamente os dois.

projeto
| - servidor
| - cliente

Os arquivos relacionados ao flask vão para a pasta do servidor e os arquivos relacionados ao angularjs, para a pasta do cliente. Dessa forma, será mais fácil alterar o back-end ou o front-end. Por exemplo, você pode querer mudar de Flask para Django ou AngularJS para ReactJS no futuro.

Eu acho que é importante determinar em que extremidade você deseja fazer a maior parte do processamento de dados - front-end ou back-end.
Se for front-end, siga o fluxo de trabalho angular, o que significa que seu aplicativo de balão funcionará como mais uma API, onde uma extensão como descanso para o frasco terminará.

Mas se, como eu, você está fazendo mais trabalho no back-end, vá com a estrutura do balão e conecte apenas o angular (ou, no meu caso, vue.js) para criar o front end (quando necessário)