我正在关注来自 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: Angular 未定义
最佳答案
示例似乎不正确...您应该使用 ComponentMetadata 和 ViewMetadata 对象:
function DisplayComponent() {
this.myName = "Alice";
}
DisplayComponent.annotations = [
new ng.core.ComponentMetadata({
selector: "display"
}),
new ng.core.ViewMetadata({
template:
'<p>My name: {{ myName }}</p>'
})
];
有关详细信息，请参阅此插件: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";
}
});
查看此插件:https://plnkr.co/edit/73Hirx9aqnITZCPonltX?p=preview .
这个链接可以给你一些提示:
- 更好的 Angular 2 ES5 代码 - http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html
关于javascript - Angular2 显示数据示例不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35406426/