Czy należy nauczyć się TypeScript dla Angular 2?Czy można używać języka JavaScript ES5 z Angular 2 zamiast TypeScript?
Czy można używać Angular 2 z prostym JavaScript?
Edycja: Widziałem, że języki używane jako ES6, ES7, Dart kompilowały do JavaScriptu do wykonania, ale nie widziałem żadnego odniesienia do bezpośredniego używania JavaScriptu ES5.
Tak, możesz.
Przeczytaj ten artykuł guide. Wciśnięcie zakładki ES5 w przykładach kodu pokaże ci zwykły skrypt JavaScript ES5, jak w przypadku TypeScript.
Urządzenie jest jednak, z oczywistych względów, niekompletne. Możesz nie znaleźć tam jeszcze metod ES5, a niektóre z nich mogą ulec zmianie przed wydaniem.
Aktualny przykład głównego składnika Angular 2.0 w ES5.
. Dzięki temu przykładowi jest za dużo kliknięć na pierwszej stronie. Dzięki temu lepiej zrozumiesz adnotacje. – jordiburgos
Wróciłem do tego pytania, aby odpowiedzieć na komentarz do mojej własnej odpowiedzi. Niestety ten przewodnik jest dość przestarzały. Prawdopodobnie było to prawdą w momencie odpowiedzi Oka, ale na przykład, jeśli spojrzysz na kątowy znacznik skryptu, to mówi on o alfa 26. Umieszcza on również adnotację widoku szablonu, gdzie może teraz przejść do komponentu. – Meligy
Link prowadzący jest martwy. – NtFreX
TypeScript będzie tylko nadzbiorem ES6. ES6 to nadzbiór ES5. Co oznacza, że ES5 jest w końcu poprawny TypeScript i ES6. Pomimo pewnych specyficznych cech, na razie wiele z tego, co otrzymujemy z tych języków, to cukier syntaktyczny.
Oto artykuł, który pokazuje how to write Angular 2 code in ES5.
Tak.
Oto 2 proste elementy, pisane na różne sposoby, że kątowa 2 obsługuje pisząc w 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>Napisałem szczegółowe wyjaśnienie kod tutaj:
Writing An Angular2 Component in Today’s JavaScript (ES5) – Beta 0 Edition
jako link mówi, dotyczy to Angul ar 2 Beta 0, który został wydany kilka godzin temu w momencie pisania tej odpowiedzi.
Użyłeś dyrektyw w swojej odpowiedzi, uważam, że zostały one usunięte, a użycie klas jest częścią es6. – keshav
"dyrektywy" nie zostały usunięte. Po prostu nie musisz ich używać do wbudowanych dyrektyw ('ngIf',' ngFor', etc). Również przy korzystaniu z klas, 'Class' w kodzie jest ** funkcją ** dostępną na obiekcie zwróconym przez' ng.core.Component (...) ', a nie słowo' class' z ES6. – Meligy
Należy pamiętać, że Angular 2 ma również koncepcję dyrektyw. Nie są to jednak te same dyrektywy co Angular 1. Jeśli spojrzysz na filtry strony wyszukiwania w dokumentach Angular 2, zobaczysz "Dyrektywa" to pierwszy filtr https://angular.io/docs/ts/latest/api/#!?apiFilter= - Same komponenty są szczególnym rodzajem (zdaniem dzieci klas) dyrektyw Angular 2. – Meligy
prosty sposób napisać zwykły javascript komponenty ES5:
(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);
});
})();
Oto prosty todo list demo użyciu JavaScript ES5.
Poniżej znajduje się kolejny przykład w Plain Javascript na podstawie Angular2 "Tour of Heroes". Jest to kopia DashboardComponent, które można znaleźć w poradniku Angular2 (można znaleźć pełną samouczek Angular2 In Plain JavaScript tutaj 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 }]); }
});
kątowa 5 spadło poparcie dla zwykłego ES5.
Zobacz następujące popełnić i komentować GitHub: https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d
https://stackoverflow.com/questions/47731044/angular-5-with-es5/47731407 # 47731407 – yurzui
Można użyć tylko JavaScript. spójrz na angular.io. ES6 == JavaScript, ale kątowy 2.0 można również napisać w języku ES5 – XGreen