Small mistake in displaying-data page.

[gintsgints]

It says

   injectables: [DisplayComponent]

but should be

   injectables: [FriendsService]

[hestad]

@gintsgints I didn't get that example to work even with that change, if you got it to work with typescript, can you paste the code?

[gintsgints]

Look for working examples here.

https://github.com/angular/angular/tree/master/modules/examples/src

[hestad]

@gintsgints Thanks for pointing out some examples, but by my understanding the '5 min Quickstart' and the 'step by step guide' is rooted in TypeScript with traceur and system. The examples you pointed out lacks that angle. E.g. the @Injectable annotation in those example really confuses me as it is missing from the DefinitelyTyped angular2.d.ts. I could probably add it to the file my self? But I've really lost track after all the different angular2 examples.

I have created the following example by looking at the 2. Displaying Data step:

import { Component, View, bootstrap,} from 'angular2/angular2';
class FriendsService {
  names: Array<string>;
  constructor() {
    this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
  }
}
@Component({
  selector: 'display',
  injectables: [FriendsService]
})
@View({
  template: '{{names}}'
})
class DisplayComponent {
  names: Array<string>;
  constructor(friends:FriendsService) {
    this.names = friends.names;
  }
}
bootstrap(DisplayComponent);

This gives the following js.error in chrome: Error during instantiation of Token(AppComponentAnnotatedType)!. ORIGINAL ERROR: No Directive annotation found on FriendsService By comparing the 'compiled' js to the es5 source I see that I'm missing this line: DisplayComponent.parameters = [[FriendsService]]; Adding that to either the typescript or the 'compiled' js, fixes things. So what is my TypeScript missing? What have I missed?

Edit: This is also valid TS: DisplayComponent['parameters'] = [[FriendsService]];

[gintsgints]

Not exactly like you wrote... but this works for me:

/// <reference path="typings/angular2/angular2"/>

import {bootstrap, Component, View, For} from "angular2/angular2";
import {bind} from 'angular2/di';

class FriendsService {
    names: Array<string>;

    addName(name: string) {
        this.names.push(name);
    }

    constructor() {
        this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
}

@Component({
    selector: 'todo-app',
    injectables: [
        FriendsService
    ]
})
@View({
    templateUrl: 'todo.html',
    directives: [For]
})

class TodoApp {
    name: string;
    friends: FriendsService;
    newfriend: string;

    constructor(friendsService: FriendsService) {
        this.name = 'Gints';
        this.friends = friendsService;
        setInterval(function () { this.time = (new Date()).toString(); }.bind(this), 1000);
    }

    addFriend() {
        console.log(this.newfriend);
    }
}

bootstrap(TodoApp);

May be you have to check config - (tsconfig.json and tsd.json), Also how does your index.html look like?

[gintsgints]

You can also check this video - https://www.youtube.com/watch?v=HmWm21cCAXM

[hestad]

That video did the trick, I was missing ' "emitDecoratorMetadata": true,' in my tsconfig.json. I don't operate with a tsd.json as I followed the quickstart guide and copied the angular2.d.ts into my workspace.

To me this seems a bit random, but in the 2. step in the quickstart you use this: 'tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts'. In the following guide I used atom with the typescript-plugin to compile my ts; and so i missed out on that command :) Bummer...

[alexwolfe]

@davideast Assigned to you to fix or close.

[gintsgints]

Text is now correct.