<!DOCTYPE html>
<html>
<head>
<script>jasmineOrMocha = true</script>
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.2/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.2/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.2/boot.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-mocks.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/testing.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/http.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/upgrade.js"></script>
<script>
System.import('angular2/src/platform/browser/browser_adapter')
.then(function(browser_adapter) {
browser_adapter.BrowserDomAdapter.makeCurrent();
System.import('app').then(function() {
window.onload();
});
});
</script>
</head>
<body>
<div><ng1 value="'NG1_VALUE'"></ng1></div>
<div><ng2></ng2></div>
</body>
</html>
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src"
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
import {bootstrap, View} from 'angular2/platform/browser';
import {
Component,
Injectable,
provide
} from 'angular2/core';
import {
HTTP_PROVIDERS,
Http,
Response,
ResponseOptions,
XHRBackend
} from 'angular2/http';
import {beforeEachProviders} from 'angular2/testing';
import {DirectiveResolver} from 'angular2/compiler';
import {MockBackend} from 'angular2/http/testing';
import {UpgradeAdapter} from 'angular2/upgrade';
const upgradeAdapter = new UpgradeAdapter();
/**
* NG1
*/
let ng1App = angular.module('ng1App', []);
ng1App.component('ng1', {
bindings: {
value: '='
},
template: `<span>NG1 => </span><span ng-bind="$ctrl.value"></span>`
});
class Ng1Service {
static $injects = [
'ngService'
];
constructor(private ng2Service) {
}
hello() {
return `Ng2 said: ${this.ng2Service.hello()}`;
}
}
ng1App.service('ng1Service', Ng1Service);
/**
* NG2
*/
@Injectable()
class Ng2Service {
hello() {
return 'hello';
}
}
ng1App.factory('ng2Service', upgradeAdapter.downgradeNg2Provider(Ng2Service));
/**
* Testing.
*/
import {
async,
beforeEach,
describe,
it,
inject,
injectAsync,
setBaseTestProviders,
ComponentFixture,
TestComponentBuilder
} from 'angular2/testing';
import {
TEST_BROWSER_PLATFORM_PROVIDERS,
TEST_BROWSER_APPLICATION_PROVIDERS
} from 'angular2/platform/testing/browser';
setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
describe('angular2 upgrade', () => {
it('should load downgrade ng2 services', () => {
var resolve;
var promise = new Promise(_resolve => {
resolve = _resolve;
})
upgradeAdapter.addProvider(Ng2Service);
upgradeAdapter.bootstrap(document.body, ['ng1App'])
.ready((upgradeAdapterRef) => {
expect(upgradeAdapterRef.ng1Injector.get('ng1Service').hello())
.toEqual('Ng2 said: hello');
resolve();
});
return promise;
});
});