AngularJSアプリケーションのファイル構造
単一の「controllers.js」ファイルにすべてのコントローラーがある大規模なAngularJSアプリケーションでは、私には少し維持できないようです。次のようなこれを行うより良い方法はありますか？
\js\controllers\myController.js
\js\controllers\yourController.js
\js\controllers\ourController.js
フィルター、サービス、ディレクティブなどにも適用されます...
コードを整理する方法はたくさんあります。次のリンクをご覧ください
あなたは彼らの標準に従うか、自分で作ることができます。
次のガイドラインに従うようにしてください。
- コントローラーは長すぎてはいけません。長すぎる場合は、複数の責任を処理しています
- システムでディレクティブとサービスを使用して、コード/ロジックを再利用してみてください
- ディレクティブは、Angualrjsで最も強力なものです。最大限に活用してください。
- テストを書く;さらに良いことには、AngularJSでTDDを練習することができます
モジュールごとに管理できます!!
たとえば、ユーザービューを取得し、1つのディレクトリを作成します。ここで、その名前はuserです!!
user // directory , now put all controller ,service and directive file into it !!
-- userController.js // controller file
-- userService.js // service file
-- userDirective.js // directive file
-- views // make directory, and put all html file regarding that module into this
--users.html // html file
これがあなたを助けることを願っています!!
このコミュニティ主導のガイド をご覧ください。
このガイドでは、大規模なAngularJSアプリケーションのディレクトリ構造を整理するためのベストプラクティスについて説明します。
また、AngularJSモジュール、コントローラー、ディレクティブ、フィルター、およびサービスの命名と構造化に関する推奨事項も作成します。
Lineman.js のようなツールを AngularJSアプリケーションテンプレート と一緒にチェックアウトすることも価値があります。
エンタープライズAngularJSプロジェクトの場合、 ng-boilerplate に基づいた kickstarter をご覧ください。
これら2つのスタータープロジェクトが大規模なアプリケーションのファイルをどのように整理するかをご覧ください。
Shivaliの例をバックアップするGoogle自身のチームからの素晴らしいドキュメントがあります： https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
このようなもの：
sampleapp/
app.css
app.js top-level configuration, route def’ns for the app
app-controller.js
app-controller_test.js
components/
adminlogin/
adminlogin.css styles only used by this component
adminlogin.js optional file for module definition
adminlogin-directive.js
adminlogin-directive_test.js
private-export-filter/
private-export-filter.js
private-export-filter_test.js
userlogin/
somefilter.js
somefilter_test.js
userlogin.js
userlogin.css
userlogin.html
userlogin-directive.js
userlogin-directive_test.js
userlogin-service.js
userlogin-service_test.js
index.html
subsection1/
subsection1.js
subsection1-controller.js
subsection1-controller_test.js
subsection1_test.js
subsection1-1/
subsection1-1.css
subsection1-1.html
subsection1-1.js
subsection1-1-controller.js
subsection1-1-controller_test.js
subsection1-2/
subsection2/
subsection2.css
subsection2.html
subsection2.js
subsection2-controller.js
subsection2-controller_test.js
subsection3/
subsection3-1/
etc...
これを確認して、CoffeeScript、SCSSを使用してangularアプリをビルドします。