diff --git a/README.md b/README.md index ab7bebb..831dd4b 100644 --- a/README.md +++ b/README.md @@ -25,17 +25,51 @@ Open `src\app\app.component.ts`. The Angular2 language service warns you that th ![Error about missing module](tour_images/no_module_error.png) +### Errors in Inline Templates -### Inline Templates +Still in `src\app\app.component.ts`, you can try editing the inline template in `InlineComponent`. The project includes a syntax error: -### .ngml Files +![Syntax error](tour_images/closing_tag_error.png) -### Errors +Fix the syntax error by changing `` to ``. You'll now see a semantic error: -### Completions +![Inline semantic error](tour_images/semantic_inline_error.png) + +Angular2 identified another mistake here - there is no method named `toLower`; fix this to `toLowerCase`. The error disappears: + +![Errors resolved](tour_images/no_error.png) ### Navigation +Now that we've fixed the errors, let's try some navigation. Place the caret on `prop1` in the inline template. Open the context menu and select "Go to Definition": +![Go to Definition](tour_images/go_to_def.png) +This will take us to the definition of `prop1` in the corresponding component: +![Navigated](tour_images/navigated.png) + +### .ngml Files + +Open `src\app\app.component.ngml`. This is the template file for the corresponding class `AppComponent` in `app.component.ts`. +On line 5, place the caret on `prop1` and invoke "Go to Definition" again: + +![Go to Definition from ngml](tour_images/ngml_go_to_def.png) + +This navigates us to the `prop1` declaration in `app.component.ts`. Note that even though the file had two classes, both with properties named `prop1`, we were properly navigated to the correct one: + +![Navigated from ngml](tour_images/ngml_navigated.png) + +### Completions + +In both inline templates and ngml files, we'll get completion lists. + +Open `src\app\contact\contact.component.ngml`. Go to line 29 and place the caret to the right of `.` in `contactForm.status`, and press `Ctrl-Space` to open the completion list: + +![Completions in ngml](tour_images/ngml_completion.png) + +Visual Studio will display all the members of the `contactForm`. You can also see completions in NGML template positions. Place the caret on line `23` after `div`, and press `Ctrl-Space` to open the completion list: + +![Template completions in ngml](tour_images/ngml_template_completions.png) + +Now you'll see a list of the allowed attribute names, including those specific to Angular 2's template syntax, in the completion list. diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6c1c8d3..e582768 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,7 +2,7 @@ import {Component} from '@angular/core'; @Component({ selector: 'app', - template: '{{prop1.toLower()}}', + template: '{{prop1.toLowerCase()}}', }) export class InlineComponent { prop1 = 'hello'; diff --git a/tour_images/closing_tag_error.png b/tour_images/closing_tag_error.png new file mode 100644 index 0000000..2dc102b Binary files /dev/null and b/tour_images/closing_tag_error.png differ diff --git a/tour_images/go_to_def.png b/tour_images/go_to_def.png new file mode 100644 index 0000000..a8bdb5b Binary files /dev/null and b/tour_images/go_to_def.png differ diff --git a/tour_images/navigated.png b/tour_images/navigated.png new file mode 100644 index 0000000..cac298b Binary files /dev/null and b/tour_images/navigated.png differ diff --git a/tour_images/ngml_completion.png b/tour_images/ngml_completion.png new file mode 100644 index 0000000..7e7615b Binary files /dev/null and b/tour_images/ngml_completion.png differ diff --git a/tour_images/ngml_go_to_def.png b/tour_images/ngml_go_to_def.png new file mode 100644 index 0000000..25abec2 Binary files /dev/null and b/tour_images/ngml_go_to_def.png differ diff --git a/tour_images/ngml_navigated.png b/tour_images/ngml_navigated.png new file mode 100644 index 0000000..c667cce Binary files /dev/null and b/tour_images/ngml_navigated.png differ diff --git a/tour_images/ngml_template_completions.png b/tour_images/ngml_template_completions.png new file mode 100644 index 0000000..8e8ace4 Binary files /dev/null and b/tour_images/ngml_template_completions.png differ diff --git a/tour_images/no_error.png b/tour_images/no_error.png new file mode 100644 index 0000000..8824122 Binary files /dev/null and b/tour_images/no_error.png differ diff --git a/tour_images/semantic_inline_error.png b/tour_images/semantic_inline_error.png new file mode 100644 index 0000000..da06564 Binary files /dev/null and b/tour_images/semantic_inline_error.png differ