3

https://angular.io/docs/js/latest/guide/displaying-data.htmlの Angular2 のチュートリアルに従っていますが、うまくいきません。ここで何が欠けているか教えてください。

ところで - 私は ES5 のみを使用しています。

コードインindex.html-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular2 Demo</title>

    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>

    <script src="app/component.js"></script>
</head>
<body>

        <display></display>
</body>
</html>

でcomponent.js-

function DisplayComponent() {
  this.myName = "Alice";
}
DisplayComponent.annotations = [
  new angular.ComponentAnnotation({
    selector: "display"
  }),
  new angular.ViewAnnotation({
    template:
       '<p>My name: {{ myName }}</p>'
  })
];

ブラウザで idex.html を実行している場合に発生するエラー -

ReferenceError: 角度が定義されていません

4

1 に答える 1

2

サンプルは正しくないようです... ComponentMetadataandViewMetadataオブジェクトを使用する必要があります。

function DisplayComponent() {
  this.myName = "Alice";
}

DisplayComponent.annotations = [
  new ng.core.ComponentMetadata({
    selector: "display"
  }),
  new ng.core.ViewMetadata({
    template:
       '<p>My name: {{ myName }}</p>'
  })
];

詳細については、この plunkr を参照してください: https://plnkr.co/edit/biMKXl1WXsgTCxbjwcme?p=preview .

ng.core.Component以下で説明するように、オブジェクトを使用することもできます。

var DisplayComponent = ng.core.
  Component({
    selector: "display"
  })
  .View({
    template:
      '<p>My name: {{ myName }}</p>'
  })
  .Class({
    constructor: function() {
      this.myName = "Alice";
    }
  });

この plunkr を参照してください: https://plnkr.co/edit/73Hirx9aqnITZCPonltX?p=preview。

このリンクは、いくつかのヒントを提供する可能性があります。

于 2016-02-15T10:28:27.823 に答える