[解決済み】典型的な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のアプリも単体でイメージしやすいが、この2つの技術を使うとなると、どう連携しているのかがわからない。AngularJSがあれば、サーバーサイドのWebフレームワークは不要で、PythonのWebサーバーで十分な気がするのですが。例えばAngularJSのToDoアプリでは、MongoLabを使ってRestful APIでデータベースとやり取りしています。バックエンドにウェブフレームワークを持つ必要はないのです。

多分、私がひどく混乱しているだけで、AngularJSは空想のjQueryライブラリに過ぎないので、FlaskプロジェクトでjQueryを使うのと同じように使うべきです（AngularJSテンプレートの構文をJinja2と衝突しないようなものに変更すると仮定します）。私の質問がいくらか意味をなすことを願っています。私は主にバックエンドに取り組んでおり、このクライアントサイドフレームワークは私にとって未知の領域です。

どのように解決するのですか？

まず、Flaskアプリを以下のような標準的な構成で整理してみます。

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

また、btfordが述べたように、Angularアプリを行う場合、Angularクライアントサイドテンプレートの使用に注力し、サーバーサイドテンプレートには近づかない方が良いでしょう。render_template('index.html') を使うと、Flask は Angular のテンプレートを jinja のテンプレートとして解釈してしまうので、正しくレンダリングされなくなります。その代わり、以下のようにします。

@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アプリにフックします。

EDIT: 上に説明したものより少し複雑ですが、AngularJS + Flask でどのようにアプリを構築できるか、AngularJS とシンプルな Flask API の間の通信を完全に説明するアプリテンプレートをまとめました。これをチェックしたい場合は、ここにあります。 https://github.com/rxl/angular-flask