web-dev-qa-db-ja.com

Angular 2は複数のモジュールのデータモデルを定義します

現在、Angular 2.0（リリースバージョン）で新しいプロジェクトを開始していますが、いくつかのグローバルデータモデル/スキーマを定義したいと思います。理解できるように、Angular = 2には、このような純粋なデータクラスを処理するデフォルトの方法はありません。

export class TestModel {
  id: number;
  name: string;
  randomAttribute: number;
  author: string;
}

したがって、ベストプラクティスに関する私の最初の質問は、Angular 2？

私のアプリケーション全体の設計とコンセプトのために、それらは必要だと思いますが、ここで間違った考え方を適用しているかどうかはわかりません。

このデータクラスは複数のモジュール（ ngModule ）で必要になることがあるので、2番目の質問はで、アプリのどこに配置しますか？現在、私は次の構造を持っています：

/app
   /shared
      shared.module.ts
      test.model.ts
   /module1
      module1.module.ts
      foo.component.ts
      [...]
   /module2
      module2.module.ts
      bar.component.ts
      [...]
   app.module.ts
   [...]

最初に考えたのは、instruction.model.tsにshared.moduleを含め、shared.moduleをインポートするすべてのモジュールにエクスポートすることでした。モデルはディレクティブ、パイプ、またはモジュールではないため、機能しないようです。 とにかくエクスポートする方法はありますか？

より簡単な解決策は、test.model.tsファイルと、それを必要とするすべてのモジュールのその他すべての共有モデルを直接インポートすることです。しかし、これは不格好なようで、複数のモデルには便利ではありません。

私が考えた3番目の可能な解決策は、すべての共有データモデルを別のフォルダーに入れ、それらのエクスポートを以下のような単一ファイルにバンドルし、このファイルを必要とするすべてのモジュールにインポートすることでした.

angulartypescriptdirectory-structuredatamodelangular2-modules
15
A. Ziegler

そのため、1か月後、私はこの質問に自分で答え、上記の問題のいくつかを解決するために使用した方法を共有できると確信しています。それらのほとんどは、私の側または設計上の決定だけで、TypeScriptとAngular2のインポートとエクスポートの誤解から生じました。

TL; DR：はい、モデルクラスが役立ちます。それらを配置する場所は、アプリと好みによって異なりますが、 インポートの絶対パス ヘルプです。質問からの他のすべては本当に重要ではありません。

したがって、ベストプラクティスに関する私の最初の質問は、Angular 2？

Angular2を採用する前はAngularJSやJavaScriptフレームワークを使用していませんでしたが、Laravelのような古典的なMVCパターンPHPフレームワークに慣れていました。 me isyes、you should。TypeScriptではTypeが大きな利点であり、データモデルのクラスまたはタイプを定義すると、アプリの一貫性を保つのに役立ちます。 IDEそして、TypeScriptコンパイラは、混乱したときに通知できます。さらに、このクラスは、バックエンドのリレーショナルデータベースとの整合性を強化します。これらのモデルクラスはオプションであり、使用するかどうかは設計上の決定ですまたは、個人的な意見と考えることもできます。

私の2番目の質問はアプリのどこに置きますか？

@ Sam5487が彼の答えで指摘したように、このクラスはJavaScriptのほぼすべてのように、単なる変数またはオブジェクトです。したがって、それらをインポートするには、それらをグローバルにアクセス可能にし、import {SomeDumbModel} from '../../../modelfolder'をアプリのどこかにインポートします。もちろん、これはアプリ内のどの位置からでも機能しますが、この相対パスは非常に長く不格好になる可能性があります。したがって、本当の質問は次のようになっているはずです：インポートに絶対パスを使用できますか？答えはyesで、少なくとも angular-cli 、webpack、および TypeScript を使用します。 SystemJSまたは他のセットアップのソリューションがわかりません。私は/models参照できるアプリのルートにあるフォルダー@models/どこにでもインポートするとき。

私が最初に考えたのは、instruction.model.tsをshared.moduleに含め、shared.moduleをインポートするすべてのモジュールにエクスポートすることでした。モデルはディレクティブ、パイプ、またはモジュールではないため、機能しないようです。 とにかくエクスポートする方法はありますか？

残りの質問は、TypeScriptとAngular2でのインポートとエクスポートの誤解に基づいています。モジュールとエクスポートに関するすべてはここでは重要ではなく、まったく異なる問題にとって重要です。他のすべては今までに答えられるべきです。

25
A. Ziegler

Serviceを使用したくない場合は、グローバル変数をファイルに入れてからエクスポートします。

例：

_//
// ===== File myGlobals.ts    
//
'use strict';

export var seperator='/';
export var add='+';
export var subtract='-';

//... whatever else you need
_

そして、グローバル変数を使用するには、使用したい各ファイルにそれらをインポートするだけです：import globalVars = require('./myGlobals');

A2のヒーローの例：

_// 
// ===== File heroes.component.ts    
//
import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {HeroService} from './hero.service';
import {HeroDetailComponent} from './hero-detail.component';
import {Hero} from './hero';
import globalVars = require('./myGlobals');

export class HeroesComponent implements OnInit {
    public heroes: Hero[];
    public selectedHero: Hero;
    // 
    //
    // Here we access the global var reference.
    //  
    public helloWorld: string="hello " + globalVars.seperator + " there";

         ...

        }
    }
_
3
Sam5487