角2：Node.jsを持たないJSとのバインド

私は最後に利用可能なパブリックバージョン（beta17）を使用していますが、シンプルなバインディング（flyで変換）がそこで動作しない理由を理解できません。 plnkrの問題点は何ですか？ http://plnkr.co/edit/PfAUb5hOvgTcn0vbOdG1 角2：Node.jsを持たないJSとのバインド

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はあなたはあなたのすべてのURLの代わりに、ここで/app/app.js

のapp/app.jsよう/なしで起動されるように確認する必要があり

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

出典

2016-09-16 Val Saven

Plunkr

です

注：角度2の最終版を使用することをお勧めします旧バージョンを使用する代わりに

出典

2016-09-16 08:16:20

私もそうです。しかし、今はnpmの代わりに公開ファイルがありません。それでも動作しません。 –

@ValSavenどういう意味ですか？ –

https://code.angularjs.org/最後のバージョンはbeta17です。そして、URLの名前を変更した後も、バインディングは動作しません。 –

角2：Node.jsを持たないJSとのバインド

答えて

関連する問題