227

私は、この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フレームワークは必要ないようですが、単純なPythonWebサーバーで十分です。たとえば、AngularJS to-doアプリでは、MongoLabを使用してRestfulAPIを使用してデータベースと通信します。バックエンドにWebフレームワークを用意する必要はありませんでした。

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

4

6 に答える 6

171

次のように、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 を使用して角度付きアプリに接続します。

編集: 上記で説明したものよりも少し複雑ですが、AngularJS + Flask を使用してアプリを構築する方法を示し、AngularJS と単純な Flask API 間の通信を完了するアプリ テンプレートをまとめました。確認したい場合はこちら: https://github.com/rxl/angular-flask

于 2013-02-28T20:23:33.423 に答える
38

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

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

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

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

于 2012-07-17T19:51:54.743 に答える
22

John Lindquist (angular.js および jetbrains の第一人者) によるこの公式の Jetbrains PyCharm ビデオは、flask 内の Web サービス、データベース、および angular.js の相互作用を示しているため、出発点として最適です。

彼は、flask、sqlalchemy、flask-restless、angular.js を使用して、25 分以内にpinterest クローンを作成しました。

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

于 2014-02-06T17:56:37.250 に答える
17

編集: 新しい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のようなタスク ランナーは、ファイルを見つけて連結し、コンパイルすることができます。

于 2013-09-02T10:29:38.790 に答える
1

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

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

フラスコに関連するファイルはサーバー フォルダーの下にあり、angularjs に関連するファイルはクライアント フォルダーの下にあります。これにより、バックエンドまたはフロントエンドの変更が容易になります。たとえば、将来、Flask から Django に、または AngularJS から ReactJS に切り替えたいと思うかもしれません。

于 2015-03-08T03:56:08.330 に答える