Node.jsと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を使わないという事実を除けば)。
まだ次のような疑問があります...
-
私はすべてのフロントエンドとバックエンドのファイルを別々に保ちたいと思います。このソリューションでは、すべてのフロントエンド ファイルを public/ ディレクトリに置きますが、ほとんどのファイルが公開される必要があるため、それは理にかなっています。しかし、SASSと_siteのフォルダをここに置くことは意味があるのでしょうか?私はそれらをそこに置くことができ、本番環境に置くときにはアップロードしませんが、それらは公開されるべきではないので、間違っているように思えます。また、すべてのバックエンドのものと一緒にルート レベルに属するものでもありません。
-
AngularJSをロードするために CDN ?
-
サーバーが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フレームワーク をチェックして、他の人がどのように物事を行うかを見てください。しかし、私は明らかに、これらのフレームワークのいずれかにコミットする前に、物事がどのように動作するかを理解するために、完全に制御するためにバニラエクスプレスコードで開始します。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] package.jsonのチルダ(~)とキャレット(^)の違いは何ですか?
-
[解決済み] Node.jsのプログラムにコマンドライン引数を渡すにはどうしたらいいですか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] Node.jsで終了する方法
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] Node.jsでファイルを書き込む
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HerokuでNode.jsアプリを作成する場合、Gitに「node_modules」フォルダをチェックインした方が良いですか?
-
[解決済み】jQueryライブラリはどこからインクルードするのですか?Google JSAPIですか?CDNですか?
-
[解決済み] なぜjQueryにはGoogleのCDNを使うべきなのでしょうか?
-
[解決済み] Angularjsのコード/命名規則があるのか?[クローズド]
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] Node.jsのES6クラスをrequireで作る