77

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

私が理解しようとしている最初のことは、適切なファイル構造です。これまでのところ、私の純粋な HTML/CSS テンプレートのディレクトリ構造は次のとおりです...

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

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

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

...これは、次のディレクトリ構造を示唆しています。

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 ファイルを静的に保持し、ビュー フォルダーを削除し、元の AngularJS Seed アプリケーションのように public/ の下に partials/ フォルダーを作成しますか?

これはすべて意見の問題であり、技術的には好きな場所に配置できることを認識していますが、私よりも経験豊富な人がさまざまなディレクトリ構造の落とし穴についてアドバイスしてくれることを願っています.

4

6 に答える 6

36

時間が経つにつれて物事は簡単になっています。私は AngularJS のフロントエンドに Yeoman を使用しました。

オプション 1、MEAN.io

MEAN は素晴らしい頭字語です。私は MEAN スタック ディレクトリ構造を好みます。コンベンションの人を使おう！mean.ioのディレクトリ構造を使用するだけです。MEAN は、Grunt、Bowerなどのすべての機能を備えているため、便利です。

ここに画像の説明を入力してください

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

私は GitHub で Node.js/AngularJS プロジェクトを検索しましたが (おそらく十分ではありません)、ディレクトリ構造を開始するのに本当に優れたものは見つかりませんでした。そのため、Node.js Express.js ( EJSもJade/Pugも使用せずにコマンド ラインから Express.js を実行) スケルトンを angular-seed プロジェクト ( GitHub から複製) にマージしました。それから私はたくさんのものを動かしました。これが私が思いついたものです：

  • developer- 開発者のみが使用するもの。展開する必要はありません。
    • config-カルマ構成ファイルなど。
    • scripts- 開発者スクリプト (ビルド、テスト、デプロイ)
    • test- e2e および単体テスト。
  • logs
  • node_modules-このスタック オーバーフローの回答では、これを Git に入れることをお勧めします。 ただし、これは現在は廃止されている可能性があります。
  • public- これは、angular-seed アプリ フォルダーからほぼ直接取得されます。
    • css, img, js, lib, partials- かなり明白で素敵で短い.
  • routes- Node.js ルート。
  • server- サーバー側の "shebang" Node.js プログラム、デーモン、cron プログラムなど。
  • server.js-これがサーバー側であることをより明確にするために、app.jsから名前を変更しました。

ここに画像の説明を入力してください

于 2013-06-09T02:43:58.950 に答える
20

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

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

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

現時点で最も論理的と思われることを選択する必要があることは明らかです。express に慣れるにつれて、おそらく物事を移動するでしょう。

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

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

于 2012-12-22T06:50:04.363 に答える
5

示唆されているように、それは主に個人的な好みと、その時点で取り組んでいるプロジェクトで何がうまくいくかにかかっています。あなたが話す人は皆、異なるアイデアを持っており、それぞれのプロジェクトには独自のデザインがあります。かなりの数の異なる構造を試して、最も快適な構造がすぐに見つかると思いますが、これは時間の経過とともに進化します.

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

プロジェクトの骨組みを生成するためにYeomanを検討することも検討してください。

Yeoman は、開発者が美しく説得力のある Web アプリをすばやく構築するのに役立つ、堅牢で独自のツール、ライブラリ、およびワークフローのセットです。

これは、プロジェクトのブートストラップと管理 (Rails と同様の方法) のための優れたツールであり、構築するためのディレクトリ構造とスケルトン ファイルを作成します。Brian Ford は、Angular での Yeoman の使用に関する優れた投稿を書きました。

また、YouTube チャンネルで Angular ミートアップの録画を見ることをお勧めします。最近、マウンテン ビューで開催されたミートアップに参加したところ、これらの質問が出てきました。Miško は Angular Seed と Yeoman を推奨しました (少なくとも良い出発点として)。

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

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

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

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

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

于 2012-12-26T20:59:42.277 に答える