Angular 2 définit des modèles de données pour plusieurs modules

Je suis en train de commencer un nouveau projet avec Angular 2.0 (Version) et je tiens à définir quelques données globales des modèles ou des schémas. Comme je le comprends, Angulaire 2 n'a pas de défaut de manipulation pure classes de données comme ceci:

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

Donc, ma première question concerne les meilleures pratiques de l'est: dois-je définir ces classes lorsque l'on travaille avec Angulaire 2?

Pour la conception et le concept de la totalité de ma candidature, je pense qu'ils sont nécessaires, mais je ne suis pas sûr si je suis en appliquant la mauvaise manière de penser ici.

Ces données, les classes sont parfois nécessaires dans plusieurs modules (ngModule) donc ma deuxième question est Où dois-je les placer dans mon application? Actuellement, j'ai la structure suivante:

/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
   [...]

Ma première pensée a été d'inclure le instruction.model.ts dans le shared.module et de l'exporter dans chaque module, les importations shared.module. Cela ne semble pas fonctionner, parce que le modèle n'est pas une directive, d'une pipe ou d'un module. Est-il un moyen d'exporter il de toute façon?

La solution la plus simple serait de simplement importer directement les test.model.ts fichier et tous les autres modèle partagé dans chaque module a besoin d'elle. Mais ce qui semble maladroit et pas très pratique pour de multiples modèles.

La troisième solution possible j'ai pensé a mettre tous partagé des modèles de données dans un dossier distinct, bundle leur exportation dans un fichier unique comme celui-ci, et d'importer ce fichier dans chaque module a besoin d'elle.

source d'informationauteur A. Ziegler

24

Donc, un mois plus tard, je me sens en confiance pour répondre à cette question moi-même et de partager les méthodes que j'ai utilisé pour résoudre certains des problèmes décrits ci-dessus. La plupart d'entre eux provient d'un malentendu des importations et des exportations en caractères d'imprimerie et Angular2 de ma part ou où les décisions de conception.

TL;DR: Oui, modèle de classes peut être utile. Où les placer dépend de votre application et de vos préférences, mais des chemins absolus pour les importations de l'aide. Tout le reste de la question n'a pas vraiment d'importance.

Donc, ma première question concerne les meilleures pratiques de l'est: dois-je définir ces classes lorsque l'on travaille avec Angulaire 2?

Je n'ai pas de travail avec AngularJS ou de tout framework JavaScript avant j'ai adopté Angular2 mais a été utilisé pour le classique modèle MVC des frameworks PHP comme Laravel. C'est donc là que cette question est.
La réponse pour moi est oui, vous devriez. Les Types sont le gros avantage en caractères d'imprimerie et la définition de modèle de données des catégories ou types permet de garder l'application cohérente, fournit de l'auto-complétion dans mon IDE et le tapuscrit compilateur peut m'avertir lorsque je le rate. En outre, la présente classes d'appliquer la cohérence avec ma base de données relationnelle dans le backend. Encore ces classes de modèles sont facultatives et que les utiliser est une décision de conception ou même pourrait être considéré comme une opinion personnelle.

ma deuxième question est Où dois-je les placer dans mon application?

Comme @Sam5487 l'a souligné dans sa réponse à cette classes sont juste des variables ou des objets, comme presque tout en JavaScript. Afin de les importer vous avez besoin afin de les rendre accessibles à l'échelle mondiale et il suffit d'utiliser import {SomeDumbModel} from '../../../modelfolder' de les importer quelque part dans votre application. Bien sûr, cela fonctionne à partir de n'importe quelle position dans l'application, MAIS cette relative chemins peut être très long et maladroit. La vraie question devrait être: puis-je utiliser des chemins absolus pour les importations?. Et la réponse est ouiau moins avec le angulaires-cliwebpack et tapuscrit. Je ne connais pas la solution pour SystemJS ou d'autres configurations. Je suis allé avec un /models dossier à la racine de mon application qui peut être référencé mon @models/ lors de l'importation de n'importe où.

Ma première pensée a été d'inclure l'instruction.de modèle.ts dans les parties communes.module et de l'exporter dans chaque module, les importations partagé.le module. Cela ne semble pas fonctionner, parce que le modèle n'est pas une directive, d'une pipe ou d'un module. Est-il un moyen d'exporter il de toute façon?

Le Reste de la question est juste, fondée sur mon incompréhension des importations et des exportations en caractères d'imprimerie et Angular2. Tous les trucs sur modules et de l'exportation, il n'a pas d'importance ici, et il est important pour complètement différents problèmes. Tout le reste doit être répondu par maintenant.

Si vous ne souhaitez pas utiliser un Serviceje voudrais juste poser vos variables globales dans un fichier et de les exporter.

Exemple:

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

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

//... whatever else you need

Et à utiliser les variables globales, il suffit d'importer dans chaque fichier que vous souhaitez utiliser: import globalVars = require('./myGlobals');

A2 Héros exemple:

//
//===== 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";

         ...

        }
    }

Vous devez vous connecter pour publier un commentaire.