46

いくつかの AngularJS プロジェクト テンプレートを見てきました。公式 Web サイトのシード プロジェクト、 Yeomanが生成したもの、およびAngularFunです。

スケーラブルな AngularJS プロジェクトに提案する関連パターンや、他に検討すべき (非) 独自のテンプレートはありますか?

スケーラブルとはつまり

  • コントローラー、ディレクティブ、フィルターなどを独自のファイルに分割できる。
  • ブラウザにすべてを読み込ませるのではなく、必要に応じてこれらのファイルを読み込むことができます。
  • 共通のクロス プロジェクト コンポーネント (共通のディレクティブ、フィルター、またはサービスなど) を持つことができます。
4

6 に答える 6

30

Pawel Kozlowski と私がまとめているデモ アプリケーションをご覧ください: https://github.com/angular-app/angular-app。

オンデマンドでファイルをロードするためのサポートは提供していませんが、モジュールを個別のファイルに吐き出し、ファーストクラスのコンポーネントとしてテストをセットアップしていることがわかります。js ファイルを連結 (およびリリース時に縮小) し、単体テストとエンド ツー エンド テストを実行できるビルド プロセス (Grunt を使用) があります。

モジュールを、ディレクティブ、フィルター、サービスなどに単純に分割するのではなく、機能アプリケーション領域と共通の横断ライブラリ コードの 2 つのグループに分割することを選択しました。機能領域の側には、いくつかのサービス、ディレクティブ、コントローラー、およびテンプレートがある場合があります。

これにより、関連するすべてのアイテムが 1 か所にあるため、機能領域に対する開発が容易になります。

このプロジェクトは、単純な nodeJS サーバーに依存してファイルを配信し (HTML5 モードのディープ リンクをサポート)、認証および承認サービスも提供します。

于 2012-11-23T08:32:56.490 に答える
8

少なくともAngularに変更を加えることなく、すべてのポイントを簡単に達成できると思います。

  • コントローラー、ディレクティブ、フィルターなどを独自のファイルに分割できる。

これはもちろん基本的な Angular で実行できます。コントローラー/サービスに必要な数のスクリプト タグを含めることができるからです。もちろん、まったくスケーラブルではないため、RequireJS などの AMD モジュールを使用するのが最適なオプションです。これは、この種の構成を持つシードの 1 つです: https://github.com/elsom25/angular-requirejs-html5boilerplate-seed

  • ブラウザにすべてを読み込ませるのではなく、必要に応じてこれらのファイルを読み込むことができます。

コメントでpkozlowskiが示唆したように、問題の説明を含むエントリが既にあります。私もこれを解決するために取り組んでおり、実際にいくつかの結果が得られたことがわかります。RequireJSとルート構成の解決パラメーターを使用して、オンデマンドでコントローラー、テンプレート、およびディレクティブをロードする実際の例があります。

  • 共通のクロス プロジェクト コンポーネント (共通のディレクティブ、フィルター、またはサービスなど) を持つことができる

前のポイントを解決したら、RequireJs モジュールを使用して簡単に達成できます。

agularjs-lazy-seed プロジェクトを開始するのが良い考えかどうか疑問に思っていましたか? それに対する需要はありますか？アプリケーションに含めたいビューを含む views.json ファイル (理想的には json で応答するサービス) があるとします。

{
    "views" : {
        ....
        "account" : {             
             "path" : "/account" // route path
             "name" : "Account", // view name
             "partial" : "views/account/account.html", // partial file
             "controller" : "account/main" // RequireJS module
             "directives" : [ "directives/version", "directives/menu" ] // directives used in the view
        }
        ....
    }
}

このようにして、次のことができます。

  • ビューを別々に開発し、この json ブートストラップに基づいてアプリケーションを構築します
  • いくつかの共通のディレクティブとコンポーネントがあります
  • ログイン後のブートストラップ時に、ユーザーが表示できるビューをフィルタリングできます
  • ngView 内のすべてがオンデマンドでロードされます

もちろん、この追加作業をすべて実行する意味があるように、アプリケーションは非常に大きくする必要があります;)

于 2012-11-23T19:34:12.463 に答える
8

ng-boilerplate を試す必要があります。大規模な AngularJS プロジェクト向けの最も有望なキックスタート テンプレート: http://joshdmiller.github.io/ng-boilerplate/#/home

于 2013-06-26T06:31:26.213 に答える
4

他の人がこれまでに言ったことに同意します。物事を別々のモジュールに分割し、モジュールを通常の AngularJS のものと相互に依存させるのは非常に簡単です。次に、JS コードを任意のファイルとディレクトリ ツリーに分割できます。

Just thought I'd mention what we're doing in the open source hawtio project which is based on AngularJS. We've taken modularity to a bit of an extreme :) hawtio uses plugins which can be discovered at runtime in the running server (e.g. deploy and undeploy UI functions at runtime). So based on some REST query or JMX detection we can dynamically and or remove plugins.

e.g. here are all our current default plugins

In terms of layout, each plugin has its own directories for code (js), html partials (html) and anything else (e.g. css / img directories) which makes it easy to keep things nice and modular. e.g. here's the camel plugin which has its own html, js and img folders.

次に、特定のプラグインが独自の AngularJS モジュール、ディレクティブ、フィルターを定義し、他のモジュールに依存することができます。

ただし、これまでのところ、ソースファイルの有用な命名規則はそれほど多くありません:)。コントローラーごとにファイルを書き込むのが最も簡単に思えます。しかし、fooPlugin.ts ファイルと helpers.ts ファイル (一般的なモジュール固有のヘルパー関数用) 以外に、意味のある命名規則はまだ見つかっていません。

于 2013-02-13T12:19:58.820 に答える
1

このプロジェクトは有望に思えますhttp://vesparny.github.io/ng-kickstart

これにより、コードベースを機能ごとに分割し、コードを再利用可能に保つことができます。また、そのためのカスタム Grunt タスクのおかげで、ライブリロードも可能になります。

このプロジェクトは単体テスト指向でもあり、最適化された本番用のリリースを作成できるカスタム「dist タスク」が付属しています。

于 2013-12-09T11:54:58.520 に答える