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>

16 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


  7. Mobility| Austere Technologies

    REALLY VERY EXCELLENT INFORMATION. THIS BLOG IMFORMATION VERY GOOD AND WE ALSO PROVIDING BEST SERVICES.

    ReplyDelete
  8. you helped me a lot, I work as an intern and did not know how to accomplish the task, but you corrected everything and helped me

    ReplyDelete
  9. Great article, really very helpful content you made. Thank you, keep sharing.

    Digital Transformation Services | Austere Technologies

    ReplyDelete
  10. Very good informative article. Thanks for sharing such nice article, keep on up dating such good articles.

    software security Services | Austere Technologies

    ReplyDelete
  11. Nice blog with excellent information. Thank you, keep sharing.

    Quality Management Services | Austere Technologies

    ReplyDelete
  12. Really great blog, it's very helpful and has great knowledgeable information. Thanks for sharing.

    Best Software Company in USA | Austere Technologies

    ReplyDelete
  13. This is really great informative blog. Keep sharing.

    Cloud services | Austere Technologies

    ReplyDelete
  14. Looking really very informative impressed very much with this blog, like to watch regularly to get more updates...
    Best Online Software Training Institute | Data Science Training

    ReplyDelete
  15. Very good informative article. Thanks for sharing such nice article, keep on up dating such good articles.
    Best Commerce College| Avinash college of commerce

    ReplyDelete