At this moment Angular 2 is in its 13th beta. When I look at .0.0-beta.13/ I can see that there are 2 different versions of Angular2:
- angular2-all.umd.js
- angular2.js
What's the difference between the two? And apperently the angular2.js doesn't have an angular2.umd.js version, why is this?
At this moment Angular 2 is in its 13th beta. When I look at https://code.angularjs/2.0.0-beta.13/ I can see that there are 2 different versions of Angular2:
- angular2-all.umd.js
- angular2.js
What's the difference between the two? And apperently the angular2.js doesn't have an angular2.umd.js version, why is this?
Share Improve this question asked Apr 6, 2016 at 13:05 David SnabelDavid Snabel 10.1k7 gold badges23 silver badges29 bronze badges 2- github./angular/angular/blob/master/modules/angular2/docs/… – Eric Martinez Commented Apr 6, 2016 at 13:16
- @EricMartinez 404. Better to post relevant info than a link. – Kevin Lawrence Commented Jul 11, 2016 at 16:31
2 Answers
Reset to default 9In 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/8g5809rg/)
<html>
<head>
<script src="https://code.angularjs/tools/system.js"></script>
<script src="https://code.angularjs/2.0.0-beta.13/Rx.js"></script>
<script src="https://code.angularjs/2.0.0-beta.13/angular2-polyfills.js"></script>
<script src="https://code.angularjs/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>