exportedComponents).hasOwnProperty(name)) {
@@ -105,7 +105,7 @@ export class ExportedNg1Component {
}
}
-class Ng1ComponentFacade implements OnChanges, DoCheck {
+class UpgradeNg1ComponentAdapter implements OnChanges, DoCheck {
componentScope: angular.IScope = null;
checkLastValues: any[] = [];
diff --git a/modules/upgrade/test/integration_spec.ts b/modules/upgrade/test/integration_spec.ts
index 19fdada5f3..d8a3146c96 100644
--- a/modules/upgrade/test/integration_spec.ts
+++ b/modules/upgrade/test/integration_spec.ts
@@ -11,95 +11,100 @@ import {
xit,
} from 'angular2/testing_internal';
-import {Component, View, Inject, EventEmitter} from 'angular2/angular2';
-import {createUpgradeModule, UpgradeModule} from 'upgrade/upgrade';
+import {Component, Inject, EventEmitter} from 'angular2/angular2';
+import {UpgradeAdapter} from 'upgrade/upgrade';
export function main() {
- describe('upgrade: ng1 to ng2', () => {
+ describe('adapter: ng1 to ng2', () => {
it('should have angular 1 loaded', () => expect(angular.version.major).toBe(1));
it('should instantiate ng2 in ng1 template and project content',
inject([AsyncTestCompleter], (async) => {
- var Ng2 = Component({selector: 'ng2'})
- .View({template: `{{ 'NG2' }}()`})
+ var ng1Module = angular.module('ng1', []);
+ var Ng2 = Component({selector: 'ng2', template: `{{ 'NG2' }}()`})
.Class({constructor: function() {}});
var element = html("{{ 'ng1[' }}~{{ 'ng-content' }}~{{ ']' }}
");
- var upgradeModule: UpgradeModule = createUpgradeModule();
- upgradeModule.importNg2Component(Ng2);
- upgradeModule.bootstrap(element).ready(() => {
- expect(document.body.textContent).toEqual("ng1[NG2(~ng-content~)]");
- async.done();
- });
+ var adapter: UpgradeAdapter = new UpgradeAdapter();
+ ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+ adapter.bootstrap(element, ['ng1'])
+ .ready(() => {
+ expect(document.body.textContent).toEqual("ng1[NG2(~ng-content~)]");
+ async.done();
+ });
}));
it('should instantiate ng1 in ng2 template and project content',
inject([AsyncTestCompleter], (async) => {
- var upgrMod: UpgradeModule = createUpgradeModule();
+ var adapter: UpgradeAdapter = new UpgradeAdapter();
+ var ng1Module = angular.module('ng1', []);
- var Ng2 = Component({selector: 'ng2-1'})
- .View({
- template: `{{ 'ng2(' }}{{'transclude'}}{{ ')' }}`,
- directives: [upgrMod.exportAsNg2Component('ng1')]
- })
- .Class({constructor: function() {}});
+ var Ng2 = Component({
+ selector: 'ng2',
+ template: `{{ 'ng2(' }}{{'transclude'}}{{ ')' }}`,
+ directives: [adapter.upgradeNg1Component('ng1')]
+ }).Class({constructor: function() {}});
- upgrMod.ng1Module.directive('ng1', () => {
+ ng1Module.directive('ng1', () => {
return {transclude: true, template: '{{ "ng1" }}()'};
});
- upgrMod.importNg2Component(Ng2);
+ ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
- var element = html("{{'ng1('}}{{')'}}
");
+ var element = html("{{'ng1('}}{{')'}}
");
- upgrMod.bootstrap(element).ready(() => {
- expect(document.body.textContent).toEqual("ng1(ng2(ng1(transclude)))");
- async.done();
- });
+ adapter.bootstrap(element, ['ng1'])
+ .ready(() => {
+ expect(document.body.textContent).toEqual("ng1(ng2(ng1(transclude)))");
+ async.done();
+ });
}));
describe('scope/component change-detection', () => {
it('should interleave scope and component expressions',
inject([AsyncTestCompleter], (async) => {
+ var ng1Module = angular.module('ng1', []);
var log = [];
var l = function(value) {
log.push(value);
return value + ';';
};
- var upgrMod: UpgradeModule = createUpgradeModule();
+ var adapter: UpgradeAdapter = new UpgradeAdapter();
- upgrMod.ng1Module.directive('ng1a', () => { return {template: "{{ l('ng1a') }}"}; });
- upgrMod.ng1Module.directive('ng1b', () => { return {template: "{{ l('ng1b') }}"}; });
- upgrMod.ng1Module.run(($rootScope) => {
+ ng1Module.directive('ng1a', () => { return {template: "{{ l('ng1a') }}"}; });
+ ng1Module.directive('ng1b', () => { return {template: "{{ l('ng1b') }}"}; });
+ ng1Module.run(($rootScope) => {
$rootScope.l = l;
$rootScope.reset = () => log.length = 0;
});
- upgrMod.importNg2Component(
- Component({selector: 'ng2'})
- .View({
- template: `{{l('2A')}}{{l('2B')}}{{l('2C')}}`,
- directives: [
- upgrMod.exportAsNg2Component('ng1a'),
- upgrMod.exportAsNg2Component('ng1b')
- ]
- })
- .Class({constructor: function() { this.l = l; }}));
+ var Ng2 =
+ Component({
+ selector: 'ng2',
+ template: `{{l('2A')}}{{l('2B')}}{{l('2C')}}`,
+ directives:
+ [adapter.upgradeNg1Component('ng1a'), adapter.upgradeNg1Component('ng1b')]
+ }).Class({constructor: function() { this.l = l; }});
+
+ ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
var element = html("{{reset(); l('1A');}}{{l('1B')}}{{l('1C')}}
");
- upgrMod.bootstrap(element).ready(() => {
- expect(document.body.textContent).toEqual("1A;2A;ng1a;2B;ng1b;2C;1C;");
- // https://github.com/angular/angular.js/issues/12983
- expect(log).toEqual(['1A', '1B', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']);
- async.done();
- });
+ adapter.bootstrap(element, ['ng1'])
+ .ready(() => {
+ expect(document.body.textContent).toEqual("1A;2A;ng1a;2B;ng1b;2C;1C;");
+ // https://github.com/angular/angular.js/issues/12983
+ expect(log).toEqual(['1A', '1B', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']);
+ async.done();
+ });
}));
});
describe('binding from ng1 to ng2', () => {
it('should bind properties, events', inject([AsyncTestCompleter], (async) => {
- var upgrMod: UpgradeModule = createUpgradeModule();
- upgrMod.ng1Module.run(($rootScope) => {
+ var adapter: UpgradeAdapter = new UpgradeAdapter();
+ var ng1Module = angular.module('ng1', []);
+
+ ng1Module.run(($rootScope) => {
$rootScope.dataA = 'A';
$rootScope.dataB = 'B';
$rootScope.modelA = 'initModelA';
@@ -107,7 +112,7 @@ export function main() {
$rootScope.eventA = '?';
$rootScope.eventB = '?';
});
- upgrMod.importNg2Component(
+ var Ng2 =
Component({
selector: 'ng2',
inputs: ['literal', 'interpolate', 'oneWayA', 'oneWayB', 'twoWayA', 'twoWayB'],
@@ -116,15 +121,12 @@ export function main() {
'eventB',
'twoWayAEmitter: twoWayAChange',
'twoWayBEmitter: twoWayBChange'
- ]
+ ],
+ template: "ignore: {{ignore}}; " +
+ "literal: {{literal}}; interpolate: {{interpolate}}; " +
+ "oneWayA: {{oneWayA}}; oneWayB: {{oneWayB}}; " +
+ "twoWayA: {{twoWayA}}; twoWayB: {{twoWayB}}; ({{onChangesCount}})"
})
- .View({
- template:
- "ignore: {{ignore}}; " +
- "literal: {{literal}}; interpolate: {{interpolate}}; " +
- "oneWayA: {{oneWayA}}; oneWayB: {{oneWayB}}; " +
- "twoWayA: {{twoWayA}}; twoWayB: {{twoWayB}}; ({{onChangesCount}})"
- })
.Class({
constructor: function() {
this.onChangesCount = 0;
@@ -185,7 +187,8 @@ export function main() {
throw new Error('Called too many times! ' + JSON.stringify(changes));
}
}
- }));
+ });
+ ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
var element = html(`
| modelA: {{modelA}}; modelB: {{modelB}}; eventA: {{eventA}}; eventB: {{eventB}};
`);
- upgrMod.bootstrap(element).ready(() => {
- expect(multiTrim(document.body.textContent))
- .toEqual(
- "ignore: -; " + "literal: Text; interpolate: Hello world; " +
- "oneWayA: A; oneWayB: B; twoWayA: initModelA; twoWayB: initModelB; (1) | " +
- "modelA: initModelA; modelB: initModelB; eventA: ?; eventB: ?;");
- setTimeout(() => {
- // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule
- // events, and so without this we would not see the events processed.
- expect(multiTrim(document.body.textContent))
- .toEqual("ignore: -; " + "literal: Text; interpolate: Hello world; " +
- "oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (3) | " +
- "modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;");
- async.done();
- });
- });
+ adapter.bootstrap(element, ['ng1'])
+ .ready(() => {
+ expect(multiTrim(document.body.textContent))
+ .toEqual(
+ "ignore: -; " + "literal: Text; interpolate: Hello world; " +
+ "oneWayA: A; oneWayB: B; twoWayA: initModelA; twoWayB: initModelB; (1) | " +
+ "modelA: initModelA; modelB: initModelB; eventA: ?; eventB: ?;");
+ setTimeout(() => {
+ // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule
+ // events, and so without this we would not see the events processed.
+ expect(multiTrim(document.body.textContent))
+ .toEqual("ignore: -; " + "literal: Text; interpolate: Hello world; " +
+ "oneWayA: A; oneWayB: B; twoWayA: newA; twoWayB: newB; (3) | " +
+ "modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;");
+ async.done();
+ });
+ });
}));
});
describe('binding from ng2 to ng1', () => {
it('should bind properties, events', inject([AsyncTestCompleter], (async) => {
- var upgrMod = createUpgradeModule();
+ var adapter = new UpgradeAdapter();
+ var ng1Module = angular.module('ng1', []);
+
var ng1 = function() {
return {
template: 'Hello {{fullName}}; A: {{dataA}}; B: {{dataB}}; | ',
@@ -233,17 +239,17 @@ export function main() {
}
}
};
- upgrMod.ng1Module.directive('ng1', ng1);
- var ng2 =
- Component({selector: 'ng2'})
- .View({
- template:
- '' +
- '' +
- '{{event}}-{{last}}, {{first}}',
- directives: [upgrMod.exportAsNg2Component('ng1')]
- })
+ ng1Module.directive('ng1', ng1);
+ var Ng2 =
+ Component({
+ selector: 'ng2',
+ template:
+ '' +
+ '' +
+ '{{event}}-{{last}}, {{first}}',
+ directives: [adapter.upgradeNg1Component('ng1')]
+ })
.Class({
constructor: function() {
this.first = 'Victor';
@@ -251,18 +257,53 @@ export function main() {
this.event = '?';
}
});
- upgrMod.importNg2Component(ng2);
+ ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
var element = html(`
`);
- upgrMod.bootstrap(element).ready(() => {
- // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule
- // events, and so without this we would not see the events processed.
- setTimeout(() => {
- expect(multiTrim(document.body.textContent))
- .toEqual(
- "Hello SAVKIN, Victor; A: VICTOR; B: SAVKIN; | Hello TEST; A: First; B: Last; | WORKS-SAVKIN, Victor");
- async.done();
- }, 0);
+ adapter.bootstrap(element, ['ng1'])
+ .ready(() => {
+ // we need to do setTimeout, because the EventEmitter uses setTimeout to schedule
+ // events, and so without this we would not see the events processed.
+ setTimeout(() => {
+ expect(multiTrim(document.body.textContent))
+ .toEqual(
+ "Hello SAVKIN, Victor; A: VICTOR; B: SAVKIN; | Hello TEST; A: First; B: Last; | WORKS-SAVKIN, Victor");
+ async.done();
+ }, 0);
+ });
+ }));
+ });
+
+ describe('examples', () => {
+ it('should verify UpgradeAdapter example', inject([AsyncTestCompleter], (async) => {
+ var adapter = new UpgradeAdapter();
+ var module = angular.module('myExample', []);
+
+ module.directive('ng1', function() {
+ return {
+ scope: {title: '@'},
+ transclude: true, template: 'ng1[Hello {{title}}!]()'
+ };
});
+
+
+ var Ng2 =
+ Component({
+ selector: 'ng2',
+ inputs: ['name'],
+ template: 'ng2[transclude]()',
+ directives: [adapter.upgradeNg1Component('ng1')]
+ }).Class({constructor: function() {}});
+
+ module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+
+ document.body.innerHTML = 'project';
+
+ adapter.bootstrap(document.body, ['myExample'])
+ .ready(function() {
+ expect(multiTrim(document.body.textContent))
+ .toEqual("ng2[ng1[Hello World!](transclude)](project)");
+ async.done();
+ });
}));
});
diff --git a/modules/upgrade/upgrade.ts b/modules/upgrade/upgrade.ts
index 60af6cdc3f..9ae1c1f71c 100644
--- a/modules/upgrade/upgrade.ts
+++ b/modules/upgrade/upgrade.ts
@@ -1 +1 @@
-export {createUpgradeModule, UpgradeModule} from './src/upgrade_module';
+export {UpgradeAdapter} from './src/upgrade_adapter';