Angular2 不起作用

Question

我是Angular的新人，所以我选择Angular2。

我在关注官方指南here

这是代码

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>

app.js

var AppComponent = ng
    .Component({
      selector: 'my-app'
    })
    .View({
      template: '<h1 id="output">My First Angular 2 App</h1>'
    })
    .Class({
      constructor: function () { }
    });

然后我输入live-server --port=8000，但它什么也没显示。

Answer 1

能否将 ng.bootstrap(AppComponent, []); 添加到 app.js 的底部并将 angular 版本更新为 <script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.sfx.dev.js"></script>

Answer 2

您需要先检查 DOM 是否已准备好 DOMContentLoaded，然后 Bootstrap 应用程序。
官方Angular 2.0 已经提到bootstrap。

也正如 Jorg 所说：

"Angular 2 is currently in Developer Preview. We recommend using Angular 1.X for production applications"

HTML:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.sfx.dev.js"></script>
    <script src="main.js"></script>
  </head>

  <body>
    <my-app></my-app>
  </body>

</html>

Javascript (ES5):

var AppComponent = ng
    .Component({
      selector: 'my-app'
    })
    .View({
      template: '<h1 id="output">My First Angular 2 App</h1>'
    })
    .Class({
      constructor: function () { }
    });

document.addEventListener('DOMContentLoaded', function() {
  ng.bootstrap(AppComponent);
});

Plunker Here

Angular2 不起作用

Angular2 doesn't work

javascript

angular