javascript - Angular2不起作用

我是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，但它什么也不显示。

最佳答案

您需要先使用DOMContentLoaded检查DOM是否准备就绪，然后再引导应用程序。
官方Angular 2.0已经提到要进行引导。

也正如乔格所说：

“ Angular 2当前在Developer Preview中。我们建议将Angular 1.X用于生产应用程序”

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

关于javascript - Angular2不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32708990/