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

Question

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

それとも最初はジャンゴ、フラスコ、Railsのバックエンドを構築し、それにAngularJSアプリを取り付けることにより、他の方法で回避？それを行う「正しい」方法はありますか、それとも最終的には個人的な好みですか？

私はまた、フラスコやAngularJSに応じて自分のプロジェクトを構築しているかどうかわかりませんか？コミュニティの実践。

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

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

たとえばは、フラスコのminitwitアプリはそうのように構成されている

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

が、私はそれ自体でフラスコアプリを描くことができ、そしてそれはかなり簡単ですToDo ListのようなAngularJSアプリをそれ自体で見ることはできますが、これらのテクノロジーの両方を使用する場合、どのように連携するのか分かりません。 AngularJSを既にお持ちの場合、私はサーバーサイドのWebフレームワークを必要としないようですが、単純なPython Webサーバーで十分です。たとえば、AngularJS To-doアプリでは、Restful APIを使用してデータベースと会話するためにMongoLabを使用します。バックエンドにWebフレームワークを持つ必要はありませんでした。

AngularJSはファンシーなjQueryライブラリに過ぎないので、FlaskプロジェクトでjQueryを使用するのと同じように使用する必要があります（AngularJSのテンプレート構文を矛盾しないものに変更したと仮定します）。 Jinja2と一緒に）。私の質問が意味をなさないことを願っています。私は主にバックエンドで作業し、このクライアント側のフレームワークは私にとっては未知の領域です。

Answer 1

私は、標準構造でフラスコアプリを整理することから始めます：あなたは角アプリをやっている場合

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

と述べたbtfordとして、あなたは角度クライアントを使用することに注力したいと思いますサーバー側のテンプレートから離れてください。 render_template（ 'index.html'）を使用すると、Flaskは角テンプレートをjinjaテンプレートとして解釈し、正しくレンダリングされません。

：）（send_fileを使用すると、あなたがmake_responseを使用する場合がありますので、ファイルは、少なくとも開発のために、代わりに）（、キャッシュされることを意味していること

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

注：代わりに、次の操作を行うことになるでしょう

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が含まれていることを確認し、だけでなく、 yの他のファイル：

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

この時点で、あなたはまだあなたのRESTfulなAPIを構築していない、あなたのJSを持つことができますので、コントローラは、事前に定義されたサンプルデータ（一時的なセットアップ）を返します。準備ができたら、RESTful APIを実装して、angle-resource.jsを使って角度アプリに接続します。

EDIT：AngularJSとFlask APIを使ってAngularJS + Flaskでアプリケーションを構築する方法を示しています。あなたはそれをチェックアウトしたい場合はここにある：https://github.com/rxl/angular-flask

Answer 2

どちらの側からでも起動できます。

AngularJSで完全なサーバーサイドフレームワークは必要ありません。静的なHTML/CSS/JavaScriptファイルを提供し、クライアントが消費するバックエンド用のRESTful APIを提供する方が一般的に適しています。あなたが避けておくべきことの1つは、サーバー側テンプレートとAngularJSクライアント側テンプレートを混在させることです。

あなたのファイルを扱うためにFlaskを使いたいのであれば（残念ですがそれでも使えますが）、 "angle-phonecat"の "app"の内容を "minitwit"の "static"フォルダにコピーします"

AngularJSはAJAXのようなアプリケーションを対象としていますが、フラスコは古いスタイルのWebアプリケーションとRESTfulなAPIの両方を行うことができます。それぞれのアプローチには長所と短所があります。したがって、あなたがしたいことに本当に依存します。私にいくつかの洞察を与えるなら、私はさらなる勧告をすることができるかもしれません。次のように

Answer 3

編集：新しいAngular2 style guideがはるかに詳細に類似し、そうでない場合は同じ構造を示唆しています。

以下の回答は、大規模なプロジェクトを対象としています。 かなりの時間を費やしていくつかのアプローチを試しています。そのため、バックエンド機能とAngularのようなクライアントサイドフレームワークのためにいくつかのサーバー側フレームワーク（私の場合はFlaskとFlaskを私の場合は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のようなタスクランナーが正しく構成されていると、多くの手間をかけずにファイルを検索して連結してコンパイルできます。

Answer 4

ジョン・リンドクリスト（angular.jsとjetbrains guru）によるこの公式のJetbrains PyCharmビデオは、フラスコ内のウェブサービス、データベース、angular.jsの相互作用を示す素晴らしい出発点です。

クローンはフラスコ、sqlalchemy、flasklesslessおよびangular.jsを25分以内で構築します。

は、楽しみなさい： http://www.youtube.com/watch?v=2geC50roans

Answer 5

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

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

Answer 6

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

しかし

は、あなたがバックエンドで最も仕事をしている、フロントエンドを構築するために、次にフラスコ構造で行くだけの角度プラグ（または私の場合にはvue.js）（ときneccessary）