diff --git a/modules/angular2/directives.js b/modules/angular2/directives.js index 517128bc40..70c5695c9a 100644 --- a/modules/angular2/directives.js +++ b/modules/angular2/directives.js @@ -9,13 +9,13 @@ import {CONST_EXPR} from './src/facade/lang'; import {For} from './src/directives/for'; import {NgIf} from './src/directives/ng_if'; import {NgNonBindable} from './src/directives/ng_non_bindable'; -import {Switch, SwitchWhen, SwitchDefault} from './src/directives/switch'; +import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from './src/directives/ng_switch'; export * from './src/directives/class'; export * from './src/directives/for'; export * from './src/directives/ng_if'; export * from './src/directives/ng_non_bindable'; -export * from './src/directives/switch'; +export * from './src/directives/ng_switch'; /** * A collection of the Angular core directives that are likely to be used in each and every Angular application. @@ -24,7 +24,7 @@ export * from './src/directives/switch'; * instead of writing: * * ``` - * import {If, For, Switch, SwitchWhen, SwitchDefault} from 'angular2/angular2'; + * import {If, For, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2'; * import {OtherDirective} from 'myDirectives'; * * @Component({ @@ -32,7 +32,7 @@ export * from './src/directives/switch'; * }) * @View({ * templateUrl: 'myComponent.html', - * directives: [If, For, Switch, SwitchWhen, SwitchDefault, OtherDirective] + * directives: [If, For, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective] * }) * export class MyComponent { * ... @@ -58,5 +58,5 @@ export * from './src/directives/switch'; * */ export const coreDirectives:List = CONST_EXPR([ - For, NgIf, NgNonBindable, Switch, SwitchWhen, SwitchDefault + For, NgIf, NgNonBindable, NgSwitch, NgSwitchWhen, NgSwitchDefault ]); diff --git a/modules/angular2/src/directives/switch.js b/modules/angular2/src/directives/ng_switch.js similarity index 77% rename from modules/angular2/src/directives/switch.js rename to modules/angular2/src/directives/ng_switch.js index b495edf80f..8d3f2440fc 100644 --- a/modules/angular2/src/directives/switch.js +++ b/modules/angular2/src/directives/ng_switch.js @@ -24,39 +24,39 @@ class SwitchView { } /** - * The `Switch` directive is used to conditionally swap DOM structure on your template based on a + * The `NgSwitch` directive is used to conditionally swap DOM structure on your template based on a * scope expression. - * Elements within `Switch` but without `SwitchWhen` or `SwitchDefault` directives will be + * Elements within `NgSwitch` but without `NgSwitchWhen` or `NgSwitchDefault` directives will be * preserved at the location as specified in the template. * - * `Switch` simply chooses nested elements and makes them visible based on which element matches + * `NgSwitch` simply chooses nested elements and makes them visible based on which element matches * the value obtained from the evaluated expression. In other words, you define a container element - * (where you place the directive), place an expression on the **`[switch]="..."` attribute**), - * define any inner elements inside of the directive and place a `[switch-when]` attribute per + * (where you place the directive), place an expression on the **`[ng-switch]="..."` attribute**), + * define any inner elements inside of the directive and place a `[ng-switch-when]` attribute per * element. - * The when attribute is used to inform Switch which element to display when the expression is + * The when attribute is used to inform NgSwitch which element to display when the expression is * evaluated. If a matching expression is not found via a when attribute then an element with the * default attribute is displayed. * * # Example: * * ``` - * - * - * - * + * + * + * + * * * ``` * * @exportedAs angular2/directives */ @Directive({ - selector: '[switch]', + selector: '[ng-switch]', properties: { - 'value': 'switch' + 'ngSwitch': 'ngSwitch' } }) -export class Switch { +export class NgSwitch { _switchValue: any; _useDefault: boolean; _valueViews: Map; @@ -68,7 +68,7 @@ export class Switch { this._useDefault = false; } - set value(value) { + set ngSwitch(value) { // Empty the currently active ViewContainers this._emptyAllActiveViews(); @@ -150,32 +150,32 @@ export class Switch { /** * Defines a case statement as an expression. * - * If multiple `SwitchWhen` match the `Switch` value, all of them are displayed. + * If multiple `NgSwitchWhen` match the `NgSwitch` value, all of them are displayed. * * Example: * * ``` * // match against a context variable - * + * * * // match against a constant string - * + * * ``` * * @exportedAs angular2/directives */ @Directive({ - selector: '[switch-when]', + selector: '[ng-switch-when]', properties: { - 'when' : 'switch-when' + 'ngSwitchWhen' : 'ngSwitchWhen' } }) -export class SwitchWhen { +export class NgSwitchWhen { _value: any; - _switch: Switch; + _switch: NgSwitch; _view: SwitchView; - constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, @Parent() sswitch: Switch) { + constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, @Parent() sswitch: NgSwitch) { // `_whenDefault` is used as a marker for a not yet initialized value this._value = _whenDefault; this._switch = sswitch; @@ -186,7 +186,7 @@ export class SwitchWhen { this._switch } - set when(value) { + set ngSwitchWhen(value) { this._switch._onWhenValueChanged(this._value, value, this._view); this._value = value; } @@ -196,21 +196,21 @@ export class SwitchWhen { /** * Defines a default case statement. * - * Default case statements are displayed when no `SwitchWhen` match the `switch` value. + * Default case statements are displayed when no `NgSwitchWhen` match the `switch` value. * * Example: * * ``` - * + * * ``` * * @exportedAs angular2/directives */ @Directive({ - selector: '[switch-default]' + selector: '[ng-switch-default]' }) -export class SwitchDefault { - constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, @Parent() sswitch: Switch) { +export class NgSwitchDefault { + constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, @Parent() sswitch: NgSwitch) { sswitch._registerView(_whenDefault, new SwitchView(viewContainer, protoViewRef)); } } diff --git a/modules/angular2/test/directives/switch_spec.js b/modules/angular2/test/directives/switch_spec.js index 3b511b7b1b..d04ad958c9 100644 --- a/modules/angular2/test/directives/switch_spec.js +++ b/modules/angular2/test/directives/switch_spec.js @@ -15,7 +15,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter'; import {Component} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; -import {Switch, SwitchWhen, SwitchDefault} from 'angular2/src/directives/switch'; +import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from '../../src/directives/ng_switch'; import {TestBed} from 'angular2/src/test_lib/test_bed'; @@ -24,9 +24,9 @@ export function main() { describe('switch value changes', () => { it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => { var template = '
' + - '
'; tb.createView(TestComponent, {html: template}).then((view) => { @@ -48,9 +48,9 @@ export function main() { it('should switch amongst when values with fallback to default', inject([TestBed, AsyncTestCompleter], (tb, async) => { var template = '
' + - '
'; tb.createView(TestComponent, {html: template}).then((view) => { @@ -72,13 +72,13 @@ export function main() { it('should support multiple whens with the same value', inject([TestBed, AsyncTestCompleter], (tb, async) => { var template = '
' + - '
'; tb.createView(TestComponent, {html: template}).then((view) => { @@ -102,10 +102,10 @@ export function main() { it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => { var template = '
' + - '
'; tb.createView(TestComponent, {html: template}).then((view) => { @@ -139,7 +139,7 @@ export function main() { } @Component({selector: 'test-cmp'}) -@View({directives: [Switch, SwitchWhen, SwitchDefault]}) +@View({directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]}) class TestComponent { switchValue: any; when1: any; diff --git a/modules/benchmarks/src/largetable/largetable_benchmark.js b/modules/benchmarks/src/largetable/largetable_benchmark.js index 69a057e1fc..c6abdee920 100644 --- a/modules/benchmarks/src/largetable/largetable_benchmark.js +++ b/modules/benchmarks/src/largetable/largetable_benchmark.js @@ -13,7 +13,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter'; import {window, document, gc} from 'angular2/src/facade/browser'; import {getIntParameter, getStringParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'; -import {For, Switch, SwitchWhen, SwitchDefault} from 'angular2/directives'; +import {For, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/directives'; import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter'; import {ListWrapper} from 'angular2/src/facade/collection'; @@ -239,9 +239,9 @@ class AppComponent { } }) @View({ - directives: [For, Switch, SwitchWhen, SwitchDefault], + directives: [For, NgSwitch, NgSwitchWhen, NgSwitchDefault], template: ` - +
diff --git a/modules/examples/src/material/switcher/demo_app.html b/modules/examples/src/material/switcher/demo_app.html index 50dc84ed57..5d05101d31 100644 --- a/modules/examples/src/material/switcher/demo_app.html +++ b/modules/examples/src/material/switcher/demo_app.html @@ -1,5 +1,5 @@
-

Switch demo

+

NgSwitch demo

Normal switch Primary switch