web-dev-qa-db-ja.com

典型的な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アプリでは、Restful APIを使用してMongoLabを使用してデータベースと通信します。バックエンドにWebフレームワークを用意する必要はありませんでした。

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

javascriptpythonflaskangularjs
226
Sahat Yalkabov

次のように、標準構造で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アプリに接続します。

編集：上記で説明したものよりも少し複雑ですが、AngularJSとシンプルなFlaskとの通信を備えた、AngularJS + Flaskでアプリを構築する方法を示すアプリテンプレートを作成しましたAPI。ここにチェックアウトしたい場合があります： https://github.com/rxl/angular-flask

167
Ryan

どちらからでも開始できます。

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

Flaskを使用してファイルを提供する場合は（やり過ぎかもしれませんが、それでも使用できます）、「app」のコンテンツを「angular-phonecat」から「static」フォルダーにコピーします。 「ミニットウィット」

AngularJSはAJAXのようなアプリケーションをよりターゲットにしていますが、flaskを使用すると、古いスタイルのWebアプリとRESTful APIの両方を作成できます。それぞれのアプローチには長所と短所がありますので、何をしたいかによって本当に異なります。あなたが私にいくつかの洞察を与えれば、私はさらに勧告をすることができるかもしれません。

38
btford

John LindquistによるこのJetbrains PyCharmの公式ビデオ（angular.jsとjetbrains guru）は、フラスコ内でのwebservice、database、angular.jsの相互作用を示すナイスな出発点です。

彼は、25分以内にフラスコ、sqlalchemy、flask-restless、angular.jsを使用してpinterest cloneを構築します。

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

22
Bijan

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

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

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

等々。

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

Grunt のようなタスクランナーは、適切に設定されているため、ファイルを見つけて連結し、コンパイルするのに手間がかかりません。

17
topless

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

 project 
 |-server 
 |-client

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

1
John Kenn

ほとんどのデータ処理（フロントエンドまたはバックエンド）をどの側で行うかを決定することが重要だと思います。
フロントエンドの場合は、angularワークフローを使用します。つまり、flaskアプリは、flask-restfulのような拡張機能が提供されるAPIとして機能します。終わり。

しかし、私のように、バックエンドでほとんどの作業を行っている場合は、flask構造に進み、angular（または私の場合はvue.js）のみをプラグインしてフロントエンドをビルドします（必要な場合）

0
Kudehinbu Oluwaponle