Tuesday, October 27, 2015

Angular2: Fix Displaying data example in es5

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>

7 comments:

  1. Thank you! It helped me very much!

    ReplyDelete
  2. It should be helpful but it wasn't really clear. Thank you for sharing those tips. I would like to ask you to make them more detailed.

    ReplyDelete
  3. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    Java Training in Chennai

    ReplyDelete
  4. This blog is really great.This site is very helpful and informational : click here

    ReplyDelete
  5. Each optical disc is able to store as much data as five hundred floppy disks. Thus, storage of data and retrieval is easier and much faster now. Self Storage

    ReplyDelete
  6. i have a couple of friends who work as network administrators and would probabbly use this kind of help thanks for sharing such an awesome piece il refer them to your blog

    ReplyDelete