2016-09-16 5 views
0

나는 마지막으로 사용할 수있는 공용 버전 (beta17)을 사용하고 있으며 왜 간단한 바인딩 (fly by convert)이 작동하지 않는지 이해할 수 없습니다. 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 = {})); 
,363,210

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

답변

0

Plunkr

입니다

참고 : 나는 Angular 2 Final 버전을 사용하시기 바랍니다. 이전 버전을 사용하는 대신

+0

나도 마찬가지입니다. 하지만 지금은 npm 대신 공개 파일이 없습니다. 그리고 여전히 작동하지 않습니다. –

+0

@ValSaven 당신은 무엇을 의미합니까? –

+0

https://code.angularjs.org/ 마지막 버전은 beta17입니다. 그리고 URL 이름을 바꾼 후에도 여전히 바인딩이 작동하지 않습니다. –