Có thể sử dụng JavaScript ES5 với Angular 2 thay vì TypeScript không?

Question

Có cần thiết phải học TypeScript cho Angular 2 không?

Có thể sử dụng Góc 2 bằng JavaScript đơn giản không?

Chỉnh sửa: Tôi đã thấy rằng các ngôn ngữ được sử dụng dưới dạng ES6, ES7, Dart biên dịch sang JavaScript sẽ được thực thi, nhưng tôi chưa thấy bất kỳ tham chiếu nào để sử dụng JavaScript ES5 trực tiếp.

Answer 1

Có, bạn có thể.

Đọc phần này guide. Nhấn vào tab ES5 trên các ví dụ mã sẽ hiển thị cho bạn JavaScript ES5 thông thường, như được sử dụng cho TypeScript.

Tuy nhiên, API preview là lý do rõ ràng, chưa hoàn chỉnh. Vì vậy, bạn có thể không tìm thấy các phương pháp ES5 được liệt kê ở đó, và một số phương pháp có thể thay đổi trước khi phát hành.

Ví dụ hiện tại về thành phần chính Angular 2.0 trong 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 sẽ chỉ là một phần lớn của ES6. Và ES6 là một superset của ES5. Có nghĩa là, ES5 là TypeScript và ES6 hợp lệ. Mặc dù một số tính năng cụ thể, bây giờ rất nhiều những gì chúng tôi nhận được từ những ngôn ngữ là cú pháp đường.

Đây là bài viết hiển thị cho bạn how to write Angular 2 code in ES5.

Answer 3

Có.

Dưới đây là 2 thành phần đơn giản, được viết theo nhiều cách khác nhau mà góc 2 hỗ trợ khi viết bằng 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>

Tôi đã viết một lời giải thích chi tiết của mã ở đây:

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

Khi liên kết nói, điều này áp dụng cho Angul ar 2 Beta 0, được phát hành cách đây vài giờ tại thời điểm viết câu trả lời này.

Answer 4

Một cách đơn giản để viết đồng bằng thành phần ES5 javascript:

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

})(); 

Đây là một đơn giản todo list demo sử dụng Javascript ES5.

Answer 5

Dưới đây là một ví dụ khác trong Javascript đơn giản dựa trên Angular2 "Tour of Heroes". Đây là bản sao của DashboardComponent mà bạn có thể tìm thấy trong hướng dẫn Angular2 (bạn có thể tìm thấy những Angular2 hướng dẫn đầy đủ trong Plain Javascript đây 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 }]); } 
}); 

Answer 6

góc 5 giảm hỗ trợ cho đồng bằng ES5.

Xem sau cam kết và nhận xét về GitHub: https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d