angularjs - AngularJS フォルダー構造

Question

大規模でスケーラブルな AngularJS アプリケーションのフォルダー構造をどのようにレイアウトしますか?

Answer 1

タイプで並べ替え

左側には、アプリがタイプ別に整理されています。小規模なアプリではそれほど悪くはありませんが、ここでも、探しているものを見つけるのがより難しくなっていることがわかります。特定のビューとそのコントローラーを見つけたい場合、それらは別のフォルダーにあります。コードを整理する他の方法がわからない場合は、ここから始めるのがよいでしょう。右側の手法 (機能ごとの構造) に移行するのは非常に簡単です。

機能で並べ替え (推奨)

右側では、プロジェクトが機能別に編成されています。すべてのレイアウト ビューとコントローラーはレイアウト フォルダーに配置され、管理コンテンツは管理フォルダーに配置され、すべての領域で使用されるサービスはサービス フォルダーに配置されます。ここでの考え方は、機能を機能させるコードを探しているときに、それが 1 か所にあるということです。サービスは、多くの機能を「提供」するため、少し異なります。アプリが形になり始めると、管理がはるかに簡単になるので、これが好きです。

よく書かれたブログ投稿: http://www.johnpapa.net/angular-growth-structure/

サンプルアプリ: https://github.com/angular-app/angular-app

Answer 2

いくつかのアプリケーション、いくつかは Symfony-PHP、いくつかは .NET MVC、いくつかは ROR で構築した後、AngularJS ジェネレーターでYeoman.ioを使用することが最善の方法であることがわかりました。

これは、最も一般的で一般的な構造であり、最もよく維持されています。

そして最も重要なことは、その構造を維持することで、クライアント側のコードを分離し、サーバー側のテクノロジ (あらゆる種類のさまざまなフォルダー構造とさまざまなサーバー側のテンプレート エンジン) に依存しないようにするのに役立ちます。

そうすれば、自分のコードや他のコードを簡単に複製して再利用できます。

これは grunt ビルドの前です: (ただし、作成するだけではなく、yeoman ジェネレーターを使用してください!)

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

そして、grunt ビルド (concat、uglify、rev など) の後:

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)

Answer 3

フレームワークの構造ではなく、アプリケーションの機能の構造でフォルダを整理するというアプローチもあります。angular-appと呼ばれるこれを説明する github スターター Angular/Express アプリケーションがあります。

Answer 4

私は 3 番目の angularjs アプリを使用していますが、フォルダー構造はこれまで毎回改善されてきました。私は今、私のものをシンプルに保ちます。

index.html (or .php)
/resources
  /css
  /fonts
  /images
  /js
    /controllers
    /directives
    /filters
    /services
  /partials (views)

単一のアプリには適していると思います。複数が必要なプロジェクトはまだありません。