web-dev-qa-db-ja.com

Node.jsおよびAngularJSアプリケーションの構造化

私は最初のAngularJSプロジェクトを試みようとしていますが、AngularJSとNode.jsの両方を同時にゼロから学習することを意味しますが、Node.jsをバックエンドに使用するのは理にかなっています。

私が頭を悩ませようとしている最初のことは、良いファイル構造です。これまでのところ、私の純粋なHTML/CSSテンプレートには次のディレクトリ構造があります...

_site/
Fonts/
Javascript/
SASS/
Stylesheets/
Index.html

（_siteはPSDなどの作業ディレクトリです。）

Node.js/AngularJSアプリのディレクトリ構造の例を見つけました here ....

...次のディレクトリ構造を提案します。

app.js              --> Application configuration
package.json        --> For npm
public/             --> All of the files to be used in on the client side
  css/              --> CSS files
    app.css         --> Default stylesheet
  img/              --> Image files
  js/               --> JavaScript files
    app.js          --> Declare top-level application module
    controllers.js  --> Application controllers
    directives.js   --> Custom AngularJS directives
    filters.js      --> Custom AngularJS  filters
    services.js     --> Custom AngularJS services
    lib/            --> AngularJS  and third-party JavaScript libraries
      angular/
        angular.js            --> The latest AngularJS
        angular.min.js        --> The latest minified AngularJS
        angular-*.js          --> AngularJS add-on modules
        version.txt           --> Version number
routes/
  api.js            --> Route for serving JSON
  index.js          --> Route for serving HTML pages and partials
views/
  index.jade        --> Main page for the application
  layout.jade       --> Doctype, title, head boilerplate
  partials/         --> AngularJS view partials (partial jade templates)
    partial1.jade
    partial2.jade

だから、これは私には非常に良さそうです（私はJadeを使用しないという事実を除く）。

まだ次の質問があります...

  1. すべてのフロントエンドファイルとバックエンドファイルを別々に保ちたい。このソリューションでは、すべてのフロントエンドファイルをpublic /ディレクトリに配置します。ほとんどの場合、パブリックにする必要があるため、理にかなっていますが、SASSフォルダーと_siteフォルダーをここに配置するのは理にかなっていますか？それらをそのままにしておくことはできますが、本番環境に置いたときにアップロードすることはできませんが、公開すべきではないので間違っているようです。また、すべてのバックエンドのものがルートレベルに属しているわけでもありません。

  2. [〜＃〜] cdn [〜＃〜] からAngularJSをロードした方が良いと思いませんか？

  3. サーバーが1つのテンプレート（メインアプリケーションテンプレート）を配信するだけで、他のすべてのHTMLがフロントエンドで構築されることを考えると、index.htmlファイルを静的に保ち、viewsフォルダーを削除し、元のAngularJS Seedアプリケーションはそうですか？

これはすべて意見の問題であり、技術的には好きな場所に置くことができることを理解していますが、さまざまなディレクトリ構造の落とし穴について助言することができるよりも経験のある人を望んでいます。

javascriptangularjsnode.js
77
jonhobbs

1）通常、saas/lessファイルを公開することは、デバッグ時にクライアント側のless-> css変換を使用したい場合に意味があります（less.jsがそれを行います）。ただし、_siteに何が含まれているのかわからない（ところで、プロジェクト、特に公共のものには小文字のフォルダーを使用する必要があります）。

2）通常、本番環境で、開発用にローカルバージョンのみを使用して、環境に応じて2つの個別のレイアウトを使用して、AngularJSをGoogle CDNからロードすることをお勧めします。

3）クライアント側のレンダリングが進むべき方法であっても、サーバー側のレイアウト/ビューのレンダリングを維持することができますが、おそらくそれはある時点で必要になります（管理者アクセス、電子メールのレンダリングなど）。ただし、パブリックフォルダーでAngularJSのpartials名を使用すると、サーバー側viewsとクライアント側partialsの混乱を避けることができます。

現時点で最も論理的なことと思われることを明確に実行する必要があります。エクスプレスに慣れると、おそらく物事を移動するでしょう。

既存のエクスプレスフレームワークをチェックして、アプリの構造を確認する必要があります。たとえば、 TowerJS にはかなりきれいなconfigフォルダーがありますが、個人的には好きではないサーバー側とクライアント側のコードが混在しています。

NodeJS MVC frameworks のこの比較をチェックして、他の人がどのように処理するかを確認してください。しかし、これらのフレームワークのいずれかで過剰にコミットする前に、完全に制御し、物事がどのように機能するかを理解するために、明らかにバニラエクスプレスコードから始めます。

20
Olivier

時間が経つにつれて物事は容易になっています。私はYeomanをAngularJSフロントエンドに使用しました。これにより、作業がはるかに簡単になります。 http://yeoman.io/

オプション1、MEAN.io

MEANは素晴らしい頭字語です！ MEANスタックディレクトリ構造を好みます。コンベンションの人々を使用しましょう！ mean.io のディレクトリ構造を使用するだけです。 MEANは、 Grunt 、 Bower などのすべてのグッズを投入するので便利です。

Enter image description here

オプション2、Angular-seed + Express.js

Node.js/AngularJSプロジェクトでGitHubを検索しました（おそらくそれほど難しくはありません）が、開始ディレクトリ構造にとって本当に素晴らしいものは見当たりませんでした。 Node.js Express.jsをマージしました（コマンドラインから Express.jsを実行[〜＃〜] ejs [〜＃〜] も-も使用せずに Jade/Pug ）角度シードプロジェクトのスケルトン（ GitHubから複製 ）。それから私はたくさんのものを動かしました。ここに私が思いついたものがあります：

  • developer-開発者のみが使用するもの。展開する必要はありません。
    • config-カルマ構成ファイルなど。
    • scripts-開発者スクリプト（ビルド、テスト、デプロイ）
    • test-e2eおよび単体テスト。
  • logs
  • node_modules- このStack Overflow answer これをGitに配置することをお勧めします。 しかし、これは時代遅れかもしれません。
  • public-これは、アンギュラーシードのアプリフォルダーからほぼ直接得られます。
    • css、img、js、lib、partials-かなり明白でニースで短い。
  • routes-Node.jsルート。
  • server-サーバー側の「Shebang」Node.jsプログラム、デーモン、cronプログラムなど。
  • server.js-これがサーバー側であることをより明確にするために、app.jsから名前を変更しました。

Enter image description here

36
Jess

提案されているように、それは主に個人的な好みと、その時点で作業しているプロジェクトで何が機能するかによって決まります。あなたが話すすべての人は異なるアイデアを持ち、各プロジェクトには独自のデザインがあります。一方で機能するものが他方で機能しない場合があります。かなりの数の異なる構造を試してみて、すぐに最も快適な構造を見つけることになると思いますが、これは今後も進化します。

Angular Seed構造が最もクリーンであることがわかりましたが、これも個人的な好みです（ただし、Angularチームによって設計されていると役立ちます）。

プロジェクトのスケルトンを生成するために Yeoman を検討することもできます。

Yeomanは、開発者が美しく魅力的なWebアプリを迅速に構築するのに役立つ、堅牢で意見の多いツール、ライブラリ、およびワークフローのセットです。

プロジェクトのブートストラップと管理に最適なツールであり（Railsと同様）、ディレクトリ構造とスケルトンファイルを作成して構築できます。ブライアンフォードは、YeomanとAngularの使用について excellent post を書きました。

また、YouTubeチャンネルでAngularミートアップ録画を見ることをお勧めします。私は最近、これらの質問が出たマウンテンビューでのミートアップに参加しました。ミシュコはAngular SeedおよびYeomanを推奨しました（少なくとも良い出発点として）。

個々の質問に答えるには：

  1. サーバー側でコンパイルされたファイルは、パブリックフォルダーの外に保管する必要があります。マスターPSDやモックアップなど、パブリックフォルダー内に（ブラウザーまたはユーザーによる）パブリック消費を目的としないその他のファイルを保持しないことをお勧めします。

  2. 大量のトラフィックが予想される場合、CDNから静的アセット（JS、画像、CSS）を提供することは常に適切です。あまり訪問していないサイトにとってはそれほど重要ではありませんが、それでも良い考えです。最初の開発のためにファイルをローカルで提供することから始めます。公開日が近づいているときのために、資産の最適化を終了します。この時期が来たら、キャッシュを正しく設定する必要もあります。たとえば、Yeomanは、アセットをバージョン管理するための優れた方法を提供します。これにより、キャッシュの有効期間が長くなりますが、ファイルの更新をクライアントにプッシュできます。

  3. インデックスファイルがサーバー側のレンダリングを必要としない場合は、静的に提供します。 Angularアプリを使用して、バックエンドを可能な限りバックエンドから切り離したいのです。懸念の分離を維持するのに役立ちます。クライアントファイルを開発するとき、バックエンドについてまったく考える必要はありません（Angularはこれに最適です）。

本当に、あなただけで遊ぶ必要があります。さまざまなことを試して、ブログの投稿を読んで、他の人からアイデアをもらい、質問（ここで行ったように、Angular Google+コミュニティページで）、ビデオを見て、できればミートアップに参加する-Meetupsこれには本当に素晴らしいです。

5
Berry Phillips

私は以前のすべての投稿に同意しません。彼らは別の場所から貼り付けられたか、自分の心を持っていませんでした。私の経験から、クライアント側のコードをフラット化する方が良いでしょう。クライアントディレクトリ内のコードはルートディレクトリにある必要があります。

なぜこのように提案するのですか？フルスタックのJavaScriptプロジェクトをバックエンドなしのプロジェクトに変更したいが、フロントエンドのみを含めたい場合、はるかに簡単だからです。 JavaScriptで書かれたほとんどのプロジェクトは、フロントエンドに焦点を合わせています。

「css」、「image」と同じフォルダレベルの「server」などのディレクトリにバックエンドコードを配置することをお勧めします。その利点は、バックエンドが必要な場合または必要ない場合に、追加するだけですまたは、「server」ディレクトリを削除しても、Originプロジェクトの構造には影響しません。

このような：

Enter image description here

2
胡亚雄

このスケルトンを見る

https://github.com/Giancarlo1974/SailsAngular

統合されますAngular 4 + Bootstrap 4はクライアントに、Node Sails JSはサーバーに

このソリューションの長所の1つは、1） タスクの自動化 2） データベース不可知論

0
Janka

私はまったく同じことを調査していました。

私の最初の考えは、 Express Generator および Angular Seed を使用することに向けられました。

その後、私ははるかに良い解決策を見つけました：

最も一般的なヨーマンジェネレーターの1つは、Node.jsおよびAngularJSアプリケーションの構造を提供します。

私は標準化の力を信じており、プロジェクトに参加する新しい人々は統一された構造を高く評価するでしょう。

0
Mars Robertson