chore: rename if to ng-if

This commit is contained in:
Misko Hevery 2015-05-11 15:58:59 -07:00
parent 7dc524ed58
commit d310a9c0b4
13 changed files with 56 additions and 56 deletions

View File

@ -7,13 +7,13 @@
import {CONST_EXPR} from './src/facade/lang';
import {For} from './src/directives/for';
import {If} from './src/directives/if';
import {NgIf} from './src/directives/ng_if';
import {NonBindable} from './src/directives/non_bindable';
import {Switch, SwitchWhen, SwitchDefault} from './src/directives/switch';
export * from './src/directives/class';
export * from './src/directives/for';
export * from './src/directives/if';
export * from './src/directives/ng_if';
export * from './src/directives/non_bindable';
export * from './src/directives/switch';
@ -58,5 +58,5 @@ export * from './src/directives/switch';
*
*/
export const coreDirectives:List = CONST_EXPR([
For, If, NonBindable, Switch, SwitchWhen, SwitchDefault
For, NgIf, NonBindable, Switch, SwitchWhen, SwitchDefault
]);

View File

@ -12,7 +12,7 @@ import {isBlank} from 'angular2/src/facade/lang';
* # Example:
*
* ```
* <div *if="errorCount > 0" class="error">
* <div *ng-if="errorCount > 0" class="error">
* <!-- Error message displayed when the errorCount property on the current context is greater than 0. -->
* {{errorCount}} errors detected
* </div>
@ -20,19 +20,19 @@ import {isBlank} from 'angular2/src/facade/lang';
*
* # Syntax
*
* - `<div *if="condition">...</div>`
* - `<div template="if condition">...</div>`
* - `<template [if]="condition"><div>...</div></template>`
* - `<div *ng-if="condition">...</div>`
* - `<div template="ng-if condition">...</div>`
* - `<template [ng-if]="condition"><div>...</div></template>`
*
* @exportedAs angular2/directives
*/
@Directive({
selector: '[if]',
selector: '[ng-if]',
properties: {
'condition': 'if'
'ngIf': 'ngIf'
}
})
export class If {
export class NgIf {
viewContainer: ViewContainerRef;
protoViewRef: ProtoViewRef;
prevCondition: boolean;
@ -43,7 +43,7 @@ export class If {
this.protoViewRef = protoViewRef;
}
set condition(newCondition /* boolean */) {
set ngIf(newCondition /* boolean */) {
if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
this.prevCondition = true;
this.viewContainer.create(this.protoViewRef);

View File

@ -38,7 +38,7 @@ export class ViewSplitter extends CompileStep {
var templateBindings = MapWrapper.get(attrs, 'template');
var hasTemplateBinding = isPresent(templateBindings);
// look for template shortcuts such as *if="condition" and treat them as template="if condition"
// look for template shortcuts such as *ng-if="condition" and treat them as template="if condition"
MapWrapper.forEach(attrs, (attrValue, attrName) => {
if (StringWrapper.startsWith(attrName, '*')) {
var key = StringWrapper.substring(attrName, 1); // remove the star

View File

@ -20,7 +20,7 @@ import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {If} from 'angular2/src/directives/if';
import {NgIf} from 'angular2/src/directives/ng_if';
import {DomRenderer} from 'angular2/src/render/dom/dom_renderer';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
@ -64,8 +64,8 @@ export function main() {
it('should allow to destroy and create them via viewcontainer directives',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
tb.overrideView(MyComp, new View({
template: '<div><dynamic-comp #dynamic template="if: ctxBoolProp"></dynamic-comp></div>',
directives: [DynamicComp, If]
template: '<div><dynamic-comp #dynamic template="ng-if: ctxBoolProp"></dynamic-comp></div>',
directives: [DynamicComp, NgIf]
}));
tb.createView(MyComp).then((view) => {

View File

@ -32,7 +32,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
import {Attribute, Query} from 'angular2/src/core/annotations_impl/di';
import {If} from 'angular2/src/directives/if';
import {NgIf} from 'angular2/src/directives/ng_if';
import {For} from 'angular2/src/directives/for';
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
@ -561,11 +561,11 @@ export function main() {
tb.overrideView(MyComp, new View({
template: `
<some-directive>
<p *if="true">
<p *ng-if="true">
<cmp-with-ancestor #child></cmp-with-ancestor>
</p>
</some-directive>`,
directives: [SomeDirective, CompWithAncestor, If]
directives: [SomeDirective, CompWithAncestor, NgIf]
}));
tb.createView(MyComp, {context: ctx}).then((view) => {
@ -728,8 +728,8 @@ export function main() {
it('should support render global events from multiple directives', inject([TestBed, AsyncTestCompleter], (tb, async) => {
tb.overrideView(MyComp, new View({
template: '<div *if="ctxBoolProp" listener listenerother></div>',
directives: [If, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
template: '<div *ng-if="ctxBoolProp" listener listenerother></div>',
directives: [NgIf, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
}));
tb.createView(MyComp, {context: ctx}).then((view) => {
@ -894,8 +894,8 @@ export function main() {
it('should raise an error for missing template directive (2)', inject([TestBed, AsyncTestCompleter], (tb, async) => {
expectCompileError(
tb,
'<div><template *if="condition"></template></div>',
'Missing directive to handle: <template *if="condition">',
'<div><template *ng-if="condition"></template></div>',
'Missing directive to handle: <template *ng-if="condition">',
() => async.done()
);
}));
@ -903,8 +903,8 @@ export function main() {
it('should raise an error for missing template directive (3)', inject([TestBed, AsyncTestCompleter], (tb, async) => {
expectCompileError(
tb,
'<div *if="condition"></div>',
'Missing directive to handle \'if\' in MyComp: <div *if="condition">',
'<div *ng-if="condition"></div>',
'Missing directive to handle \'if\' in MyComp: <div *ng-if="condition">',
() => async.done()
);
}));

View File

@ -17,7 +17,7 @@ import {TestBed} from 'angular2/src/test_lib/test_bed';
import {QueryList} from 'angular2/src/core/compiler/query_list';
import {Query} from 'angular2/src/core/annotations_impl/di';
import {If, For} from 'angular2/angular2';
import {NgIf, For} from 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
@ -45,7 +45,7 @@ export function main() {
it('should reflect dynamically inserted directives', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template =
'<div text="1"></div>' +
'<needs-query text="2"><div *if="shouldShow" [text]="\'3\'"></div></needs-query>' +
'<needs-query text="2"><div *ng-if="shouldShow" [text]="\'3\'"></div></needs-query>' +
'<div text="4"></div>';
tb.createView(MyComp, {html: template}).then((view) => {
@ -113,7 +113,7 @@ class TextDirective {
@Component({selector: 'my-comp'})
@View({
directives: [NeedsQuery, TextDirective, If, For]
directives: [NeedsQuery, TextDirective, NgIf, For]
})
class MyComp {
shouldShow: boolean;

View File

@ -19,12 +19,12 @@ import {TestBed} from 'angular2/src/test_lib/test_bed';
import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {If} from 'angular2/src/directives/if';
import {NgIf} from 'angular2/src/directives/ng_if';
export function main() {
describe('if directive', () => {
it('should work in a template attribute', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
tb.createView(TestComponent, {html: html}).then((view) => {
view.detectChanges();
@ -35,7 +35,7 @@ export function main() {
}));
it('should work in a template element', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var html = '<div><template [if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
var html = '<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
tb.createView(TestComponent, {html: html}).then((view) => {
view.detectChanges();
@ -46,7 +46,7 @@ export function main() {
}));
it('should toggle node when condition changes', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
tb.createView(TestComponent, {html: html}).then((view) => {
view.context.booleanCondition = false;
@ -69,7 +69,7 @@ export function main() {
}));
it('should handle nested if correctly', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var html = '<div><template [if]="booleanCondition"><copy-me *if="nestedBooleanCondition">hello</copy-me></template></div>';
var html = '<div><template [ng-if]="booleanCondition"><copy-me *ng-if="nestedBooleanCondition">hello</copy-me></template></div>';
tb.createView(TestComponent, {html: html}).then((view) => {
view.context.booleanCondition = false;
@ -104,9 +104,9 @@ export function main() {
it('should update several nodes with if', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var html =
'<div>' +
'<copy-me template="if numberCondition + 1 >= 2">helloNumber</copy-me>' +
'<copy-me template="if stringCondition == \'foo\'">helloString</copy-me>' +
'<copy-me template="if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
'<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
'<copy-me template="ng-if stringCondition == \'foo\'">helloString</copy-me>' +
'<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
'</div>';
tb.createView(TestComponent, {html: html}).then((view) => {
@ -132,7 +132,7 @@ export function main() {
if (!IS_DARTIUM) {
it('should not add the element twice if the condition goes from true to true (JS)',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
tb.createView(TestComponent, {html: html}).then((view) => {
view.detectChanges();
@ -150,7 +150,7 @@ export function main() {
it('should not recreate the element if the condition goes from true to true (JS)',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
tb.createView(TestComponent, {html: html}).then((view) => {
view.detectChanges();
@ -168,7 +168,7 @@ export function main() {
if (IS_DARTIUM) {
it('should not create the element if the condition is not a boolean (DART)',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
tb.createView(TestComponent, {html: html}).then((view) => {
expect(() => view.detectChanges()).toThrowError();
@ -183,7 +183,7 @@ export function main() {
}
@Component({selector: 'test-cmp'})
@View({directives: [If]})
@View({directives: [NgIf]})
class TestComponent {
booleanCondition: boolean;
nestedBooleanCondition: boolean;

View File

@ -144,12 +144,12 @@ export function main() {
describe('elements with *directive_name attribute', () => {
it('should replace the element with an empty <template> element', () => {
var rootElement = el('<div><span *if></span></div>');
var rootElement = el('<div><span *ng-if></span></div>');
var originalChild = rootElement.childNodes[0];
var results = createPipeline().process(rootElement);
expect(results[0].element).toBe(rootElement);
expect(DOM.getOuterHTML(results[0].element)).toEqual('<div><template class="ng-binding" if=""></template></div>');
expect(DOM.getOuterHTML(results[2].element)).toEqual('<span *if=""></span>')
expect(DOM.getOuterHTML(results[0].element)).toEqual('<div><template class="ng-binding" ng-if=""></template></div>');
expect(DOM.getOuterHTML(results[2].element)).toEqual('<span *ng-if=""></span>')
expect(results[2].element).toBe(originalChild);
});

View File

@ -56,15 +56,15 @@ export function main() {
@View({
directives: [If, For, DummyComponent, DummyDirective, DynamicDummy],
template: `
<div *if="testingPlainComponents">
<div *ng-if="testingPlainComponents">
<dummy *for="#i of list"></dummy>
</div>
<div *if="testingWithDirectives">
<div *ng-if="testingWithDirectives">
<dummy dummy-decorator *for="#i of list"></dummy>
</div>
<div *if="testingDynamicComponents">
<div *ng-if="testingDynamicComponents">
<dynamic-dummy *for="#i of list"></dynamic-dummy>
</div>
`

View File

@ -3,7 +3,7 @@ import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'
import {PromiseWrapper} from 'angular2/src/facade/async';
import {ListWrapper} from 'angular2/src/facade/collection';
import {ScrollAreaComponent} from './scroll_area';
import {If, For} from 'angular2/directives';
import {NgIf, For} from 'angular2/directives';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {document} from 'angular2/src/facade/browser';
@ -14,7 +14,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
@Component({selector: 'scroll-app'})
@View({
directives: [ScrollAreaComponent, If, For],
directives: [ScrollAreaComponent, NgIf, For],
template: `
<div>
<div style="display: flex">

View File

@ -10,7 +10,7 @@ import 'package:angular2/src/test_lib/benchmark_util.dart';
<div style="display: flex">
<scroll-area scroll-top="scrollTop"></scroll-area>
</div>
<div ng-if="scrollAreas.length > 0">
<div *ng-if="scrollAreas.length > 0">
<p>Following tables are only here to add weight to the UI:</p>
<scroll-area ng-repeat="scrollArea in scrollAreas"></scroll-area>
</div>

View File

@ -50,8 +50,8 @@ main() {
selector: 'tree',
map: const {'data': '=>data'},
template: '<span> {{data.value}}'
'<span ng-if="data.right != null"><tree data=data.right></span>'
'<span ng-if="data.left != null"><tree data=data.left></span>'
'<span *ng-if="data.right != null"><tree data=data.right></span>'
'<span *ng-if="data.left != null"><tree data=data.left></span>'
'</span>')
class TreeComponent {
var data;

View File

@ -23,7 +23,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
<div>
<label>Title:</label> <br/>
<input type="text" control="title"/>
<div *if="! header.controls.title.valid && header.controls.title.dirty">
<div *ng-if="! header.controls.title.valid && header.controls.title.dirty">
Title is required
</div>
</div>
@ -31,7 +31,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
<div>
<label>Description:</label> <br/>
<textarea control="description"></textarea>
<div *if="! header.controls.description.valid && header.controls.description.dirty">
<div *ng-if="! header.controls.description.valid && header.controls.description.dirty">
Description is required
</div>
</div>
@ -79,7 +79,7 @@ class HeaderFields {
<option value="checkbox">Checkbox</option>
<option value="textarea">Textarea</option>
</select>
<div *if="! question.controls.type.valid && question.controls.type.dirty">
<div *ng-if="! question.controls.type.valid && question.controls.type.dirty">
Type is required
</div>
</div>
@ -87,15 +87,15 @@ class HeaderFields {
<div>
<label>Question:</label> <br/>
<input type="text" control="questionText">
<div *if="! question.controls.questionText.valid && question.controls.questionText.dirty">
<div *ng-if="! question.controls.questionText.valid && question.controls.questionText.dirty">
Question is required
</div>
</div>
<div *if="question.contains('responseLength')">
<div *ng-if="question.contains('responseLength')">
<label>Response Length:</label> <br/>
<input type="number" control="responseLength">
<div *if="! question.controls.responseLength.valid && question.controls.responseLength.dirty">
<div *ng-if="! question.controls.responseLength.valid && question.controls.responseLength.dirty">
Length is required
</div>
</div>