[javascript] 典型的なAngularJSワークフローとプロジェクト構造(Python Flaskを使用)


2 Answers

あなたはどちらかの端から始めることができます。

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

Flaskを使ってファイルを扱いたいのであれば(残念ですが、それでも使えます)、 "app-phonecat"の内容を "minitwit"の "static"フォルダにコピーします。

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

Question

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

あるいは、Django、Flask、Railsでバックエンドを構築してから、AngularJSアプリケーションをそれに接続することで、別の方法がありますか? それを行う「正しい」方法はありますか、それとも最終的には個人的な好みですか?

フラスコまたは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 ListのようなAngularJSアプリを見るのはかなり簡単だが、どちらの技術を使うのか分かりません。 AngularJSを既にお持ちの場合、私はサーバーサイドのWebフレームワークを必要としないようですが、単純なPython Webサーバーで十分です。 たとえば、AngularJS To-doアプリでは、Restful APIを使用してデータベースと会話するためにMongoLabを使用します。 バックエンドにWebフレームワークを持つ必要はありませんでした。

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




編集 :新しいAngular2スタイルのガイドは、同じ構造ではないにしても、より詳細に示唆しています。

以下の答えは、大規模なプロジェクトを対象としています。 かなりの時間を費やしていくつかのアプローチを試しています。そのため、バックエンドの機能とAngularのようなクライアントサイドフレームワークのために、いくつかのアプローチを試してみました。 両方の答えは非常に良いですが、(少なくとも私の考えでは)より人間的な方法で比例する少し異なるアプローチを提案したいと思います。

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ようなタスクランナーは、適切に構成されているため、多くの手間をかけずにファイルを検索し、連結してコンパイルすることができます。




フロントエンドやバックエンドといった大部分のデータ処理をどのような目的で実行したいのかを判断することが重要だと思います。
それがフロントエンドの場合は、角度のワークフローに進みます。つまり、フラスコのアプリは、フラスコのような拡張機能が終わるAPIの機能として機能します。

しかし、私のようにバックエンドで大部分の作業をしている場合は、フラスコ構造にして、フロントエンドを構築するために角度をつけて(または私の場合はvue.js)プラグを差し込みます(必要な場合)




Related