Since I’m recently working on an angular project, I started to get curious about the angular 2 version. I started with the quick start demo and everything went very smooth. So the next step was the Displaying Data example. It was then when it started to get wrong. I was following the walkthrough, but the result I got was a blank page.
After some research I discovered that that the angular developers made a breaking change in the alpha 35 version. All the classes ending on Annotation(s) where renamed to Metadata. Another difference is that you need to use the ng object instead of angular on the window.
If you want to get the Displaying Data example to work in es5, you will need to do the following:
show-properties.js:
1: (function () {
2: // ES5
3: function DisplayComponent() {
4: this.myName = "Alice";
5: } 6: 7: DisplayComponent.annotations = [8: new ng.ComponentMetadata({
9: selector: "display"
10: }),11: new ng.ViewMetadata({
12: template:13: '<p>My name: {{ myName }}</p>'
14: }) 15: ]; 16: 17: document.addEventListener('DOMContentLoaded', function () {
18: ng.bootstrap(DisplayComponent); 19: }); 20: })();<html>
<head>
<script src="angular2.sfx.dev.js"></script>
<script src="show-properties.js"><script>
</head>
<body>
<display></display>
</body>
</html>
