What's the difference between Angular2-all.umd.js and angular2.js
Question
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:
- 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?
2 answers
solution1
9 ACCPTED 2016-04-06 13:07:20
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>
solution2
2 2016-04-06 13:44:57
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.