1

angular 1.5 でリリースされた新しい .component を採用しようとしています。モジュールがどこに収まるかを理解するのに苦労していますが。

コンポーネントをAngularモジュールに分割する前は、コンポーネントがここにあるため、これにはどのような関係がありますか?

角度モジュールを 1 つ作成し、その下にすべてのコンポーネントを追加するか、角度モジュールとコンポーネントを引き続き使用しますか?

ドキュメントはこれに入っていないようです。まだモジュールを使用している場合、コンポーネントの使用は何ですか? または、コンポーネントを使用している場合、複数のモジュールの使用は何ですか?

4

2 に答える 2

1

私はここで同じ船に乗っています...これが私が見つけたものです。これが私たち全員に役立つことを願っています
Angular Docs から:

1.モジュール: モジュールは、アプリのさまざまな部分 (コントローラー、サービス、フィルター、ディレクティブなど) のコンテナーと考え​​ることができます。

モジュールの推奨セットアップ

「... 次のように、アプリケーションを複数のモジュールに分割することをお勧めします。

  • 各機能のモジュール
  • 再利用可能な各コンポーネントのモジュール(特にディレクティブとフィルター, 以下のコンポーネント定義を参照してください;特別な種類のディレクティブ)
  • 上記のモジュールに依存し、初期化コードを含むアプリケーションレベルのモジュール。

2.コンポーネント: Angular では、コンポーネントは、コンポーネント ベースのアプリケーション構造に適した、より単純な構成を使用する 特別な種類のディレクティブです。

コンポーネントの利点:

  • 単純なディレクティブよりも簡単な構成
  • 健全なデフォルトとベストプラクティスを促進する
  • コンポーネントベースのアーキテクチャ向けに最適化
  • コンポーネント ディレクティブを作成すると、Angular 2 へのアップグレードが容易になります

コンポーネントを使用しない場合:

  • 利用できないため、コンパイルおよびプリリンク関数でアクションを実行する必要があるディレクティブ用
  • 優先度、端末、複数要素などの高度なディレクティブ定義オプションが必要な場合
  • 要素ではなく、属性または CSS クラスによってトリガーされるディレクティブが必要な場合

したがって、これらすべてを理解しようとすると、必要に応じてコンポーネント/サブコンポーネントを追加する場合は、整理するためのモジュールまたは最上位の「コンテナー」が必要なようです。 

angular.module('app',[])
 .component('component')
 .component('common')

すべてはアプリのコンポーネント化に帰着します。

サブコンポーネントを使用してアプリケーションを編成する

この画像は、angular 1 の angular 2 パターンからのものです(強くお勧めします)

一番下の行: Angular 1 のドキュメントは、この件についてはそれほど明確ではありませんが、モジュール/コンポーネントを整理する方法として見ることができます

  1. モジュールは常にコンテナです。
  2. 構造に応じてコンポーネントとサブコンポーネントを追加します

ファイル構造に関するToodMottosの推奨事項

「...理想的には、ルート、コンポーネント、および共通の 3 つの高レベル モジュールが必要です...」
ここで、モジュールがどのようにコンポーネントおよびサブコンポーネントになるかを確認できます 。

├── app/
│   ├── components/
│   │  ├── calendar/
│   │  │  ├── calendar.module.js
│   │  │  ├── calendar.component.js
│   │  │  ├── calendar.service.js
│   │  │  ├── calendar.spec.js
│   │  │  ├── calendar.html
│   │  │  ├── calendar.scss
│   │  │  └── calendar-grid/
│   │  │     ├── calendar-grid.module.js
│   │  │     ├── calendar-grid.component.js
│   │  │     ├── calendar-grid.directive.js
│   │  │     ├── calendar-grid.filter.js
│   │  │     ├── calendar-grid.spec.js
│   │  │     ├── calendar-grid.html
│   │  │     └── calendar-grid.scss
│   │  ├── events/
│   │  │  ├── events.module.js
│   │  │  ├── events.component.js
│   │  │  ├── events.directive.js
│   │  │  ├── events.service.js
│   │  │  ├── events.spec.js
│   │  │  ├── events.html
│   │  │  ├── events.scss
│   │  │  └── events-signup/
│   │  │     ├── events-signup.module.js
│   │  │     ├── events-signup.component.js
│   │  │     ├── events-signup.service.js
│   │  │     ├── events-signup.spec.js
│   │  │     ├── events-signup.html
│   │  │     └── events-signup.scss
│   │  └── components.module.js
│   ├── common/
│   │  ├── nav/
│   │  │     ├── nav.module.js
│   │  │     ├── nav.component.js
│   │  │     ├── nav.service.js
│   │  │     ├── nav.spec.js
│   │  │     ├── nav.html
│   │  │     └── nav.scss
│   │  ├── footer/
│   │  │     ├── footer.module.js
│   │  │     ├── footer.component.js
│   │  │     ├── footer.service.js
│   │  │     ├── footer.spec.js
│   │  │     ├── footer.html
│   │  │     └── footer.scss
│   │  └── common.module.js
│   ├── app.module.js
│   ├── app.component.js
│   └── app.scss
└── index.html

ToodMottos スタイル ガイド: Modular Achitecture (必読) angular モジュール
の詳細はこちら

于 2016-11-14T23:10:23.210 に答える
0

Angular 1.5 のコンポーネントは、コンポーネント ベースのアーキテクチャに適した特別な種類のディレクティブです。それらは、ステロイドに関する指令に似ています。

コンポーネントをAngularモジュールに分割する前は、コンポーネントがここにあるため、これにはどのような関係がありますか?

コンポーネントができたので、関連するコンポーネントを異なるモジュールに分離できます。

角度モジュールを 1 つ作成し、その下にすべてのコンポーネントを追加するか、角度モジュールとコンポーネントを引き続き使用しますか?

前に使用したのと同じパターンを使用して、コントローラーを分離できます。

angular 1.5 のコンポーネントは、独自のビューとバインディングを持つ実際のコンポーネントを作成するのに役立ちます。これらは、angular 1.5 の開発者がパターンを理解し、後で Angular 2.0 に簡単に移行できるようにするために作成されました。

于 2016-06-04T11:22:16.207 に答える