Angular2不起作用

Question

我是Angular的新手，所以我選擇Angular2。

我在這里遵循官方指南

這是代碼

的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

您需要先檢查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);
});

在這里暴跌

Answer 2

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

Angular2不起作用

問題描述

2 個解決方案

解決方案1
4 已采納 2015-09-22 06:15:00

解決方案2
0 2015-09-22 06:11:39

Angular2不起作用

問題描述

2 個解決方案

解決方案1 4 已采納 2015-09-22 06:15:00

解決方案2 0 2015-09-22 06:11:39

解決方案1
4 已采納 2015-09-22 06:15:00

解決方案2
0 2015-09-22 06:11:39