È necessario imparare TypeScript per Angular 2?È possibile utilizzare ES5 JavaScript con Angular 2 invece di TypeScript?
È possibile utilizzare Angular 2 con JavaScript semplice?
Modifica: ho visto che le lingue utilizzate come ES6, ES7, Dart vengono compilate in JavaScript per essere eseguite, ma non ho visto alcun riferimento per utilizzare direttamente JavaScript ES5.
Sì, è possibile.
Vai a leggere questo guide. Se si preme la scheda ES5 sugli esempi di codice, verrà visualizzato il normale JavaScript ES5, come indicato in TypeScript.
Il API preview è, per ovvie ragioni, incompleto però. Quindi potresti non trovare ancora i metodi ES5 elencati qui, e alcuni potrebbero cambiare prima del rilascio.
Esempio corrente di componente principale Angular 2.0 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);
});
Grazie, l'esempio è troppi clic dalla prima pagina. Questo rende le annotazioni molto meglio. – jordiburgos
Sono tornato a questa domanda per rispondere ad un commento sulla mia risposta. Purtroppo questa guida è piuttosto datata. Probabilmente era corretto al momento della risposta di Oka, ma, per esempio, se si guarda il tag dello script angolare, si dice alfa 26. Mette anche il modello nell'annotazione della vista, dove può andare al componente ora. – Meligy
Il link guida è morto. – NtFreX
TypeScript sarà solo un superset di ES6. E ES6 è un superset di ES5. Il che significa che ES5 è valido TypeScript ed ES6 dopo tutto. Nonostante alcune caratteristiche specifiche, per ora molto di ciò che otteniamo da quelle lingue è lo zucchero sintattico.
Ecco un articolo che mostra how to write Angular 2 code in ES5.
Sì.
Qui ci sono 2 componenti semplici, scritti in modi diversi che angolare 2 supporti quando si scrive in 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>ho scritto una spiegazione dettagliata del codice qui:
Writing An Angular2 Component in Today’s JavaScript (ES5) – Beta 0 Edition
Come il link dice, questo vale per Angul ar 2 Beta 0, che è stato rilasciato poche ore fa al momento di scrivere questa risposta.
Hai usato le direttive nella tua risposta, credo che queste siano rimosse e anche l'uso delle classi è una parte di es6. – keshav
'direttive 'non viene rimosso. È solo che non hai più bisogno di usarli per le direttive built-in ('ngIf',' ngFor', ecc.). Anche sull'uso di classi, la 'Class' nel codice è una ** funzione ** disponibile sull'oggetto restituito da' ng.core.Component (...) ', non la parola chiave' class' da ES6. – Meligy
Si noti che Angular 2 ha anche il concetto di direttive. Tuttavia non sono le stesse direttive di Angular 1. Se guardi i filtri della pagina di ricerca in Angular 2 documenti, vedrai "Direttiva" è il primo filtro https://angular.io/docs/ts/latest/api/#!?apiFilter= - Componenti stessi sono un tipo speciale di (si pensi classi di bambini) direttive Angular 2. – Meligy
Un modo semplice di scrivere pianura componenti 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);
});
})();
Ecco un semplice todo list demo utilizzando Javascript ES5.
Di seguito è riportato un altro esempio di Plain Javascript basato sul "Tour of Heroes" di Angular2. E 'la copia del DashboardComponent che si può trovare nel tutorial Angular2 (potete trovare il tutorial completo Angular2 in Plain Javascript qui 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 }]); }
});
angolare 5 cessato il supporto per plain ES5.
vedere il seguente impegnarsi e commentare su GitHub: https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d
https://stackoverflow.com/questions/47731044/angular-5-with-es5/47731407 # 47731407 – yurzui
È possibile utilizzare solo JavaScript. guarda angular.io. ES6 == JavaScript ma angolare 2.0 può anche essere scritto in ES5 – XGreen