Flusso di lavoro e struttura del progetto tipici di AngularJS (con Python Flask)

Sono piuttosto nuovo a tutta questa frenesia del framework lato client MV *. Non deve essere AngularJS, ma l'ho scelto perché mi sembra più naturale di Knockout, Ember o Backbone. Qual è il flusso di lavoro? Le persone iniziano con lo sviluppo di un'applicazione sul lato client in AngularJS e poi si agganciano al back-end?

O viceversa, costruendo prima il back-end in Django, Flask, Rails e quindi collegando un'app AngularJS? C'è un modo "giusto" per farlo, o è solo una preferenza personale alla fine?

Inoltre, non sono sicuro se strutturare il mio progetto secondo Flask o AngularJS? pratiche comunitarie.

Ad esempio, l'app Minitwit di Flask è strutturata in questo modo:

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

L'app tutorial di AngularJS è strutturata in questo modo:

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

Potrei immaginare un'app Flask da sola, ed è abbastanza facile vedere l'app AngularJS come ToDo List da sola, ma quando si tratta di utilizzare entrambe queste tecnologie non capisco come funzionano insieme. Sembra quasi che non abbia bisogno di un framework web lato server quando hai già AngularJS, basterà un semplice web server Python. Nell'app da fare AngularJS, ad esempio, usano MongoLab per parlare al database usando l'API Restful. Non era necessario disporre di un framework Web sul back-end.

Forse sono semplicemente terribilmente confuso e AngularJS non è altro che una libreria jQuery di fantasia, quindi dovrei usare proprio come avrei usato jQuery nei miei progetti Flask (supponendo che cambi la sintassi del modello AngularJS in qualcosa che non sia in conflitto con Jinja2). Spero che le mie domande abbiano un senso. Lavoro principalmente nel back-end e questo framework lato client è un territorio sconosciuto per me.

Vorrei iniziare organizzando l'app Flask nella struttura standard come segue:

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

E come detto btford, se stai facendo un'app angolare, ti consigliamo di concentrarti sull'uso dei modelli angolari sul lato client e di stare lontano dai modelli sul lato server. L'uso di render_template ('index.html') farà sì che Flask interpreti i tuoi modelli angolari come modelli jinja, in modo che non vengano visualizzati correttamente. Invece, ti consigliamo di fare quanto segue:

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

Nota che l'uso di send_file () significa che i file verranno memorizzati nella cache, quindi potresti voler usare make_response (), almeno per lo sviluppo:

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

Successivamente, crea la parte AngularJS della tua app, modificando la struttura dell'app in modo che appaia così:

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

Assicurati che il tuo index.html includa AngularJS e qualsiasi altro file:

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

A questo punto, non hai ancora creato l'API RESTful, quindi puoi fare in modo che i tuoi controller js restituiscano dati campione predefiniti (solo una configurazione temporanea). Quando sei pronto, implementa l'API RESTful e collegala alla tua app angolare con angular-resource.js.

EDIT: ho messo insieme un modello di app che, sebbene un po 'più complesso di quello che ho descritto sopra, illustra come si potrebbe costruire un'app con AngularJS + Flask, completa della comunicazione tra AngularJS e una semplice API Flask. Qui è se vuoi verificarlo: https://github.com/rxl/angular-flask

Puoi iniziare da entrambe le parti.

Hai ragione sul fatto che probabilmente non hai bisogno di un framework lato server completo con AngularJS. In genere è meglio servire file HTML / CSS / JavaScript statici e fornire un'API RESTful per il back-end che il client può utilizzare. Una cosa che dovresti probabilmente evitare è la combinazione di modelli lato server con modelli lato client AngularJS.

Se si desidera utilizzare Flask per servire i propri file (potrebbe essere eccessivo, ma è comunque possibile utilizzarlo), si dovrebbe copiare il contenuto di "app" da "angular-phonecat" nella cartella "statica" di "minitwit".

AngularJS è più mirato alle applicazioni simili ad AJAX, mentre Flask ti dà la possibilità di fare sia le app Web di vecchio stile sia di creare API RESTful. Ci sono vantaggi e svantaggi per ogni approccio, quindi dipende davvero da cosa vuoi fare. Se mi dai qualche idea, potrei essere in grado di formulare ulteriori raccomandazioni.

Questo video ufficiale Jetbrains PyCharm di John Lindquist (angular.js e guru jetbrains) è un buon punto di partenza in quanto mostra l'interazione di webservice, database e angular.js all'interno del pallone.

Costruisce un clone di interesse con fiaschetta, sqlalchemy, fiaschetta inquieta e angular.js in meno di 25 minuti.

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

modificare : la nuova guida di stile Angular2 suggerisce una struttura simile, se non la stessa, in modo molto più dettagliato.

La risposta di seguito si rivolge a progetti su larga scala. Ho trascorso un bel po 'di tempo a pensare e sperimentare diversi approcci in modo da poter combinare alcuni framework lato server (Flask con App Engine nel mio caso) per funzionalità back-end con un framework lato client come Angular. Entrambe le risposte sono molto buone, ma vorrei suggerire un approccio leggermente diverso che (almeno nella mia mente) si ridimensiona in un modo più umano.

Quando stai implementando un esempio TODO, le cose sono abbastanza semplici. Quando inizi ad aggiungere funzionalità e piccoli dettagli per migliorare l'esperienza dell'utente, non è difficile perdersi nel caos di stili, javascript ecc.

La mia applicazione ha iniziato a crescere abbastanza grande, quindi ho dovuto fare un passo indietro e ripensare. Inizialmente un approccio come suggerito sopra avrebbe funzionato, avendo tutti gli stili insieme e tutti JavaScript insieme, ma non è modulare e non facilmente gestibile.

E se organizzassimo il codice client per funzione e non per tipo di file:

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 così via.

Se lo costruiamo in questo modo, possiamo avvolgere ogni nostra directory in un modulo angolare. E abbiamo diviso i nostri file in un modo carino che non dobbiamo passare attraverso il codice irrilevante quando stiamo lavorando con una funzione specifica.

Un task runner come Grunt correttamente configurato, sarà in grado di trovare e concatenare e compilare i file senza troppi problemi.

Un'altra opzione è quella di separare completamente i due.

progetto
| - server
| - client

I file relativi al pallone vanno nella cartella del server e i file relativi a angularjs vanno nella cartella del client. In questo modo, sarà più facile cambiare il backend o il front-end. Ad esempio, in futuro potresti voler passare da Flask a Django o AngularJS a ReactJS.

Penso che sia importante determinare a quale estremità si desidera eseguire la maggior parte dell'elaborazione dei dati: front-end o back-end.
Se è front-end, procedi con il flusso di lavoro angolare, il che significa che la tua app di pallone funzionerà come più di un'api in cui un'estensione come il pallone-riposante verrà a finire.

Ma se come me, stai facendo la maggior parte del lavoro sul backend, quindi vai con la struttura del pallone e solo l'angolo angolare (o nel mio caso vue.js) per costruire il front-end (quando necessario)