Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

So maybe this is a total noob question, but I am a total noob at Angular JS and TypeScript. I'm going through Angular's hero tutorial (There's a Plunker for it here: https://angular.io/resources/live-examples/toh-1/ts/plnkr.html). If the Hero class is defined at the beginning (after the import line) or end of the file, it runs fine; however, if it's defined in between @Component and AppComponent, the JS throws the following exception at runtime: "No Directive annotation found on AppComponent". I don't understand enough about TypeScript and/or Angular JS to satisfactorily understand why this is. Why is the order so important? Do I need to add some special syntax when the Hero definition is in the middle? Thanks!

share|improve this question
up vote 2 down vote accepted

@Component, or any similar thing that starts with an @ symbol, is a special language element called an annotation. It is associated with the code element (class, variable, etc.) that immediately follows it, and specifies metadata of some kind about that code element. In this case, @Component specifies that the class it is attached to is an Angular component.

When you have the Hero class between @Component and AppComponent, you are declaring that Hero, not AppComponent, is an Angular component because Hero is the code element immediately following @Component.

share|improve this answer
    
Oh that makes perfect sense. I was looking at @Component like it's own separate entity, not as an annotation. I probably should have realized that since the syntax is identical in Java XD. TypeScript is so new to me! See, I told you it was a noob question. Thanks so much, I can sleep tonight! – fugigoose Jul 21 '16 at 21:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.