web-dev-qa-db-fra.com

Est-il possible d'utiliser JavaScript ES5 avec Angular 2 au lieu de TypeScript?

Est-il nécessaire d'apprendre TypeScript pour Angular 2?

Est-ce que Angular 2 peut être utilisé avec JavaScript?

Edit: J'ai vu que les langages utilisés comme ES6, ES7, Dart compilent en JavaScript pour être exécutés, mais je n'ai vu aucune référence à l'utilisation directe de JavaScript ES5.

javascriptecmascript-5angular
12
jordiburgos

Oui, vous pouvez.

Allez lire ce guide . En appuyant sur l'onglet ES5 dans les exemples de code, vous verrez apparaître le code JavaScript ES5 standard, associé à TypeScript.

L'aperçu API est, pour des raisons évidentes, incomplet. Il est donc possible que les méthodes ES5 ne figurent pas encore dans cette liste et que certaines d’entre elles puissent changer avant la publication.

Exemple actuel de Angular 2.0 composant principal dans ES5.

function AppComponent() {}

AppComponent.annotations = [
  new angular.ComponentAnnotation({
    selector: 'my-app'
  }),
  new angular.ViewAnnotation({
    template: '<h1>My first Angular 2 App</h1>'
  })
];

document.addEventListener('DOMContentLoaded', function() {
  angular.bootstrap(AppComponent);
});
8
Oka

Oui.

Voici 2 composants simples, écrits de différentes manières que Angular 2 prend en charge lors de l'écriture en JavaScript (EcmaScript 5):

(function() {

  var HelloWorldComponent = function() {};

  HelloWorldComponent.annotations = [
    new ng.core.Component({
      selector: 'hello-world',
      template: '<h1>Hello Angular2!</h1>'
    })
  ];

  var HelloFlentApi = ng.core.Component({
    selector: 'hello-fluent',
    template: '<h1>Hello {{name}}!</h1>' + '<input [(ngModel)]="name">',
  }).Class({
    constructor: function() {
      this.name = "Fluent API";
    }
  });

  var AppComponent = ng.core.Component({
    selector: 'company-app',
    template: '<hello-world></hello-world>' +
      '<hello-fluent></hello-fluent>',
    directives: [HelloWorldComponent, HelloFlentApi]
  }).Class({
    constructor: function() {}
  });

  document.addEventListener("DOMContentLoaded", function() {
    ng.platform.browser.bootstrap(AppComponent);
  });

}());
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.umd.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-all.umd.dev.js"></script>

<company-app>
  Loading ...
</company-app>

J'ai écrit une explication détaillée du code ici:

Rédaction d’un composant Angular2 dans le code JavaScript d’aujourd’hui (ES5) - Édition Bêta 0

Comme le lien l'indique, cela s'applique à Angular 2 Beta 0, publié il y a quelques heures à la date de rédaction de cette réponse.

7
Meligy

Un moyen simple d'écrire des composants javascript es5 simples:

(function() {

    var MyComponent = ng.
        Component({
            selector: 'my-component'
        })
        .View({
            templateUrl: 'my-component.html'
        })
        .Class({
            constructor: function () {
                this.someArray = [];
            },
            someCustomFunction: function(item) {
                this.someArray.Push(item);
                ...
            }
        })

    document.addEventListener('DOMContentLoaded', function() {
        ng.bootstrap(MyComponent);
    });

})();

Voici une simple liste de démonstration utilisant Javascript es5.

3
Pat M

Vous trouverez ci-dessous un autre exemple en clair Javascript basé sur le "Tour of Heroes" angulaire2. C’est la copie du composant tableau de bord que vous pouvez trouver dans le tutoriel Angular2 (vous pouvez trouver le tutoriel complet Angular2 en clair Javascript ici/ http://programming.sereale.fr ):

//= require services/heroes-service

var DashboardComponent = ng.core.Component({
    template: "<h3>Top Heroes</h3> \
                <div class='grid grid-pad'> \
                  <div *ngFor='#hero of heroes' (click)='gotoDetail(hero)' class='col-1-4' > \
                    <div class='module hero'> \
                      <h4>{{hero.name}}</h4> \
                    </div> \
                  </div> \
                </div>"
}).Class({
    constructor: [
      HeroService, ng.router.Router, ng.http.Http, function(heroService, router, http) {
        this._heroService = heroService;
        this._router = router;
        this._http = http;
      }
    ],
    ngOnInit: function() {
      //we get the list from mock-heroes.js
      //this._heroService.getHeroes.then(heroes => this.heroes = heroes.slice(1,5)) 

      //we get the list from the server
      this._heroService.getHeroes(this._http).subscribe(heroes => this.heroes = heroes.slice(1,5));
    },
    gotoDetail: function(hero) { this._router.navigate(['HeroDetail', { id: hero.id }]); }
});
2
Johnf39

Angular 5 a abandonné le support pour ES5 en clair.

Voir le commit et le commentaire suivants sur GitHub: https://github.com/angular/angular/commit/cac130eff9b9c9609f2308ae40c42c9cd1850c4d

2
jbandi

@jordiburgos Est-il nécessaire d'apprendre TypeScript pour Angular 2? C’est le langage recommandé par l’équipe angulaire, et je peux dire par expérience personnelle, que l’utilisation de es5 dans un projet de moyenne à grande taille peut être très difficile à maintenir dans le temps en raison de son manque de fonctionnalités clés comme la dactylographie, les classes et l'héritage.

Angular 2 peut-il être utilisé avec JavaScript? Oui, et vous avez quelques bons exemples ci-dessus. Examinez-le attentivement, allez et examinez des comparaisons comme celle-ci: https://johnpapa.net/es5-es2015-TypeScript/

1
Rotemya

TypeScript ne sera qu'un sur-ensemble d'ES6. Et ES6 est un sur-ensemble de ES5. Ce qui signifie que ES5 est valide TypeScript et ES6 après tout. En dépit de certaines caractéristiques spécifiques, beaucoup de ce que nous obtenons de ces langues est du sucre syntaxique.

Voici un article qui vous montre comment écrire Angular 2 code dans ES5 .

1
Pascal Precht