典型的なAngularJSワークフローとプロジェクト構造（Python Flaskを使用）

私は、このMV *クライアント側フレームワークのフレンジーにまったく慣れていません。AngularJSである必要はありませんが、Knockout、Ember、Backboneのどちらよりも自然な感じがするので選びました。とにかく、ワークフローはどのようなものですか？人々はまずAngularJSでクライアント側アプリケーションを開発し、それからバックエンドをそれに接続しますか？

または、最初にDjango、Flask、Railsでバックエンドを構築してから、AngularJSアプリをそれにアタッチすることで、逆の方法をとっていますか？それを行う「正しい」方法はありますか、それは結局のところ個人的な好みですか？

また、FlaskとAngularJSのどちらに従ってプロジェクトを構成するかわかりません。コミュニティの慣行。

たとえば、Flaskのminitwitアプリは次のように構成されています。

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

AngularJSチュートリアルアプリは次のように構成されています。

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

Flaskアプリ自体を描くこともできましたが、ToDoリストのようなAngularJSアプリ自体を見るのはかなり簡単ですが、これらのテクノロジーの両方を使用する場合、それらがどのように連携しているかがわかりません。すでにAngularJSを持っている場合は、サーバー側のWebフレームワークは必要ないようです。単純なPython Webサーバーで十分です。たとえば、AngularJS to-doアプリでは、MongoLabを使用してRestful APIを使用してデータベースと通信します。バックエンドにWebフレームワークを用意する必要はありませんでした。

多分私はひどく混乱していて、AngularJSは空想のjQueryライブラリにすぎないので、FlaskプロジェクトでjQueryを使用するのと同じように使用する必要があります（AngularJSテンプレート構文をJinja2と競合しないものに変更するとします）。私の質問が理にかなっているといいのですが。私は主にバックエンドで作業しており、このクライアント側のフレームワークは私にとって未知の領域です。

まず、Flaskアプリを標準構造で次のように整理することから始めます。

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

そして、btfordが述べたように、Angularアプリを実行している場合は、Angularクライアント側テンプレートの使用に集中し、サーバー側テンプレートには近づかないようにする必要があります。render_template（ 'index.html'）を使用すると、Flaskが角度テンプレートをジンジャテンプレートとして解釈するため、正しくレンダリングされません。代わりに、以下を実行する必要があります。

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

send_file（）を使用すると、ファイルがキャッシュされることになるため、少なくとも開発では、代わりにmake_response（）を使用することもできます。

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

その後、アプリのAngularJS部分を構築し、次のようにアプリ構造を変更します。

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

index.htmlにAngularJSとその他のファイルが含まれていることを確認します。

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

この時点ではまだRESTful APIを作成していないため、jsコントローラーに事前定義されたサンプルデータを返すことができます（一時的なセットアップのみ）。準備ができたら、RESTful APIを実装し、angular-resource.jsを使用してAngularアプリに接続します。

編集：上記で説明したものより少し複雑ですが、AngularJS + Flaskを使用してアプリを構築し、AngularJSとシンプルなFlask APIの間の通信を完了する方法を示すアプリテンプレートをまとめました。チェックアウトしたい場合は、次のとおりです。https：//github.com/rxl/angular-flask

どちらから始めてもかまいません。

おそらく、AngularJSの完全なサーバー側フレームワークは必要ないでしょう。通常は、静的なHTML / CSS / JavaScriptファイルを提供し、クライアントが使用するバックエンドにRESTful APIを提供する方が適切です。おそらく避けるべきことの1つは、サーバー側のテンプレートとAngularJSのクライアント側のテンプレートを混在させることです。

Flaskを使用してファイルを提供したい場合（やり過ぎかもしれませんが、それでも使用できます）、「app」の内容を「angular-phonecat」から「minitwit」の「static」フォルダにコピーします。

AngularJSはAJAXのようなアプリケーションをターゲットにしていますが、Flaskは古いスタイルのWebアプリを実行できるだけでなく、RESTful APIを作成することもできます。それぞれのアプローチには長所と短所があるため、実際に何をしたいかによって異なります。あなたが私にいくつかの洞察を与えるならば、私はさらなる推奨をすることができるかもしれません。

John Lindquistによるこの公式のJetbrains PyCharmビデオ（angular.jsとjetbrainsの第一人者）は、フラスコ内のWebサービス、データベース、angular.jsの相互作用を示す優れた出発点です。

彼は25分未満でフラスコ、sqlalchemy、フラスコレストレス、angular.jsを使用して最も興味深いクローンを構築します。

お楽しみください：http : //www.youtube.com/watch? v =2geC50roans

編集：新しいAngular2スタイルガイドは、同じではないにしても、類似の構造をより詳細に提案しています。

以下の答えは、大規模プロジェクトを対象としています。Angularのようなクライアント側フレームワークと一緒にバックエンド機能のためにいくつかのサーバー側フレームワーク（私の場合はApp Engineを備えたFlask）を組み合わせることができるように、いくつかのアプローチを考えて実験することにかなりの時間を費やしています。どちらの回答も非常に優れていますが、（少なくとも私の心では）より人間的な方法でスケーリングする、少し異なるアプローチを提案したいと思います。

TODOの例を実装する場合、物事は非常に簡単です。ユーザーエクスペリエンスを改善するための機能と細かい細部を追加し始めると、混乱したスタイルやJavaScriptなどで迷子になることは難しくありません。

私のアプリケーションはかなり大きくなり始めたので、一歩下がって考え直す必要がありました。最初は、すべてのスタイルをまとめ、すべてのJavaScriptをまとめることで、上記で提案したようなアプローチが機能しますが、モジュール式ではなく、容易に保守できません。

ファイルの種類ごとではなく、機能ごとにクライアントコードを整理するとどうなるでしょうか。

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

等々。

このようにしてビルドすると、すべてのディレクトリを角度モジュールでラップできます。また、特定の機能を使用しているときに無関係なコードを実行する必要がないように、ファイルを適切に分割しています。

適切に構成されたGruntのようなタスクランナーは、手間をかけずにファイルを見つけて連結し、コンパイルすることができます。

別のオプションは、2つを完全に分離することです。

事業
|-サーバー
|-クライアント

Flaskに関連するファイルはserverフォルダーにあり、angularjsに関連するファイルはclientフォルダーにあります。このようにすると、バックエンドまたはフロントエンドを簡単に変更できます。たとえば、将来はFlaskからDjangoに、またはAngularJSからReactJSに切り替えることができます。

データ処理の大部分を実行したいのは、フロントエンドかバックエンドかを判断することが重要だと思います。
フロントエンドの場合は、角度のワークフローを使用します。つまり、フラスコアプリは、フラスコレストフルのような拡張機能が終了するAPIとして機能します。

しかし、私と同じように、ほとんどの作業をバックエンドで行っている場合は、フラスコ構造を使用して、角度（または私の場合はvue.js）をプラグインするだけで、フロントエンドを構築します（必要な場合）。