Ist es möglich, ES5-JavaScript mit Angular 2 anstelle von TypeScript zu verwenden?

Question

Ist es erforderlich, TypeScript für Angular 2 zu lernen?

Kann Canular 2 mit klarem JavaScript verwendet werden?

Edit: Ich habe gesehen, dass die Sprachen wie ES6, ES7, Dart kompilieren, um JavaScript ausgeführt werden, aber ich habe keinen Hinweis auf ES5 JavaScript direkt zu verwenden.

Answer 1

Ja, Sie können.

Lesen Sie diese guide. Wenn Sie in den Codebeispielen auf die Registerkarte ES5 klicken, wird Ihnen normales ES5-JavaScript angezeigt, ähnlich wie bei TypeScript.

Die API preview ist aus offensichtlichen Gründen unvollständig. Daher finden Sie die dort aufgelisteten ES5-Methoden möglicherweise noch nicht, und einige davon können sich vor der Veröffentlichung ändern.

Aktuelles Beispiel für Angular 2.0 Hauptkomponente in 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); 
}); 

Answer 2

TypeScript wird nur eine Obermenge von ES6 sein. Und ES6 ist ein Superset von ES5. Das heißt, ES5 ist immerhin TypeScript und ES6. Trotz einiger spezifischer Eigenschaften ist syntaktischer Zucker für viele dieser Sprachen ein großer Vorteil.

Hier ist ein Artikel, der Ihnen how to write Angular 2 code in ES5 zeigt.

Answer 3

Ja.

Hier sind zwei einfache Komponenten auf unterschiedliche Weise geschrieben, die Angular 2 unterstützt, wenn in JavaScript (EcmaScript 5) schreiben:

(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>

Ich schrieb eine detaillierte Erklärung des Codes hier:

Writing An Angular2 Component in Today’s JavaScript (ES5) – Beta 0 Edition

Da der Link sagt, dies zu Angul gilt Ar 2 Beta 0, die vor ein paar Stunden zum Zeitpunkt der Erstellung dieser Antwort veröffentlicht wurde.

Answer 4

Eine einfache Möglichkeit Ebene Javascript ES5 Komponenten zu schreiben:

(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); 
    }); 

})(); 

Hier ist ein einfaches todo list demo mit Javascript ES5.

Answer 5

Unten ist ein weiteres Beispiel in Plain Javascript basierend auf der Angular2 "Tour of Heroes". Es ist die Kopie des DashboardComponent, die Sie im Angular2 Tutorial finden (Sie die volle Angular2 Tutorial in Plain Javascript http://programming.sereale.fr finden Sie hier):

//= 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 }]); } 
}); 

Answer 6

Angular 5-Unterstützung für Normal ES5 gesunken.

Siehe folgende begehen und kommentieren GitHub: https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d