Menu
At this moment Angular 2 is in its 13th beta. When I look at https://code.angularjs.org/2.0.0-beta.13/ I can see that there are 2 different versions of Angular2:
What's the difference between the two? And apperently the angular2.js doesn't have an angular2.umd.js version, why is this?
575
In fact, angular2-all.umd.js must be used if you want to implement Angular2 applications with ES5.
angular2.js is the core module to implement Angular2 applications with ES6 or TypeScript. This file must be used along with a module manager like SystemJS.
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
As mentioned above for ES5 one should use UMD modules: angular2-all.umd.js and Rx.umd.js. For Typescript or ES6, use angular2.js and Rx.js (they also require system.js).
As an educational exercise one can also use ES6 style modules with ES5: (https://jsfiddle.net/8g5809rg/)
<html>
<head>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2.js"></script>
<script>
System.import("angular2/core").then(function(core) {
ParentComponent.annotations = [
new core.Component({
selector: 'body',
template: '<div (click)="go()">Parent</div><child [prop1]="x"></child>',
directives: [ChildComponent]
})
];
function ParentComponent() {
this.x = "hello1"
}
ParentComponent.prototype.go = function() {
this.x += "1"
};
///
ChildComponent.annotations = [
new core.Component({
selector: 'child',
inputs: ["prop1"],
template: '<div>Child {{prop1}}</div>',
changeDetection: core.ChangeDetectionStrategy.OnPush
})
];
function ChildComponent() {
}
////////////////
System.import("angular2/platform/browser").then(function(browser) {
document.addEventListener('DOMContentLoaded', function() {
browser.bootstrap(ParentComponent);
});
});
});
</script>
</head>
<body>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
