Question

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

我正在关注官方指南here

这是代码

的index.html

Associative Relationship

app.js

<!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>

然后我输入var AppComponent = ng .Component({ selector: 'my-app' }) .View({ template: '<h1 id="output">My First Angular 2 App</h1>' }) .Class({ constructor: function () { } });，但它什么也没显示。

Answer 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

Answer 2

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

Angular2不起作用

2 个答案: