Angular 2 typescript vers javascript ?

Question

Actuellement, je suis encore en train de me faire une idée de l'ensemble du concept Angular 2. J'ai utilisé AngularJS (1) dans le passé, et je l'ai apprécié.

Je suis actuellement en train de démarrer un nouveau projet et j'ai pensé pourquoi ne pas commencer à utiliser Angular 2. Je sais maintenant que tout le monde utilise Typescript au lieu de javascript. Cependant, je ne sais toujours pas comment rendre un projet exécutable sur un simple serveur d'hébergement web (PHP, HTML, MySQL, Javascript, etc.).

Je sais que je peux exécuter npm start sur mon serveur Linux, mais comment le mettre sur un serveur d'hébergement ? Ne puis-je pas simplement compiler le Typescript en javascript afin de pouvoir l'utiliser dans un navigateur sans avoir à exécuter npm ? J'ai lu quelque chose sur JSPM et quelques autres, mais je ne suis pas sûr que ce soit ce dont j'ai besoin et je ne sais pas non plus comment le faire fonctionner en utilisant JSPM ou quelque chose de similaire (par exemple en utilisant le "under 5 minutes quickstart" avec JSBPM).

Je sais qu'Angular 2 a une partie javascript, et cela fonctionne pour moi. Cependant, il n'y a pas d'exemples de codage, et tout ce que vous trouvez sur internet est du Typescript. Donc je ne peux pas procéder à l'exécution d'Angular 2 en javascript à cause du manque de tutoriels.

En bref, cela ne me dérange pas d'utiliser Typescript, mais je veux juste un résultat en pur javascript que je puisse importer en HTML et partir de là.

En outre, j'ai une question secondaire : est-ce que tous les node_modules doivent être présents lors de la mise en production ?

Des points bonus pour les tutoriels qui expliquent cela !

Gracias.

Answer 1

En fait, il existe une documentation sur le site angular.io à ce sujet :

• https://angular.io/docs/ts/latest/cookbook/ts-to-js.html

Il montre comment transformer du code TypeScript en code ES5 et il semble que ce soit ce que vous recherchez.

En voici un exemple :

• TypeScript

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'hero-view',
    template: 
      '<h1>Hero: {{getName()}}</h1>'
  })
  export class HeroComponent {
    title = 'Hero Detail';
    getName() {return 'Windstorm';}
  }

• ES5

  function HeroComponent() {
    this.title = "Hero Detail";
  }
  
  HeroComponent.annotations = [
    new ng.core.Component({
      selector: 'hero-view',
      template:
        '<h1>Hero: {{getName()}}</h1>'
    })
  ];
  HeroComponent.prototype.getName =
    function() {return 'Windstorm';};

  où cela peut être fait de cette façon ;-)

  function HeroComponent() {
    this.title = "Hero Detail";
  }
  
  var HeroComponent = new ng.core.Component({
    selector: 'hero-view',
    template:
      '<h1>Hero: {{getName()}}</h1>'
  }).Class({
    constructor: function() {
    },
  
    getName: function() {
      return 'Windstorm';
    }
  });

En ce qui concerne le packaging d'une application Angular2, cette question pourrait également vous intéresser :

• Comment déployer réellement une application Angular 2 + Typescript + systemjs ?

Answer 2

Plusieurs choses ici. TypeScript n'est pas JavaScript ; c'est un langage développé par Microsoft pour aider les développeurs web à faire un code meilleur et plus sécurisé, et il doit être traduit (compilé) en JavaScript pour être compréhensible par les navigateurs (je ne pense pas que TS soit encore compatible avec les navigateurs, mais peut-être dans le futur).

Pour cela, les développeurs d'Angular 2 ont choisi de fournir une manière typographique d'utiliser leur framework.

Dans Angular 2 documentation vous trouverez une description de la manière de passer de l'écriture standard à JavaScript.

Lorsque vous avez vos fichiers js, placez-les sur n'importe quel serveur de production, comme vous le feriez pour un site Web ordinaire.

À propos de npm start : il s'agit juste d'un outil de développement destiné à vous aider à configurer votre environnement de développement avec un serveur web léger (nodejs) et ne doit pas être utilisé en production.

En résumé, vous devez :

1. Écrivez vos HTML, CSS et TypeScript sur votre machine de développement (avec npm start si vous ne voulez pas utiliser un serveur web).

2. Utilisez un compilateur TypeScript pour générer votre JavaScript (ES5 ou ES6).

3. Mettez vos fichiers HTML, CSS et JavaScript compilés sur le serveur de production (pas besoin de nodejs ici).