iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(directives): Drop ng- prefix from all angular directives and rename NgRepeat to Foreach

Browse Source 
fixes #532

Closes #539
This commit is contained in:
Marc Laval
2015-02-04 22:27:31 +01:00
committed by Misko Hevery
parent 63f23ec0b6
commit 6bfa48bc64
18 changed files with 158 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/angular2/test/directives/ng_repeat_spec.js → modules/angular2/test/directives/foreach_spec.js
Vendored
+11 -18
View File
@@ -6,7 +6,6 @@ import {Injector} from 'angular2/di';
import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/change_detection';
import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
import {OnChange} from 'angular2/src/core/compiler/interfaces';
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
@@ -15,20 +14,14 @@ import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
import {ViewPort} from 'angular2/src/core/compiler/viewport';
import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
import {NgRepeat} from 'angular2/src/directives/ng_repeat';
import {Foreach} from 'angular2/src/directives/foreach';
export function main() {
describe('ng-repeat', () => {
describe('foreach', () => {
var view, cd, compiler, component;
beforeEach(() => {
compiler = new Compiler(
dynamicChangeDetection,
null,
new DirectiveMetadataReader(),
new Parser(new Lexer()),
new CompilerCache(),
new NativeShadowDomStrategy()
);
compiler = new Compiler(dynamicChangeDetection, null, new DirectiveMetadataReader(),
new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
});
function createView(pv) {
@@ -42,7 +35,7 @@ export function main() {
return compiler.compile(TestComponent, el(template));
}
var TEMPLATE = '<div><copy-me template="ng-repeat #item in items">{{item.toString()}};</copy-me></div>';
var TEMPLATE = '<div><copy-me template="foreach #item in items">{{item.toString()}};</copy-me></div>';
it('should reflect initial elements', (done) => {
compileWithTemplate(TEMPLATE).then((pv) => {
@@ -109,7 +102,7 @@ export function main() {
});
it('should iterate over an array of objects', () => {
compileWithTemplate('<ul><li template="ng-repeat #item in items">{{item["name"]}};</li></ul>').then((pv) => {
compileWithTemplate('<ul><li template="foreach #item in items">{{item["name"]}};</li></ul>').then((pv) => {
createView(pv);
// INIT
@@ -133,7 +126,7 @@ export function main() {
});
it('should gracefully handle nulls', (done) => {
compileWithTemplate('<ul><li template="ng-repeat #item in null">{{item}};</li></ul>').then((pv) => {
compileWithTemplate('<ul><li template="foreach #item in null">{{item}};</li></ul>').then((pv) => {
createView(pv);
cd.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('');
@@ -183,8 +176,8 @@ export function main() {
it('should repeat over nested arrays', (done) => {
compileWithTemplate(
'<div><div template="ng-repeat #item in items">' +
'<div template="ng-repeat #subitem in item">' +
'<div><div template="foreach #item in items">' +
'<div template="foreach #subitem in item">' +
'{{subitem}};' +
'</div>|</div></div>'
).then((pv) => {
@@ -201,7 +194,7 @@ export function main() {
it('should display indices correctly', (done) => {
var INDEX_TEMPLATE =
'<div><copy-me template="ng-repeat: var item in items; var i=index">{{i.toString()}}</copy-me></div>';
'<div><copy-me template="foreach: var item in items; var i=index">{{i.toString()}}</copy-me></div>';
compileWithTemplate(INDEX_TEMPLATE).then((pv) => {
createView(pv);
component.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
@@ -228,7 +221,7 @@ class Foo {
selector: 'test-cmp',
template: new TemplateConfig({
inline: '', // each test swaps with a custom template.
directives: [NgRepeat]
directives: [Foreach]
})
})
class TestComponent {
modules/angular2/test/directives/ng_if_spec.js → modules/angular2/test/directives/if_spec.js
Vendored
+19 -24
View File
@@ -1,4 +1,4 @@
import {describe, xit, it, expect, beforeEach, ddescribe, iit, IS_DARTIUM, el} from 'angular2/test_lib';
import {describe, xit, it, expect, beforeEach, ddescribe, iit, el, IS_DARTIUM} from 'angular2/test_lib';
import {DOM} from 'angular2/src/facade/dom';
@@ -12,19 +12,14 @@ import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_str
import {Component} from 'angular2/src/core/annotations/annotations';
import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
import {NgIf} from 'angular2/src/directives/ng_if';
import {If} from 'angular2/src/directives/if';
export function main() {
describe('ng-if', () => {
describe('if directive', () => {
var view, cd, compiler, component;
beforeEach(() => {
compiler = new Compiler(
dynamicChangeDetection,
null,
new DirectiveMetadataReader(),
new Parser(new Lexer()),
new CompilerCache(),
new NativeShadowDomStrategy());
compiler = new Compiler(dynamicChangeDetection, null, new DirectiveMetadataReader(),
new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
});
function createView(pv) {
@@ -39,7 +34,7 @@ export function main() {
}
it('should work in a template attribute', (done) => {
compileWithTemplate('<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if booleanCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@@ -50,7 +45,7 @@ export function main() {
});
it('should work in a template element', (done) => {
compileWithTemplate('<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>').then((pv) => {
compileWithTemplate('<div><template [if]="booleanCondition"><copy-me>hello2</copy-me></template></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@@ -61,7 +56,7 @@ export function main() {
});
it('should toggle node when condition changes', (done) => {
compileWithTemplate('<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if booleanCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
component.booleanCondition = false;
@@ -84,12 +79,12 @@ export function main() {
});
});
it('should update several nodes with ng-if', (done) => {
it('should update several nodes with if', (done) => {
var templateString =
'<div>' +
'<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>' +
'<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>' +
'</div>';
compileWithTemplate(templateString).then((pv) => {
createView(pv);
@@ -115,7 +110,7 @@ export function main() {
if (!IS_DARTIUM) {
it('should leave the element if the condition is a non-empty string (JS)', (done) => {
compileWithTemplate('<div><copy-me template="ng-if stringCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if stringCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@@ -126,7 +121,7 @@ export function main() {
});
it('should leave the element if the condition is an object (JS)', (done) => {
compileWithTemplate('<div><copy-me template="ng-if objectCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if objectCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@@ -137,7 +132,7 @@ export function main() {
});
it('should remove the element if the condition is null (JS)', (done) => {
compileWithTemplate('<div><copy-me template="ng-if nullCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if nullCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@@ -148,7 +143,7 @@ export function main() {
});
it('should not add the element twice if the condition goes from true to true (JS)', (done) => {
compileWithTemplate('<div><copy-me template="ng-if numberCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@@ -165,7 +160,7 @@ export function main() {
});
it('should not recreate the element if the condition goes from true to true (JS)', (done) => {
compileWithTemplate('<div><copy-me template="ng-if numberCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@@ -180,7 +175,7 @@ export function main() {
});
} else {
it('should not create the element if the condition is not a boolean (DART)', (done) => {
compileWithTemplate('<div><copy-me template="ng-if numberCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
expect(function(){cd.detectChanges();}).toThrowError();
expect(view.nodes[0].querySelectorAll('copy-me').length).toEqual(0);
@@ -197,7 +192,7 @@ export function main() {
selector: 'test-cmp',
template: new TemplateConfig({
inline: '', // each test swaps with a custom template.
directives: [NgIf]
directives: [If]
})
})
class TestComponent {
modules/angular2/test/directives/ng_non_bindable_spec.js → modules/angular2/test/directives/non_bindable_spec.js
Vendored
+8 -14
View File
@@ -8,20 +8,14 @@ import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_str
import {Decorator, Component} from 'angular2/src/core/annotations/annotations';
import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
import {NgElement} from 'angular2/src/core/dom/element';
import {NgNonBindable} from 'angular2/src/directives/ng_non_bindable';
import {NonBindable} from 'angular2/src/directives/non_bindable';
export function main() {
describe('ng-non-bindable', () => {
describe('non-bindable', () => {
var view, cd, compiler, component;
beforeEach(() => {
compiler = new Compiler(
dynamicChangeDetection,
null,
new DirectiveMetadataReader(),
new Parser(new Lexer()),
new CompilerCache(),
new NativeShadowDomStrategy()
);
compiler = new Compiler(dynamicChangeDetection,
null, new DirectiveMetadataReader(), new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
});
function createView(pv) {
@@ -36,7 +30,7 @@ export function main() {
}
it('should not interpolate children', (done) => {
var template = '<div>{{text}}<span ng-non-bindable>{{text}}</span></div>';
var template = '<div>{{text}}<span non-bindable>{{text}}</span></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
cd.detectChanges();
@@ -46,7 +40,7 @@ export function main() {
});
it('should ignore directives on child nodes', (done) => {
var template = '<div ng-non-bindable><span id=child test-dec>{{text}}</span></div>';
var template = '<div non-bindable><span id=child test-dec>{{text}}</span></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
cd.detectChanges();
@@ -57,7 +51,7 @@ export function main() {
});
it('should trigger directives on the same node', (done) => {
var template = '<div><span id=child ng-non-bindable test-dec>{{text}}</span></div>';
var template = '<div><span id=child non-bindable test-dec>{{text}}</span></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
cd.detectChanges();
@@ -73,7 +67,7 @@ export function main() {
selector: 'test-cmp',
template: new TemplateConfig({
inline: '', // each test swaps with a custom template.
directives: [NgNonBindable, TestDecorator]
directives: [NonBindable, TestDecorator]
})
})
class TestComponent {
modules/angular2/test/directives/ng_switch_spec.js → modules/angular2/test/directives/switch_spec.js
Vendored
+22 -28
View File
@@ -7,20 +7,14 @@ import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_meta
import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
import {Component} from 'angular2/src/core/annotations/annotations';
import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/src/directives/ng_switch';
import {Switch, SwitchWhen, SwitchDefault} from 'angular2/src/directives/switch';
export function main() {
describe('ng-switch', () => {
describe('switch', () => {
var view, cd, compiler, component;
beforeEach(() => {
compiler = new Compiler(
dynamicChangeDetection,
null,
new DirectiveMetadataReader(),
new Parser(new Lexer()),
new CompilerCache(),
new NativeShadowDomStrategy()
);
compiler = new Compiler(dynamicChangeDetection, null, new DirectiveMetadataReader(),
new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
});
function createView(pv) {
@@ -37,9 +31,9 @@ export function main() {
describe('switch value changes', () => {
it('should switch amongst when values', (done) => {
var template = '<div>' +
'<ul [ng-switch]="switchValue">' +
'<template [ng-switch-when]="\'a\'"><li>when a</li></template>' +
'<template [ng-switch-when]="\'b\'"><li>when b</li></template>' +
'<ul [switch]="switchValue">' +
'<template [switch-when]="\'a\'"><li>when a</li></template>' +
'<template [switch-when]="\'b\'"><li>when b</li></template>' +
'</ul></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
@@ -60,9 +54,9 @@ export function main() {
it('should switch amongst when values with fallback to default', (done) => {
var template = '<div>' +
'<ul [ng-switch]="switchValue">' +
'<li template="ng-switch-when \'a\'">when a</li>' +
'<li template="ng-switch-default">when default</li>' +
'<ul [switch]="switchValue">' +
'<li template="switch-when \'a\'">when a</li>' +
'<li template="switch-default">when default</li>' +
'</ul></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
@@ -83,13 +77,13 @@ export function main() {
it('should support multiple whens with the same value', (done) => {
var template = '<div>' +
'<ul [ng-switch]="switchValue">' +
'<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
'<template [ng-switch-when]="\'b\'"><li>when b1;</li></template>' +
'<template [ng-switch-when]="\'a\'"><li>when a2;</li></template>' +
'<template [ng-switch-when]="\'b\'"><li>when b2;</li></template>' +
'<template [ng-switch-default]><li>when default1;</li></template>' +
'<template [ng-switch-default]><li>when default2;</li></template>' +
'<ul [switch]="switchValue">' +
'<template [switch-when]="\'a\'"><li>when a1;</li></template>' +
'<template [switch-when]="\'b\'"><li>when b1;</li></template>' +
'<template [switch-when]="\'a\'"><li>when a2;</li></template>' +
'<template [switch-when]="\'b\'"><li>when b2;</li></template>' +
'<template [switch-default]><li>when default1;</li></template>' +
'<template [switch-default]><li>when default2;</li></template>' +
'</ul></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
@@ -112,10 +106,10 @@ export function main() {
describe('when values changes', () => {
it('should switch amongst when values', (done) => {
var template = '<div>' +
'<ul [ng-switch]="switchValue">' +
'<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
'<template [ng-switch-when]="when2"><li>when 2;</li></template>' +
'<template [ng-switch-default]><li>when default;</li></template>' +
'<ul [switch]="switchValue">' +
'<template [switch-when]="when1"><li>when 1;</li></template>' +
'<template [switch-when]="when2"><li>when 2;</li></template>' +
'<template [switch-default]><li>when default;</li></template>' +
'</ul></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
@@ -153,7 +147,7 @@ export function main() {
selector: 'test-cmp',
template: new TemplateConfig({
inline: '', // each test swaps with a custom template.
directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
directives: [Switch, SwitchWhen, SwitchDefault]
})
})
class TestComponent {