28

新しいプロジェクトで Angular.js の使用を開始しています。基本的なチュートリアルから、ほとんどの場合、すべてのコントローラー関数を含む単一の controllers.js ファイルが表示され、それぞれがウィンドウ オブジェクトにバインドされています。

たとえば、既存の「myApp」名前空間を使用してコントローラーを追加することをお勧めします。

myApp.controllers = {};
myApp.controllers.userItem = function($scope) {}

すべてのコントローラーは、作成された「myApp.controllers」オブジェクトまたは「window.myApp.controllers」の一部になります。

コントローラーやその他のアイテム、カスタムサービス、ディレクティブなどを処理するためのより良い、またはより組織化された方法を提案する人はいますか?同じ構造を使用します。

これに加えて、私は各コ​​ントローラーを独自のファイルに入れることについて議論しています。これは最終的に本番用に結合されますが、アプリのサイズによっては、少しやり過ぎで、ファイル間でバウンスする作業が増えるだけになる可能性があります。 .

どんな提案でも大歓迎です。

ありがとう！

4

2 に答える 2

56

素晴らしい質問です。

チュートリアルとドキュメントがコードに対して「レイヤーごとのパッケージ」アプローチを取っているのは好きではありません。これはおそらく、概念を教える際の便宜のために行われていると思いますが、これは素晴らしいことですが、そのアプローチは現実世界での適用範囲が限られています。

パッケージごとの機能は、はるかに優れたアプローチです。

|- README
|- src/
   |- app/
      |- app.js
      |- feature1/
      |- feature2/
      |- ...
   |- vendor/
      |- angular/
      |- bootstrap/
      |- ...
   |- assets/
   |- less/
   |- index.html

内部src/appでは、作業しているサイトのセクション (メニューなど) とルート (製品リストや製品詳細など) に基づいてコンテンツをパッケージ化できます。それぞれは次のように宣言できます。

angular.module( 'products', [
  'productCatalog',
  ...
])

また、各モジュールは独自のルートを持つことができます:

.config( [ '$routeProvider', function( $routeProvider ) {
  $routeProvider.when( '/products', { ... } );
  $routeProvider.when( '/products/:id', { ... } );
});

そしてコントローラーなど：

.controller( 'ProductListCtrl', [ '$scope', function ( $scope ) { ... } ]);

したがって、すべてが一緒に同じディレクトリにパッケージ化されます。また、すべてのコンポーネントを個別のファイルに配置し、ファイルごとに 1 つのモジュールを配置することもできます (必要に応じて、私は通常そうします)。トップレベルのアプリでは、依存関係を宣言するだけです。

angular.module( 'app', [
  'products',
  ...
]);

また、汎用ディレクティブを単独でバンドルして、テストとドキュメントをまとめて保持することもできます。これらの各コンポーネントは、将来のプロジェクトでドラッグ アンド ドロップで再利用できます。

優れたリファレンス実装はangular-app です。見てみな！

更新:この回答以降、ngBoilerplateと呼ばれる AngularJS プロジェクトのキックスターター/テンプレートを開始して、これらの概念 (他の多くのベスト プラクティスの中でも) とそれらをサポートする洗練されたビルド システムをカプセル化しました。

于 2013-01-30T05:26:07.680 に答える
2

私は通常します

(angular
 .module('app.controllers', ['ng', ...])
 .controller('myContrA', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
 .controller('myContrB', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
);

app.controllersこのようにして、依存関係として追加し、すべてのコントローラーを使用可能にすることができます。

于 2013-01-30T05:10:08.957 に答える