Angular 2：在没有 Node.js 的情况下与 JS 绑定答案

【问题标题】：Angular 2: Binding with JS without Node.jsAngular 2：在没有 Node.js 的情况下与 JS 绑定
【发布时间】：2017-01-24 09:28:24
【问题描述】：

我正在使用最后一个可用的公共版本（beta17），我不明白为什么简单的绑定（通过飞行转换）在那里不起作用。 plnkr有什么问题？ http://plnkr.co/edit/PfAUb5hOvgTcn0vbOdG1

index.html

<!doctype html>
<meta charset='utf-8'/>
<html>
<head>
  <!-- CSS -->
  <link rel='stylesheet' href='assets/bootstrap4.0.0-alpha.4/css/bootstrap.css' type="text/css"/>
  <!-- Angular libraries -->
  <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>
  <!-- Angular app modules -->
  <script src='app/app.js'></script>
  <script src="app/components/converter/converter.js"></script>
</head>

<body align='center'>
  <h1>Temperature Converter using Angular 2</h1>
  <converter class='converter'></converter>
</body>

</html>

/app/app.js

'use strict';

(function (app) {
  document.addEventListener('DOMContentLoaded', () => {
    ng.platform.browser.bootstrap(app.ConverterComponent);
  });
})(window.app || (window.app = {}));

/app/components/converter/converter.js

(function (app) {
  app.ConverterComponent = ng.core
    .Component({
      selector: 'converter',
      templateUrl: '/app/components/converter/template.html'
      })
    .Class({
      constructor: function () {
        this.temperature = '';

        let temp = this.temperature;

        temp = parseInt(temp, 10);
        this.fahrenheit = ((9 / 5) * temp) + 32;
        this.kelvin = (temp + 273.15);
      }
    })

})(window.app || (window.app = {}));

/app/components/converter/template.html

<div class="box">

  <div>
      <label for="temp">Enter your temperature (ºC):</label>
      <br>
      <input id="temp" [(ngModel)]="temperature" class="textfield">
  </div>

  <div [hidden]="temperature">
    Waiting for your temperature...
  </div>

  <div [hidden]="!temperature">
    <h3>{{fahrenheit}} ºF</h3>
    <h3>{{kelvin}} K</h3>
  </div>

</div>

【问题讨论】：

标签： javascript angularjs angular binding

【解决方案1】：

你必须让所有的 URL 都在没有 / 的情况下启动，比如 app/app.js 而不是 /app/app.js

这里是Plunkr

注意：我建议你使用 Angular 2 Final 版本而不是旧版本

【讨论】：

我也是。但是现在没有公共文件而不是 npm。而且还是不行。
@ValSaven 你是什么意思？
这里code.angularjs.org最后一个版本是beta17。并且在更改 url 名称绑定后仍然无法正常工作。
@ValSaven 你检查过答案中附加的 plunkr 吗？
知道了。我刚刚在 template.html 的输入中添加了 (keyup)="setTime()" 并在converter.js plnkr.co/edit/PfAUb5hOvgTcn0vbOdG1 p.s.但我不知道如何以这种方式使用最终版本。