什么'Angular2-all.umd.js和Angular2.js之间的区别

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

本文关键字：js Angular2 区别 之间 umd Angular2-all 什么      更新时间：2024-02-07

此时Angular 2正处于第13个测试阶段。当我看着https://code.angularjs.org/2.0.0-beta.13/我可以看到Angular2:有两个不同的版本

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

两者之间有什么区别？显然angular2.js没有angular2.umd.js版本，为什么是这样？

事实上，如果您想用ES5实现Angular2应用程序，就必须使用angular2-all.umd.js。

angular2.js是使用ES6或TypeScript实现Angular2应用程序的核心模块。此文件必须与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>

如上所述，ES5应该使用UMD模块：angular2-all.umd.js和Rx.umd.js。对于Typescript或ES6，请使用angular2.js和Rx.js（它们还需要system.js）。

作为一种教育练习，还可以将ES6风格的模块与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>
相关文章：