Geek Answers Handbook

What is the difference between Angular2 -all.umd.js and angular2.js

Angular 2 is currently in its 13th beta. When I look at https://code.angularjs.org/2.0.0-beta.13/ , I see that there are 2 different versions of Angular2:

  • angular2 -all.umd.js
  • angular2.js

What is the difference between the two? And apperently angular2.js does not have a version of angular2.umd.js, why is this?

+6
source share
2 answers

In fact, angular2-all.umd.js should be used if you want to implement Angular2 applications with ES5.

angular2.js is the main module for implementing Angular2 applications with ES6 or TypeScript. This file should be used with a module manager such as 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>
+8
source

As mentioned above for ES5, you should use the 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 ).

You can also use ES6 style modules with ES5 as a training exercise: ( 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>
+2
source

More articles:


All Articles