chore: rename switch to ng-switch

This commit is contained in:
Misko Hevery 2015-05-11 16:07:23 -07:00
parent 78d3f62b6a
commit e9f236b70f
5 changed files with 56 additions and 56 deletions

View File

@ -9,13 +9,13 @@ import {CONST_EXPR} from './src/facade/lang';
import {For} from './src/directives/for'; import {For} from './src/directives/for';
import {NgIf} from './src/directives/ng_if'; import {NgIf} from './src/directives/ng_if';
import {NgNonBindable} from './src/directives/ng_non_bindable'; 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/class';
export * from './src/directives/for'; export * from './src/directives/for';
export * from './src/directives/ng_if'; export * from './src/directives/ng_if';
export * from './src/directives/ng_non_bindable'; 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. * 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: * 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'; * import {OtherDirective} from 'myDirectives';
* *
* @Component({ * @Component({
@ -32,7 +32,7 @@ export * from './src/directives/switch';
* }) * })
* @View({ * @View({
* templateUrl: 'myComponent.html', * templateUrl: 'myComponent.html',
* directives: [If, For, Switch, SwitchWhen, SwitchDefault, OtherDirective] * directives: [If, For, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
* }) * })
* export class MyComponent { * export class MyComponent {
* ... * ...
@ -58,5 +58,5 @@ export * from './src/directives/switch';
* *
*/ */
export const coreDirectives:List = CONST_EXPR([ export const coreDirectives:List = CONST_EXPR([
For, NgIf, NgNonBindable, Switch, SwitchWhen, SwitchDefault For, NgIf, NgNonBindable, NgSwitch, NgSwitchWhen, NgSwitchDefault
]); ]);

View File

@ -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. * 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. * 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 * 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**), * (where you place the directive), place an expression on the **`[ng-switch]="..."` attribute**),
* define any inner elements inside of the directive and place a `[switch-when]` attribute per * define any inner elements inside of the directive and place a `[ng-switch-when]` attribute per
* element. * 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 * evaluated. If a matching expression is not found via a when attribute then an element with the
* default attribute is displayed. * default attribute is displayed.
* *
* # Example: * # Example:
* *
* ``` * ```
* <ANY [switch]="expression"> * <ANY [ng-switch]="expression">
* <template [switch-when]="whenExpression1">...</template> * <template [ng-switch-when]="whenExpression1">...</template>
* <template [switch-when]="whenExpression1">...</template> * <template [ng-switch-when]="whenExpression1">...</template>
* <template [switch-default]>...</template> * <template [ng-switch-default]>...</template>
* </ANY> * </ANY>
* ``` * ```
* *
* @exportedAs angular2/directives * @exportedAs angular2/directives
*/ */
@Directive({ @Directive({
selector: '[switch]', selector: '[ng-switch]',
properties: { properties: {
'value': 'switch' 'ngSwitch': 'ngSwitch'
} }
}) })
export class Switch { export class NgSwitch {
_switchValue: any; _switchValue: any;
_useDefault: boolean; _useDefault: boolean;
_valueViews: Map; _valueViews: Map;
@ -68,7 +68,7 @@ export class Switch {
this._useDefault = false; this._useDefault = false;
} }
set value(value) { set ngSwitch(value) {
// Empty the currently active ViewContainers // Empty the currently active ViewContainers
this._emptyAllActiveViews(); this._emptyAllActiveViews();
@ -150,32 +150,32 @@ export class Switch {
/** /**
* Defines a case statement as an expression. * 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: * Example:
* *
* ``` * ```
* // match against a context variable * // match against a context variable
* <template [switch-when]="contextVariable">...</template> * <template [ng-switch-when]="contextVariable">...</template>
* *
* // match against a constant string * // match against a constant string
* <template [switch-when]="'stringValue'">...</template> * <template [ng-switch-when]="'stringValue'">...</template>
* ``` * ```
* *
* @exportedAs angular2/directives * @exportedAs angular2/directives
*/ */
@Directive({ @Directive({
selector: '[switch-when]', selector: '[ng-switch-when]',
properties: { properties: {
'when' : 'switch-when' 'ngSwitchWhen' : 'ngSwitchWhen'
} }
}) })
export class SwitchWhen { export class NgSwitchWhen {
_value: any; _value: any;
_switch: Switch; _switch: NgSwitch;
_view: SwitchView; _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 // `_whenDefault` is used as a marker for a not yet initialized value
this._value = _whenDefault; this._value = _whenDefault;
this._switch = sswitch; this._switch = sswitch;
@ -186,7 +186,7 @@ export class SwitchWhen {
this._switch this._switch
} }
set when(value) { set ngSwitchWhen(value) {
this._switch._onWhenValueChanged(this._value, value, this._view); this._switch._onWhenValueChanged(this._value, value, this._view);
this._value = value; this._value = value;
} }
@ -196,21 +196,21 @@ export class SwitchWhen {
/** /**
* Defines a default case statement. * 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: * Example:
* *
* ``` * ```
* <template [switch-default]>...</template> * <template [ng-switch-default]>...</template>
* ``` * ```
* *
* @exportedAs angular2/directives * @exportedAs angular2/directives
*/ */
@Directive({ @Directive({
selector: '[switch-default]' selector: '[ng-switch-default]'
}) })
export class SwitchDefault { export class NgSwitchDefault {
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, @Parent() sswitch: Switch) { constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, @Parent() sswitch: NgSwitch) {
sswitch._registerView(_whenDefault, new SwitchView(viewContainer, protoViewRef)); sswitch._registerView(_whenDefault, new SwitchView(viewContainer, protoViewRef));
} }
} }

View File

@ -15,7 +15,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
import {Component} from 'angular2/src/core/annotations_impl/annotations'; import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view'; 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'; import {TestBed} from 'angular2/src/test_lib/test_bed';
@ -24,9 +24,9 @@ export function main() {
describe('switch value changes', () => { describe('switch value changes', () => {
it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => { it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [switch]="switchValue">' + '<ul [ng-switch]="switchValue">' +
'<template [switch-when]="\'a\'"><li>when a</li></template>' + '<template [ng-switch-when]="\'a\'"><li>when a</li></template>' +
'<template [switch-when]="\'b\'"><li>when b</li></template>' + '<template [ng-switch-when]="\'b\'"><li>when b</li></template>' +
'</ul></div>'; '</ul></div>';
tb.createView(TestComponent, {html: template}).then((view) => { tb.createView(TestComponent, {html: template}).then((view) => {
@ -48,9 +48,9 @@ export function main() {
it('should switch amongst when values with fallback to default', it('should switch amongst when values with fallback to default',
inject([TestBed, AsyncTestCompleter], (tb, async) => { inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [switch]="switchValue">' + '<ul [ng-switch]="switchValue">' +
'<li template="switch-when \'a\'">when a</li>' + '<li template="ng-switch-when \'a\'">when a</li>' +
'<li template="switch-default">when default</li>' + '<li template="ng-switch-default">when default</li>' +
'</ul></div>'; '</ul></div>';
tb.createView(TestComponent, {html: template}).then((view) => { tb.createView(TestComponent, {html: template}).then((view) => {
@ -72,13 +72,13 @@ export function main() {
it('should support multiple whens with the same value', it('should support multiple whens with the same value',
inject([TestBed, AsyncTestCompleter], (tb, async) => { inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [switch]="switchValue">' + '<ul [ng-switch]="switchValue">' +
'<template [switch-when]="\'a\'"><li>when a1;</li></template>' + '<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
'<template [switch-when]="\'b\'"><li>when b1;</li></template>' + '<template [ng-switch-when]="\'b\'"><li>when b1;</li></template>' +
'<template [switch-when]="\'a\'"><li>when a2;</li></template>' + '<template [ng-switch-when]="\'a\'"><li>when a2;</li></template>' +
'<template [switch-when]="\'b\'"><li>when b2;</li></template>' + '<template [ng-switch-when]="\'b\'"><li>when b2;</li></template>' +
'<template [switch-default]><li>when default1;</li></template>' + '<template [ng-switch-default]><li>when default1;</li></template>' +
'<template [switch-default]><li>when default2;</li></template>' + '<template [ng-switch-default]><li>when default2;</li></template>' +
'</ul></div>'; '</ul></div>';
tb.createView(TestComponent, {html: template}).then((view) => { tb.createView(TestComponent, {html: template}).then((view) => {
@ -102,10 +102,10 @@ export function main() {
it('should switch amongst when values', it('should switch amongst when values',
inject([TestBed, AsyncTestCompleter], (tb, async) => { inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [switch]="switchValue">' + '<ul [ng-switch]="switchValue">' +
'<template [switch-when]="when1"><li>when 1;</li></template>' + '<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
'<template [switch-when]="when2"><li>when 2;</li></template>' + '<template [ng-switch-when]="when2"><li>when 2;</li></template>' +
'<template [switch-default]><li>when default;</li></template>' + '<template [ng-switch-default]><li>when default;</li></template>' +
'</ul></div>'; '</ul></div>';
tb.createView(TestComponent, {html: template}).then((view) => { tb.createView(TestComponent, {html: template}).then((view) => {
@ -139,7 +139,7 @@ export function main() {
} }
@Component({selector: 'test-cmp'}) @Component({selector: 'test-cmp'})
@View({directives: [Switch, SwitchWhen, SwitchDefault]}) @View({directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]})
class TestComponent { class TestComponent {
switchValue: any; switchValue: any;
when1: any; when1: any;

View File

@ -13,7 +13,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
import {window, document, gc} from 'angular2/src/facade/browser'; import {window, document, gc} from 'angular2/src/facade/browser';
import {getIntParameter, getStringParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'; 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 {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
import {ListWrapper} from 'angular2/src/facade/collection'; import {ListWrapper} from 'angular2/src/facade/collection';
@ -239,9 +239,9 @@ class AppComponent {
} }
}) })
@View({ @View({
directives: [For, Switch, SwitchWhen, SwitchDefault], directives: [For, NgSwitch, NgSwitchWhen, NgSwitchDefault],
template: ` template: `
<table [switch]="benchmarkType"> <table [ng-switch]="benchmarkType">
<tbody template="switch-when 'interpolation'"> <tbody template="switch-when 'interpolation'">
<tr template="for #row of data"> <tr template="for #row of data">
<td template="for #column of row"> <td template="for #column of row">

View File

@ -1,5 +1,5 @@
<div md-theme="default"> <div md-theme="default">
<h2>Switch demo</h2> <h2>NgSwitch demo</h2>
<md-switch (^click)="increment()">Normal switch</md-switch> <md-switch (^click)="increment()">Normal switch</md-switch>
<md-switch class="md-primary" (^click)="increment()">Primary switch</md-switch> <md-switch class="md-primary" (^click)="increment()">Primary switch</md-switch>