Question

开始使用AngularJs 2

到目前为止工作得很好。

现在我已经转到他们的displaying data指南了但是我被困住了，这一点。我正在使用ES5。

索引：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Angular 2 Quickstart</title>
        <!-- Angular is working on removing the traceur dependency -->
        <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
        <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
        <script src="app.js"></script>
        <script src="components/display.js"></script>
    </head>

    <body>
        <my-app></my-app>
        <display-stuff></display-stuff>
    </body>
</html>

display.js：

function DisplayComponent()
{
    this.myOwnVar = 'Chicki chicki Gabriel';
}

DisplayComponent.annotations = [
    new angular.ComponentAnnotation({
        selector: 'display'
    }),
    new angular.ViewAnnotation({
        template:
            '<p>My name is, hi, my name is who, my name is: {{ myOwnVar }}</p>'
    })
];

它表示我没有定义角度，因为上一个教程中的app.js工作得很好：

(function() {
    var AppComponent = ng
        .Component({
            selector: 'my-app',
            template: '<h1>My first Template audited gf</h1>'
        })
        .Class({
            constructor: function() {

            }
        });

    document.addEventListener('DOMContentLoaded', function() {
        ng.bootstrap(AppComponent);
    });
})();

Answer 1

有关工作示例，请参阅https://gist.github.com/lokanx/6bc34b10bbe9cd7c2d59。

display.js

(function () {
   var Display = ng.Component({
        selector: 'display',
        templateUrl: 'views/display.html',
        directives: [ng.NgFor, ng.NgIf],
        providers: [Display]
    })
    .Class({
        constructor: function () {
            this.myName = "Alice";
            this.names = ["Aarav", "Martín", "Shannon"];
        }
    });

    ng.provide("Display", Display);
})();

和app.js

(function () {
    var AppComponent = ng.Component({
        selector: 'my-app',
        templateUrl: 'views/app.html',
        directives: [Display]
    })
    .Class({
        constructor: function () {}
    });

   document.addEventListener('DOMContentLoaded', function () {
      ng.bootstrap(AppComponent);
   });

}）（）;

app.html

 <h1>My First Angular 2 App </h1>
 <display></display>

display.html

<p>My name: {{ myName }}</p>

我可以建议你开始用打字稿编写angular2代码吗？这很容易。

AngularJs2＆＃39;棱角未定义＆＃39;启动指南后出错

1 个答案: