web-dev-qa-db-ja.com

AngularJSのフォルダ構造

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

angularjs
184
Michael J. Calkins

enter image description here

種類で並べ替え

左側にはアプリがタイプ別にまとめられています。小型のアプリケーションにとってはそれほど悪くはありませんが、ここでもあなたが探しているものを見つけるのが難しくなることがわかります。特定のビューとそのコントローラを見つけたいとき、それらは異なるフォルダにあります。それ以外の方法でコードを構成する方法がわからない場合は、ここから開始すると良いでしょう。それは、右側の手法、つまり構造による機能への移行が非常に簡単だからです。

機能で並べ替え（推奨）

右側には、プロジェクトが機能ごとにまとめられています。すべてのレイアウトビューとコントローラはレイアウトフォルダに入り、管理コンテンツはadminフォルダに入り、すべての領域で使用されるサービスはservicesフォルダに入ります。ここでの考え方は、機能を動作させるコードを探しているとき、それは一箇所にあるということです。サービスは多くの機能を「提供」しているため、少し異なります。それが私にとって管理することがはるかに容易になるにつれて私のアプリが形を取り始めると私はこれが好きです。

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

アプリの例： https://github.com/angular-app /angular-app

250
Michael J. Calkins

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

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

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

そうすれば、あなたは自分のコードや他のコードを簡単に複製して再利用することができます。

ここでそれはgrunt buildの前です：（しかし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)
32
Urigo

私は好きです this 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
    └── ...
30
Chris

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

4
BoxerBucks

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

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

私はそれが単一のアプリケーションに適していると思います。私はまだ複数のプロジェクトが必要なところにはまだプロジェクトを持っていません。

3
Ronnie