Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 7decccf

Browse files
authored
docs(upgrade): update NgUpgrade with AoT, router, unit tests (#2803)
Followup from #2781
1 parent d0ab5f8 commit 7decccf

File tree

184 files changed

+2278
-144
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

184 files changed

+2278
-144
lines changed

public/docs/_examples/.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,3 @@ protractor-helpers.js
1515
**/ts/**/*.js
1616
**/js-es6*/**/*.js
1717
**/ts-snippets/**/*.js
18-
!**/systemjs.config.extras.js

public/docs/_examples/_boilerplate/src/systemjs.config.js

-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@
2323
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
2424
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
2525
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
26-
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
27-
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
2826

2927
// other libraries
3028
'rxjs': 'npm:rxjs',

public/docs/_examples/upgrade-module/e2e-spec.ts

+19-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ describe('Upgrade Tests', function () {
9898
expect(element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!');
9999
});
100100

101-
xit('has outputs', function () {
101+
it('has outputs', function () {
102102
element.all(by.buttonText('Delete')).first().click();
103103
expect(element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!');
104104
});
@@ -161,4 +161,22 @@ describe('Upgrade Tests', function () {
161161

162162
});
163163

164+
describe('Dividing routes', function() {
165+
166+
beforeAll(function () {
167+
browser.get('/index-divide-routes.html');
168+
});
169+
170+
it('allows ng1 routes', function () {
171+
browser.get('/index-divide-routes.html#/villain');
172+
expect(element(by.css('h2')).getText()).toBe('Mr. Nice - No More Mr. Nice Guy');
173+
});
174+
175+
it('allows ng2 routes', function () {
176+
browser.get('/index-divide-routes.html#/hero');
177+
expect(element(by.css('h2')).getText()).toBe('Windstorm - Specific powers of controlling winds');
178+
});
179+
180+
});
181+
164182
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
**/*.js
2+
aot/**/*
3+
!aot/bs-config.json
4+
!aot/index.html
5+
!copy-dist-files.js
6+
!rollup-config.js
7+
!systemjs.config.1.js
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// #docregion
2+
import { HeroesService } from './heroes.service';
3+
4+
export function heroesServiceFactory(i: any) {
5+
return i.get('heroes');
6+
}
7+
8+
export const heroesServiceProvider = {
9+
provide: HeroesService,
10+
useFactory: heroesServiceFactory,
11+
deps: ['$injector']
12+
};

public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/app.module.ts

+5-7
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,17 @@ import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
66

77
import { HeroDetailComponent } from './hero-detail.component';
88
import { HeroesService } from './heroes.service';
9-
109
// #docregion register
10+
import { heroesServiceProvider } from './ajs-upgraded-providers';
11+
1112
@NgModule({
1213
imports: [
1314
BrowserModule,
1415
UpgradeModule
1516
],
16-
providers: [{
17-
provide: 'heroes',
18-
useFactory: (i: any) => i.get('heroes'),
19-
deps: ['$injector']
20-
}],
17+
providers: [
18+
heroesServiceProvider
19+
],
2120
// #enddocregion register
2221
declarations: [
2322
HeroDetailComponent
@@ -39,7 +38,6 @@ angular.module('heroApp', [])
3938
downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
4039
);
4140

42-
4341
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
4442
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
4543
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});

public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/hero-detail.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// #docregion
2-
import { Component, Inject } from '@angular/core';
2+
import { Component } from '@angular/core';
33
import { HeroesService } from './heroes.service';
44
import { Hero } from '../hero';
55

@@ -11,7 +11,7 @@ import { Hero } from '../hero';
1111
})
1212
export class HeroDetailComponent {
1313
hero: Hero;
14-
constructor(@Inject('heroes') heroes: HeroesService) {
14+
constructor(heroes: HeroesService) {
1515
this.hero = heroes.get()[0];
1616
}
1717
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'my-app',
6+
template: `
7+
<router-outlet></router-outlet>
8+
<div ng-view></div>
9+
`,
10+
})
11+
export class AppComponent { }
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// #docregion
2+
declare var angular: angular.IAngularStatic;
3+
import { NgModule } from '@angular/core';
4+
import { BrowserModule } from '@angular/platform-browser';
5+
import { UpgradeModule } from '@angular/upgrade/static';
6+
7+
import { HeroModule } from './hero.module';
8+
9+
// #docregion router-config
10+
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
11+
import { RouterModule, UrlHandlingStrategy, UrlTree } from '@angular/router';
12+
import { AppComponent } from './app.component';
13+
14+
class HybridUrlHandlingStrategy implements UrlHandlingStrategy {
15+
// use only process the `/hero` url
16+
shouldProcessUrl(url: UrlTree) { return url.toString().startsWith('/hero'); }
17+
extract(url: UrlTree) { return url; }
18+
merge(url: UrlTree, whole: UrlTree) { return url; }
19+
}
20+
21+
@NgModule({
22+
imports: [
23+
BrowserModule,
24+
UpgradeModule,
25+
HeroModule,
26+
RouterModule.forRoot([])
27+
],
28+
providers: [
29+
// use hash location strategy
30+
{ provide: LocationStrategy, useClass: HashLocationStrategy },
31+
// use custom url handling strategy
32+
{ provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy }
33+
],
34+
declarations: [ AppComponent ],
35+
bootstrap: [ AppComponent ]
36+
})
37+
export class AppModule { }
38+
// #enddocregion router-config
39+
40+
import { Villain } from '../villain';
41+
42+
export const villainDetail = {
43+
template: `
44+
<h1>Villain detail</h1>
45+
<h2>{{$ctrl.villain.name}} - {{$ctrl.villain.description}}</h2>
46+
`,
47+
controller: function() {
48+
this.villain = new Villain(1, 'Mr. Nice', 'No More Mr. Nice Guy');
49+
}
50+
};
51+
52+
angular.module('heroApp', ['ngRoute'])
53+
.component('villainDetail', villainDetail)
54+
.config(['$locationProvider', '$routeProvider',
55+
function config($locationProvider: angular.ILocationProvider,
56+
$routeProvider: angular.route.IRouteProvider) {
57+
// #docregion ajs-route
58+
$routeProvider
59+
.when('/villain', { template: '<villain-detail></villain-detail>' });
60+
// #enddocregion ajs-route
61+
}
62+
]);
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
import { Hero } from '../hero';
4+
5+
@Component({
6+
template: `
7+
<h1>Hero detail</h1>
8+
<h2>{{hero.name}} - {{hero.description}}</h2>
9+
`
10+
})
11+
export class HeroDetailComponent {
12+
hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');
13+
}
14+
15+
import { NgModule } from '@angular/core';
16+
import { CommonModule } from '@angular/common';
17+
import { RouterModule } from '@angular/router';
18+
19+
@NgModule({
20+
imports: [
21+
CommonModule,
22+
// #docregion a-route
23+
RouterModule.forChild([
24+
{ path: 'hero', children: [
25+
{ path: '', component: HeroDetailComponent },
26+
] },
27+
])
28+
// #enddocregion a-route
29+
],
30+
declarations: [ HeroDetailComponent ]
31+
})
32+
export class HeroModule {}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// #docregion
2+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3+
import { UpgradeModule } from '@angular/upgrade/static';
4+
5+
import { AppModule } from './app.module';
6+
7+
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
8+
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
9+
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
10+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export class Villain {
2+
constructor(public id: number,
3+
public name: string,
4+
public description?: string) { }
5+
}

public/docs/_examples/upgrade-module/ts/src/index-a-to-ajs-providers.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<script src="node_modules/zone.js/dist/zone.js"></script>
1616
<script src="node_modules/systemjs/dist/system.src.js"></script>
1717

18-
<script src="systemjs.config.js"></script>
18+
<script src="systemjs.config.1.js"></script>
1919
<script>
2020
System.import('app/a-to-ajs-providers/app.module')
2121
.then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-a-to-ajs-transclusion.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<script src="node_modules/zone.js/dist/zone.js"></script>
1616
<script src="node_modules/systemjs/dist/system.src.js"></script>
1717

18-
<script src="systemjs.config.js"></script>
18+
<script src="systemjs.config.1.js"></script>
1919
<script>
2020
System.import('app/a-to-ajs-transclusion/app.module')
2121
.then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-ajs-a-hybrid-bootstrap.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<script src="node_modules/zone.js/dist/zone.js"></script>
1616
<script src="node_modules/systemjs/dist/system.src.js"></script>
1717

18-
<script src="systemjs.config.js"></script>
18+
<script src="systemjs.config.1.js"></script>
1919
<script>
2020
System.import('app/ajs-a-hybrid-bootstrap/app.module')
2121
.then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-ajs-to-a-projection.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<script src="node_modules/zone.js/dist/zone.js"></script>
1616
<script src="node_modules/systemjs/dist/system.src.js"></script>
1717

18-
<script src="systemjs.config.js"></script>
18+
<script src="systemjs.config.1.js"></script>
1919
<script>
2020
System.import('app/ajs-to-a-projection/app.module')
2121
.then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-ajs-to-a-providers.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<script src="node_modules/zone.js/dist/zone.js"></script>
1616
<script src="node_modules/systemjs/dist/system.src.js"></script>
1717

18-
<script src="systemjs.config.js"></script>
18+
<script src="systemjs.config.1.js"></script>
1919
<script>
2020
System.import('app/ajs-to-a-providers/app.module')
2121
.then(null, console.error.bind(console));
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<title>Angular 2 Upgrade</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="styles.css">
8+
9+
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
10+
<script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
11+
12+
<!-- Polyfills for older browsers -->
13+
<script src="node_modules/core-js/client/shim.min.js"></script>
14+
15+
<script src="node_modules/zone.js/dist/zone.js"></script>
16+
<script src="node_modules/reflect-metadata/Reflect.js"></script>
17+
<script src="node_modules/systemjs/dist/system.src.js"></script>
18+
19+
<script src="systemjs.config.1.js"></script>
20+
<script>
21+
System.import('app/divide-routes/main')
22+
.then(null, console.error.bind(console));
23+
</script>
24+
</head>
25+
26+
<!--#docregion body-->
27+
<body>
28+
<my-app>Loading...</my-app>
29+
</body>
30+
<!--#enddocregion body-->
31+
</html>

public/docs/_examples/upgrade-module/ts/src/index-downgrade-io.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<script src="node_modules/zone.js/dist/zone.js"></script>
1616
<script src="node_modules/systemjs/dist/system.src.js"></script>
1717

18-
<script src="systemjs.config.js"></script>
18+
<script src="systemjs.config.1.js"></script>
1919
<script>
2020
System.import('app/downgrade-io/app.module')
2121
.then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-downgrade-static.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<script src="node_modules/zone.js/dist/zone.js"></script>
1616
<script src="node_modules/systemjs/dist/system.src.js"></script>
1717

18-
<script src="systemjs.config.js"></script>
18+
<script src="systemjs.config.1.js"></script>
1919
<script>
2020
System.import('app/downgrade-static/app.module')
2121
.then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-upgrade-io.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<script src="node_modules/zone.js/dist/zone.js"></script>
1616
<script src="node_modules/systemjs/dist/system.src.js"></script>
1717

18-
<script src="systemjs.config.js"></script>
18+
<script src="systemjs.config.1.js"></script>
1919
<script>
2020
System.import('app/upgrade-io/app.module')
2121
.then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-upgrade-static.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<script src="node_modules/zone.js/dist/zone.js"></script>
1616
<script src="node_modules/systemjs/dist/system.src.js"></script>
1717

18-
<script src="systemjs.config.js"></script>
18+
<script src="systemjs.config.1.js"></script>
1919
<script>
2020
System.import('app/upgrade-static/app.module')
2121
.then(null, console.error.bind(console));
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* System configuration for Angular samples
3+
* Adjust as necessary for your application needs.
4+
*/
5+
(function (global) {
6+
System.config({
7+
paths: {
8+
// paths serve as alias
9+
'npm:': 'node_modules/'
10+
},
11+
// map tells the System loader where to look for things
12+
map: {
13+
// our app is within the app folder
14+
app: 'app',
15+
// angular bundles
16+
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
17+
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
18+
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
19+
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
20+
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
21+
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
22+
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
23+
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
24+
// #docregion upgrade-static-umd
25+
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
26+
// #enddocregion upgrade-static-umd
27+
28+
// other libraries
29+
'rxjs': 'npm:rxjs',
30+
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
31+
},
32+
// packages tells the System loader how to load when no filename and/or no extension
33+
packages: {
34+
app: {
35+
main: './main.js',
36+
defaultExtension: 'js'
37+
},
38+
rxjs: {
39+
defaultExtension: 'js'
40+
}
41+
}
42+
});
43+
})(this);

0 commit comments

Comments
 (0)