Angular2 不起作用答案

【问题标题】：Angular2 doesn't workAngular2 不起作用
【发布时间】：2015-09-22 05:25:30
【问题描述】：

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

【问题讨论】：

你检查浏览器控制台了吗？
"如果您还没有安装 node 和 npm，请先安装它们。它们是不可或缺的前端开发人员工具。"
请记住：“Angular 2 目前处于开发者预览版中。我们建议将 Angular 1.X 用于生产应用程序”。
尝试创建一个 Plunker，您可以在其中获得一些帮助
他们提供了一个自动执行的包？酷。

标签： javascript angular

【解决方案1】：

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

正如乔格所说：

“Angular 2 目前处于开发者预览阶段。我们建议将 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

【讨论】：

是的，它工作得很好，谢谢。我想我应该使用 Angular1.x 来完成我的产品。看来2.0不适合我这个初学者。

【解决方案2】：

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

【讨论】：

是的，我和 Vicky 的结果相同。 DOMContentLoaded 修复它。