ES5 Developer Guide #2 fails

CL

unread,

Jan 1, 2016, 6:28:00 PM1/1/16

to AngularJS

The first ES5 example in step 2 of the Angular Developer Guide (https://angular.io/docs/js/latest/guide/displaying-data.html) does not work. I've pasted the javascript exactly as it is shown in the example, but it fails in at least two ways:

Problem 1. "angular" has not been defined. The previous example used "ng" for the global accessor for angular, but now we're using "angular"? Okay, maybe they changed it to "ng" and just forgot to update this example ... except now "ng.ComponentAnnotation is not a function". Okay, maybe I need "ng.core" or something. Let's search for "ComponentAnnotation" to see where it is defined...

Problem 2. "ComponentAnnotation" does not exist anywhere in the Angular code. What? I don't understand. I used "npm install" with the packages.json from example 1, and neither "ComponentAnnotation" nor "ViewAnnotation" appear anywhere in any of the JavaScript files. How can that possibly be? Am I getting a bad version of angular2, or has Google really not even tested their ES5 examples?

I'll paste my code below, although it's virtually identical to the example code:

Landing page:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>App</title>

    <!-- 1. Load libraries -->
    <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>   

    <!-- 2. Load our 'modules' -->
    <script src='~/Ng2/app.js'></script>
    <script src='~/Ng2/boot.js'></script>

</head>
<body>
    <display>Loading...</display>
</body>
</html>

app.js:

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

package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  }
}

CL

unread,

Jan 1, 2016, 6:41:06 PM1/1/16

to AngularJS

A couple clarifications: I said "the previous example" and "example 1"; both times I was referring to the 5 Min Quickstart, which works fine. Also, I show a "boot.js" file being included, but this file is empty It was still there from the quickstart. The developer guide makes no mention of how to bootstrap the DisplayComponent, and the method used in the Quickstart doesn't really make sense here. (Should it be "ng.platform.browser.bootstrap(new DisplayComponent());" or something?) Presumably this would be problem #3 if I could get past problems 1 and 2.

Eric Martinez

unread,

Jan 2, 2016, 7:57:20 AM1/2/16

to AngularJS

CL,

yes, the docs for javascript are really outdated.

To answer your doubts :

#1 : Yes, "angular" global variable was renamed to "ng", long time ago. And yes, again, you need to use "ng.core".

#2 : Every *Annotation class was renamed to *Metadata.

#3: Yes, it must be "ng.platform.browser.bootstrap"

So at the end your code must look like this

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


  new ng.core.ComponentMetadata({   // You can do just ng.core.Component
      selector: "display"
  }),
  new ng.core.ViewMetadata({ // You can do just ng.core.View, and you can skip View as well since it's optional


      template:
         '<p>My name: {{ myName }}</p>'
  })
];

// Bootstrapping

document.addEventListener('DOMContentLoaded', function() {
  ng.platform.browser.bootstrap(DisplayComponent);
});

Hope it helps

Reply all

Reply to author

Forward