AngularJSのフォルダー構造[終了]

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

タイプで並べ替え

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

機能で並べ替え（推奨）

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

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

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

いくつかのアプリケーション（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

そして、大げさなビルドの後（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)

私はこれが好きはangularjs構造に関するエントリが

angularjs開発者の一人が書いたので、良い洞察が得られるはずです

ここに抜粋があります：

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...

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

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

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

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