From 6b69e2e6fab79863678559d956fd784cd9d32578 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Wed, 7 Dec 2016 21:38:52 -0800 Subject: [PATCH 1/4] fix: Better error when directive not listed in NgModule.declarations --- .../compiler/src/template_parser/template_parser.ts | 4 ++-- .../compiler/test/template_parser/template_parser_spec.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/modules/@angular/compiler/src/template_parser/template_parser.ts b/modules/@angular/compiler/src/template_parser/template_parser.ts index a89a776692f5..893ce2212f90 100644 --- a/modules/@angular/compiler/src/template_parser/template_parser.ts +++ b/modules/@angular/compiler/src/template_parser/template_parser.ts @@ -685,7 +685,7 @@ class TemplateParseVisitor implements html.Visitor { } elementProps.forEach(prop => { this._reportError( - `Property binding ${prop.name} not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section.`, + `Property binding ${prop.name} not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".`, sourceSpan); }); } @@ -704,7 +704,7 @@ class TemplateParseVisitor implements html.Visitor { events.forEach(event => { if (isPresent(event.target) || !allDirectiveEvents.has(event.name)) { this._reportError( - `Event binding ${event.fullName} not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "directives" section.`, + `Event binding ${event.fullName} not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations".`, event.sourceSpan); } }); diff --git a/modules/@angular/compiler/test/template_parser/template_parser_spec.ts b/modules/@angular/compiler/test/template_parser/template_parser_spec.ts index 7ee2bb7d20fd..b4b0fd4a5131 100644 --- a/modules/@angular/compiler/test/template_parser/template_parser_spec.ts +++ b/modules/@angular/compiler/test/template_parser/template_parser_spec.ts @@ -1586,9 +1586,9 @@ Parser Error: Unexpected token 'b' at column 3 in [a b] in TestComp@0:5 ("
parse('', [dirA])) .toThrowError(`Template parse errors: -Event binding e not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "directives" section. (""): TestComp@0:18 +Event binding e not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations". (""): TestComp@0:18 Components on an embedded template: DirA ("[ERROR ->]"): TestComp@0:0 -Property binding a not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("[ERROR ->]"): TestComp@0:0`); +Property binding a not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("[ERROR ->]"): TestComp@0:0`); }); it('should not allow components or element bindings on inline embedded templates', () => { @@ -1603,7 +1603,7 @@ Property binding a not used by any directive on an embedded template. Make sure .toSummary(); expect(() => parse('
', [dirA])).toThrowError(`Template parse errors: Components on an embedded template: DirA ("[ERROR ->]
"): TestComp@0:0 -Property binding a not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("[ERROR ->]
"): TestComp@0:0`); +Property binding a not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("[ERROR ->]
"): TestComp@0:0`); }); }); From b1d05dcbf4fbe247dbf329851a7e5e06b534dbc7 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Wed, 7 Dec 2016 21:41:21 -0800 Subject: [PATCH 2/4] fix: Better instructions on running examples and their tests --- modules/@angular/examples/README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/modules/@angular/examples/README.md b/modules/@angular/examples/README.md index 66cb927d1bad..c6cc1f4861e1 100644 --- a/modules/@angular/examples/README.md +++ b/modules/@angular/examples/README.md @@ -3,3 +3,24 @@ This folder contains small example apps that get in-lined into our API docs. Each example contains tests for application behavior (as opposed to testing Angular's behavior) just like an Angular application developer would write. + +# Running the examples + +``` +./build.sh # run only when framework code changes +./modules/@angular/examples/build.sh # run when test change +$(npm bin)/gulp serve-examples # start server +``` + +navigate to [http://localhost:8001](http://localhost:8001) + +# Running the tests + +``` +./build.sh # run only when framework code changes +./modules/@angular/examples/test.sh # run to compile tests and run them +``` + +NOTE: sometimes the http server does not exits properly and it retans the `8001` port. + in Such a case you can use `lsof -i:8001` to see which process it is and then use `kill` + to remove it. (Or in single command: `lsof -i:8001 -t | xargs kill`) \ No newline at end of file From e2bcd0ff61c4304257c208d3326682f91476fdaf Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Wed, 7 Dec 2016 21:41:27 -0800 Subject: [PATCH 3/4] feat: ngIf now supports else; saves condition to local var NgIf syntax has been extended to support else clause to display template when the condition is false. In addition the condition value can now be stored in local variable, for later reuse. This is especially useful when used with the `async` pipe. Example: ```
Hello {{user.last}}, {{user.first}}!
``` Closes #13061 --- .../@angular/common/src/directives/ng_if.ts | 144 +++++++++++++++--- .../common/test/directives/ng_if_spec.ts | 72 +++++++++ .../common/ngIf/ts/e2e_test/ngIf_spec.ts | 72 +++++++++ .../examples/common/ngIf/ts/module.ts | 128 ++++++++++++++++ .../language-service/test/test_data.ts | 2 +- .../language-service/test/ts_plugin_spec.ts | 2 +- tools/public_api_guard/common/index.d.ts | 4 +- 7 files changed, 402 insertions(+), 22 deletions(-) create mode 100644 modules/@angular/examples/common/ngIf/ts/e2e_test/ngIf_spec.ts create mode 100644 modules/@angular/examples/common/ngIf/ts/module.ts diff --git a/modules/@angular/common/src/directives/ng_if.ts b/modules/@angular/common/src/directives/ng_if.ts index 9d8f42f36a14..ddecc54d06a7 100644 --- a/modules/@angular/common/src/directives/ng_if.ts +++ b/modules/@angular/common/src/directives/ng_if.ts @@ -6,46 +6,152 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core'; +import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from '@angular/core'; + /** - * Removes or recreates a portion of the DOM tree based on an {expression}. + * Conditionally includes a template based on the value of an `expression`. + * + * `ngIf` evaluates the `expression` and then renders the `then` or `else` template in its place + * when expression is thruthy or falsy respectively. Typically the: + * - `then` template is the inline template of `ngIf` unless bound to a different value. + * - `else` template is blank unless its bound. + * + * # Most common usage + * + * The most common usage of the `ngIf` is to conditionally show the inline template as seen in this + * example: + * {@example common/ngIf/ts/module.ts region='NgIfSimple'} + * + * # Showing an alternative template using `else` + * + * If it is necessary to display a template when the `expression` is falsy use the `else` template + * binding as shown. Note that the `else` binding points to a `