Angular2 displaying data example not working

Question

I am following the tutorial on Angular2 from https://angular.io/docs/js/latest/guide/displaying-data.html but it is not working for me. Let me know what I am missing here.

BTW - I am using ES5 only.

Code in 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>

In component.js -

function DisplayComponent() {
  this.myName = "Alice";
}
DisplayComponent.annotations = [
  new angular.ComponentAnnotation({
    selector: "display"
  }),
  new angular.ViewAnnotation({
    template:
       '<p>My name: {{ myName }}</p>'
  })
];

Error I am getting if I am running idex.html in browser -

ReferenceError: angular is not defined

Thierry Templier · Accepted Answer · 2016-02-15 10:37:29Z

2

The sample doesn't seem to be correct... You should use the ComponentMetadata and ViewMetadata object:

function DisplayComponent() {
  this.myName = "Alice";
}

DisplayComponent.annotations = [
  new ng.core.ComponentMetadata({
    selector: "display"
  }),
  new ng.core.ViewMetadata({
    template:
       '<p>My name: {{ myName }}</p>'
  })
];

See this plunkr for more details: https://plnkr.co/edit/biMKXl1WXsgTCxbjwcme?p=preview.

You could also use the ng.core.Component object as described below:

var DisplayComponent = ng.core.
  Component({
    selector: "display"
  })
  .View({
    template:
      '<p>My name: {{ myName }}</p>'
  })
  .Class({
    constructor: function() {
      this.myName = "Alice";
    }
  });

See this plunkr: https://plnkr.co/edit/73Hirx9aqnITZCPonltX?p=preview.

This link could give you some hints:

Even better ES5 code for Angular 2 - http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html

edited Feb 15, 2016 at 10:37

answered Feb 15, 2016 at 10:28

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nesh Over a year ago

If the docs are not correct then what should I follow ? any help ? :)

Thierry Templier Over a year ago

I updated my answer with more samples. Perhaps it's typo in the docs. The Pascal Precht's article could be a great starting point ;-)

Nesh Over a year ago

Thanks for the link, sorry was out for coffee :)

Thierry Templier Over a year ago

No worries ;-) In fact, the way to use ES5 with Angular2 is a bit in progress. That's why there are less docs on the subject but the Angular2 guys are working on this...

Collectives™ on Stack Overflow

Angular2 displaying data example not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related