Flujo de trabajo y estructura de proyecto típicos de AngularJS (con Python Flask)

Question

Soy bastante nuevo en este frenesí de framework MV * del lado del cliente. No tiene que ser AngularJS, pero lo elegí porque me parece más natural que Knockout, Ember o Backbone. De todos modos, ¿cómo es el flujo de trabajo? ¿Empiezan las personas a desarrollar una aplicación para el cliente en AngularJS y luego conectan el back-end a ella?

O al revés construyendo primero el back-end en Django, Flask, Rails y luego adjuntando una aplicación AngularJS a él? ¿Hay una manera "correcta" de hacerlo, o es solo una preferencia personal al final?

¿Tampoco estoy seguro de si estructurar mi proyecto de acuerdo con el Frasco o AngularJS? prácticas comunitarias

Por ejemplo, la aplicación minitwit del frasco está estructurado así:

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

AngularJS aplicación tutorial está estructurado de la siguiente manera:

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

Me podía imaginar una aplicación Frasco por sí mismo, y es bastante fácil para ver la aplicación AngularJS como ToDo List por sí mismo, pero cuando se trata de usar ambas tecnologías, no entiendo cómo funcionan juntas. Casi parece que no necesito un framework web del lado del servidor cuando ya tienes AngularJS, un simple servidor web de Python será suficiente. En la aplicación de tareas de AngularJS, por ejemplo, usan MongoLab para hablar con la base de datos utilizando Restful API. No era necesario tener un marco web en el back-end.

Quizás estoy muy confundido, y AngularJS es nada más que una librería jQuery de lujo, así que debería usar al igual que me gustaría utilizar jQuery en mis proyectos Frasco (suponiendo cambio la sintaxis de la plantilla AngularJS a algo que no entra en conflicto con Jinja2). Espero que mis preguntas tengan algún sentido. Principalmente trabajo en el back-end y este framework de cliente es un territorio desconocido para mí.

Answer 1

me gustaría empezar a cabo por la organización de la aplicación del frasco en la estructura estándar de la siguiente manera:

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

Y como btford mencionado, si usted está haciendo una aplicación angular, usted querrá centrarse en el uso del cliente angular al lado de las plantillas y aléjate de las plantillas del lado del servidor. El uso de render_template ('index.html') hará que Flask interprete tus plantillas angulares como plantillas jinja, por lo que no se procesarán correctamente.En su lugar, tendrá que hacer lo siguiente:

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

Tenga en cuenta que el uso de send_file() significa que los archivos se almacenan en caché, por lo que es posible que desee utilizar make_response() en su lugar, al menos para el desarrollo:

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

Después, construir la parte AngularJS de su aplicación, la modificación de la estructura de aplicación para que se parezca a esto:

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

Asegúrese de que su index.html incluye AngularJS, así como una Y otros archivos:

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

En este punto, aún no han construido su API REST, para que pueda tener sus controladores JS devolver datos de ejemplo predefinidos (solamente una configuración temporal). Cuando esté listo, implemente la API RESTful y conéctela a su aplicación angular con angular-resource.js.

EDIT: redacté una plantilla de aplicación que, aunque un poco más compleja que lo que he descrito anteriormente, ilustra cómo se podría construir una aplicación con AngularJS + Flask, completando la comunicación entre AngularJS y una simple Flask API. Aquí es si quieres echarle un vistazo: https://github.com/rxl/angular-flask

Answer 2

Puede comenzar en cualquier extremo.

Tiene razón en que probablemente no necesita un marco de servidor completo con AngularJS. Por lo general, es mejor servir archivos HTML/CSS/JavaScript estáticos y proporcionar una API RESTful para que el cliente la consuma. Una cosa que probablemente debería evitar es mezclar las plantillas del lado del servidor con las plantillas del lado del cliente de AngularJS.

Si desea utilizar Flask para servir sus archivos (puede ser demasiado, pero puede usarlo) copie el contenido de "aplicación" de "angular-phonecat" en la carpeta "estática" de "minitwit" "

AngularJS está más orientado a las aplicaciones similares a AJAX, mientras que el matraz le brinda la capacidad de hacer tanto las aplicaciones web de estilo antiguo como crear API RESTful. Hay ventajas y desventajas para cada enfoque, por lo que realmente depende de lo que quiera hacer. Si me das algunas ideas, es posible que pueda hacer más recomendaciones.

Answer 3

edición: El nuevo Angular2 style guide sugiere una similar, si no la misma estructura con mucho más detalle.

La respuesta a continuación está dirigida a proyectos a gran escala. He pasado bastante tiempo pensando y experimentando con varios enfoques para poder combinar algunos frameworks del lado del servidor (Flask con App Engine en mi caso) para la funcionalidad back-end junto con un framework del lado del cliente como Angular. Ambas respuestas son muy buenas, pero me gustaría sugerir un enfoque ligeramente diferente que (en mi opinión, al menos) se escala de una manera más humana.

Cuando está implementando un ejemplo de TODO, las cosas son bastante sencillas. Sin embargo, cuando empiezas a agregar funcionalidad y pequeños detalles agradables para mejorar la experiencia del usuario, no es difícil perderse en el caos de estilos, javascript, etc.

Mi aplicación comenzó a crecer bastante grande, así que tuve que dar un paso atrás y repensar Inicialmente, un enfoque como el sugerido anteriormente funcionaría, al tener todos los estilos juntos y todos los JavaScript juntos, pero no es modular y no es fácil de mantener.

¿Y si organizamos el código de cliente por función y no por tipo de archivo:

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 
     |-- ... 

y así sucesivamente.

Si lo construimos así, podemos envolver todos nuestros directorios en un módulo angular. Y hemos dividido nuestros archivos de una manera agradable para que no tengamos que pasar por un código irrelevante cuando trabajamos con una función específica.

Un corredor de tareas como Grunt correctamente configurado, podrá encontrar y concatenar y compilar sus archivos sin mucha molestia.

Answer 4

Este video oficial de Jetburn PyCharm por John Lindquist (angular.js y gurú de jetbrains) es un buen punto de partida, ya que muestra la interacción del servicio web, la base de datos y angular.js dentro del matraz.

Construye pinterest clon con matraz, sqlalchemy, matraz-inquieto y angular.js en menos de 25 minutos.

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

Answer 5

Otra opción es separar completamente los dos.

 
project 
|-- server 
|-- client 

archivos relacionados al matraz pasa por debajo de la carpeta del servidor y los archivos relacionados con AngularJS pasa por debajo de la carpeta del cliente. De esta forma, será más fácil cambiar el backend o front-end. Por ejemplo, es posible que desee cambiar de Frasco a Django o AngularJS a ReactJS en el futuro.

Answer 6

Creo que es importante determinar en qué extremo desea hacer la mayor parte de su procesamiento de datos: front-end o back-end.
Si se trata de una interfaz, vaya con el flujo de trabajo angular, lo que significa que su aplicación de matraz funcionará como una API más, donde terminará una extensión como matraz-reposo.

Pero si como yo, que están haciendo la mayoría del trabajo en el backend, y después sigue la estructura de frasco y sólo se conecta angular (o en mi caso vue.js) para construir la parte delantera (cuando lo necesite)