web-dev-qa-db-fra.com

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

Je démarre actuellement un nouveau projet avec Angular 2.0 (version finale) et je souhaite définir des modèles/schémas de données globaux. Si je comprends bien, Angular = 2 n'a aucun moyen par défaut de gérer des classes de données pures comme ceci:

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

Donc ma première question concernant les meilleures pratiques est: Dois-je définir de telles classes lorsque je travaille avec Angular 2?

Pour la conception et le concept de toute mon application, je pense qu'ils sont nécessaires mais je ne sais pas si j'applique ici la mauvaise façon de penser.

Ces classes de données 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 l'exporter dans chaque module qui importe shared.module. Cela ne semble pas fonctionner car le modèle n'est pas une directive, un tube ou un module. Existe-t-il un moyen de l'exporter de toute façon?

La solution la plus simple serait d'importer directement le test.model.ts fichier et tous les autres modèles partagés dans chaque module qui en a besoin. Mais cela semble maladroit et peu pratique pour plusieurs modèles.

La troisième solution possible à laquelle j'ai pensé était de mettre tous les modèles de données partagés dans un dossier séparé, de regrouper leur exportation dans un seul fichier comme celui ci-dessous et d'importer ce fichier dans chaque module qui en a besoin.

angulartypescriptdirectory-structuredatamodelangular2-modules
15
A. Ziegler

Donc, un mois plus tard, je me sens en confiance pour répondre moi-même à cette question et partager les méthodes que j'ai utilisées pour résoudre certains des problèmes décrits ci-dessus. La plupart d'entre eux provenaient d'une mauvaise compréhension des importations et des exportations de TypeScript et Angular2 de ma part ou de décisions de conception.

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

Donc ma première question concernant les meilleures pratiques est: Dois-je définir de telles classes lorsque je travaille avec Angular 2?

Je n'ai pas travaillé avec AngularJS ou tout autre framework JavaScript avant d'adopter Angular2, mais j'étais habitué au modèle MVC classique de PHP frameworks comme Laravel. C'est donc de là que vient cette question. La réponse pour me is yes, you should . Les types sont le grand avantage de TypeScript et la définition de classes ou de types de modèles de données permet de maintenir l'application cohérente, fournit la saisie semi-automatique dans mon IDE et le compilateur TypeScript peuvent m'avertir lorsque je me trompe. De plus, ces classes renforcent la cohérence avec ma base de données relationnelle dans le backend. Néanmoins, ces classes de modèle sont facultatives et leur utilisation 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, ces classes ne sont que des variables ou des objets, comme presque tout en JavaScript. Donc, pour les importer, vous devez les rendre accessibles à l'échelle mondiale et utiliser simplement import {SomeDumbModel} from '../../../modelfolder' pour les importer quelque part dans votre application. Bien sûr, cela fonctionne à partir de n'importe quelle position dans l'application MAIS ces chemins relatifs peuvent devenir très longs et maladroits. La vraie question aurait donc dû être: Puis-je utiliser des chemins absolus pour les importations? . Et la réponse est oui , au moins avec angular-cli , webpack et TypeScript . 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 n'importe où.

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

Le reste de la question est simplement basé sur ma mauvaise compréhension des importations et des exportations dans TypeScript et Angular2. Tout ce qui concerne les modules et leur exportation n'a pas d'importance ici et est important pour des problèmes complètement différents. On devrait répondre à tout le reste maintenant.

25
A. Ziegler

Si vous ne voulez pas utiliser un Service, je voudrais simplement mettre vos variables globales dans un fichier et ensuite les exporter.

Exemple:

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

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

//... whatever else you need

Et pour utiliser les variables globales, importez-les simplement dans chaque fichier que vous souhaitez utiliser: import globalVars = require('./myGlobals');

Exemple de héros 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