1. ホーム
  2. javascript

Node.jsとAngularJSのアプリケーションを構造化する

2023-08-09 01:02:03

質問

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. AngularJSをロードするために CDN ?

  3. サーバーが1つのテンプレート(メインアプリケーションテンプレート)だけを配信する必要があり、他のすべてのHTMLがフロントエンドで構築されることを考えると、オリジナルのAngularJSシードアプリケーションが行うように、index.htmlファイルを静的に保ち、ビューフォルダーを削除してpublic/下に部分/フォルダーを作成する方が理にかなっているのではないでしょうか?

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

どのように解決するのですか?

1) 普通は saas/less ファイルを公開することは、デバッグの際にクライアントサイドで less->css 変換を行いたい場合があるからです (less.js がそれを行います)。あなたの _site が何を含んでいるかは分かりませんが (btw プロジェクトのフォルダは小文字を使うべきです。特に公開されているものには) .

2) 本番環境ではGoogle CDNからAngularJSをロードし、開発環境ではローカル版のみを使用するのが一般的な良い習慣であり、環境に応じて2つの別々のレイアウトを持つことができます。

3) クライアントサイドレンダリングが望ましいとしても、サーバーサイドのレイアウト/ビューレンダリングを維持することもできます。しかし partials という名前を public フォルダで使用すると、サーバーサイドの views とクライアントサイドの partials .

その時点で最も論理的と思われるものを選ぶべきで、expressに慣れてきたらいろいろと動かしていくことになるでしょう。


既存のexpressフレームワークをチェックして、彼らがどのようにアプリを構成しているかを確認する必要があります。例えば タワーJS はかなりきれいな config フォルダがありますが、サーバーサイドとクライアントサイドのコードが混在しており、私は個人的に好きではありません。

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