honeymoose/Angular-Cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(upgrade): update NgUpgrade with AoT, router, unit tests (#2803)

Browse Source 
Followup from #2781
This commit is contained in:
Filipe Silva
2017-02-13 16:45:37 +00:00
committed by GitHub
parent d0ab5f8f0b
commit 7decccfe1b
184 changed files with 2288 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/docs/_examples/.gitignore
-1
View File
@@ -15,4 +15,3 @@ protractor-helpers.js
**/ts/**/*.js
**/js-es6*/**/*.js
**/ts-snippets/**/*.js
!**/systemjs.config.extras.js
public/docs/_examples/_boilerplate/src/systemjs.config.js
-2
View File
@@ -23,8 +23,6 @@
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
public/docs/_examples/upgrade-module/e2e-spec.ts
+19 -1
View File
@@ -98,7 +98,7 @@ describe('Upgrade Tests', function () {
expect(element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!');
});
xit('has outputs', function () {
it('has outputs', function () {
element.all(by.buttonText('Delete')).first().click();
expect(element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!');
});
@@ -161,4 +161,22 @@ describe('Upgrade Tests', function () {
});
describe('Dividing routes', function() {
beforeAll(function () {
browser.get('/index-divide-routes.html');
});
it('allows ng1 routes', function () {
browser.get('/index-divide-routes.html#/villain');
expect(element(by.css('h2')).getText()).toBe('Mr. Nice - No More Mr. Nice Guy');
});
it('allows ng2 routes', function () {
browser.get('/index-divide-routes.html#/hero');
expect(element(by.css('h2')).getText()).toBe('Windstorm - Specific powers of controlling winds');
});
});
});
public/docs/_examples/upgrade-module/ts/.gitignore
+7
View File
@@ -0,0 +1,7 @@
**/*.js
aot/**/*
!aot/bs-config.json
!aot/index.html
!copy-dist-files.js
!rollup-config.js
!systemjs.config.1.js
public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts
+12
View File
@@ -0,0 +1,12 @@
// #docregion
import { HeroesService } from './heroes.service';
export function heroesServiceFactory(i: any) {
return i.get('heroes');
}
export const heroesServiceProvider = {
provide: HeroesService,
useFactory: heroesServiceFactory,
deps: ['$injector']
};
public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/app.module.ts
+5 -7
View File
@@ -6,18 +6,17 @@ import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesService } from './heroes.service';
// #docregion register
import { heroesServiceProvider } from './ajs-upgraded-providers';
@NgModule({
imports: [
BrowserModule,
UpgradeModule
],
providers: [{
provide: 'heroes',
useFactory: (i: any) => i.get('heroes'),
deps: ['$injector']
}],
providers: [
heroesServiceProvider
],
// #enddocregion register
declarations: [
HeroDetailComponent
@@ -39,7 +38,6 @@ angular.module('heroApp', [])
downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
);
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
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
View File
@@ -1,5 +1,5 @@
// #docregion
import { Component, Inject } from '@angular/core';
import { Component } from '@angular/core';
import { HeroesService } from './heroes.service';
import { Hero } from '../hero';
@@ -11,7 +11,7 @@ import { Hero } from '../hero';
})
export class HeroDetailComponent {
hero: Hero;
constructor(@Inject('heroes') heroes: HeroesService) {
constructor(heroes: HeroesService) {
this.hero = heroes.get()[0];
}
}
public/docs/_examples/upgrade-module/ts/src/app/divide-routes/app.component.ts
+11
View File
@@ -0,0 +1,11 @@
// #docregion
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
<div ng-view></div>
`,
})
export class AppComponent { }
public/docs/_examples/upgrade-module/ts/src/app/divide-routes/app.module.ts
+62
View File
@@ -0,0 +1,62 @@
// #docregion
declare var angular: angular.IAngularStatic;
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { HeroModule } from './hero.module';
// #docregion router-config
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { RouterModule, UrlHandlingStrategy, UrlTree } from '@angular/router';
import { AppComponent } from './app.component';
class HybridUrlHandlingStrategy implements UrlHandlingStrategy {
// use only process the `/hero` url
shouldProcessUrl(url: UrlTree) { return url.toString().startsWith('/hero'); }
extract(url: UrlTree) { return url; }
merge(url: UrlTree, whole: UrlTree) { return url; }
}
@NgModule({
imports: [
BrowserModule,
UpgradeModule,
HeroModule,
RouterModule.forRoot([])
],
providers: [
// use hash location strategy
{ provide: LocationStrategy, useClass: HashLocationStrategy },
// use custom url handling strategy
{ provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy }
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
// #enddocregion router-config
import { Villain } from '../villain';
export const villainDetail = {
template: `
<h1>Villain detail</h1>
<h2>{{$ctrl.villain.name}} - {{$ctrl.villain.description}}</h2>
`,
controller: function() {
this.villain = new Villain(1, 'Mr. Nice', 'No More Mr. Nice Guy');
}
};
angular.module('heroApp', ['ngRoute'])
.component('villainDetail', villainDetail)
.config(['$locationProvider', '$routeProvider',
function config($locationProvider: angular.ILocationProvider,
$routeProvider: angular.route.IRouteProvider) {
// #docregion ajs-route
$routeProvider
.when('/villain', { template: '<villain-detail></villain-detail>' });
// #enddocregion ajs-route
}
]);
public/docs/_examples/upgrade-module/ts/src/app/divide-routes/hero.module.ts
+32
View File
@@ -0,0 +1,32 @@
// #docregion
import { Component } from '@angular/core';
import { Hero } from '../hero';
@Component({
template: `
<h1>Hero detail</h1>
<h2>{{hero.name}} - {{hero.description}}</h2>
`
})
export class HeroDetailComponent {
hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
CommonModule,
// #docregion a-route
RouterModule.forChild([
{ path: 'hero', children: [
{ path: '', component: HeroDetailComponent },
] },
])
// #enddocregion a-route
],
declarations: [ HeroDetailComponent ]
})
export class HeroModule {}
public/docs/_examples/upgrade-module/ts/src/app/divide-routes/main.ts
+10
View File
@@ -0,0 +1,10 @@
// #docregion
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
});
public/docs/_examples/upgrade-module/ts/src/app/villain.ts
+5
View File
@@ -0,0 +1,5 @@
export class Villain {
constructor(public id: number,
public name: string,
public description?: string) { }
}
public/docs/_examples/upgrade-module/ts/src/index-a-to-ajs-providers.html
+1 -1
View File
@@ -15,7 +15,7 @@
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="systemjs.config.1.js"></script>
<script>
System.import('app/a-to-ajs-providers/app.module')
.then(null, console.error.bind(console));
public/docs/_examples/upgrade-module/ts/src/index-a-to-ajs-transclusion.html
+1 -1
View File
@@ -15,7 +15,7 @@
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="systemjs.config.1.js"></script>
<script>
System.import('app/a-to-ajs-transclusion/app.module')
.then(null, console.error.bind(console));
public/docs/_examples/upgrade-module/ts/src/index-ajs-a-hybrid-bootstrap.html
+1 -1
View File
@@ -15,7 +15,7 @@
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="systemjs.config.1.js"></script>
<script>
System.import('app/ajs-a-hybrid-bootstrap/app.module')
.then(null, console.error.bind(console));
public/docs/_examples/upgrade-module/ts/src/index-ajs-to-a-projection.html
+1 -1
View File
@@ -15,7 +15,7 @@
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="systemjs.config.1.js"></script>
<script>
System.import('app/ajs-to-a-projection/app.module')
.then(null, console.error.bind(console));
public/docs/_examples/upgrade-module/ts/src/index-ajs-to-a-providers.html
+1 -1
View File
@@ -15,7 +15,7 @@
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="systemjs.config.1.js"></script>
<script>
System.import('app/ajs-to-a-providers/app.module')
.then(null, console.error.bind(console));
public/docs/_examples/upgrade-module/ts/src/index-divide-routes.html
+31
View File
@@ -0,0 +1,31 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Angular 2 Upgrade</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
<!-- Polyfills for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.1.js"></script>
<script>
System.import('app/divide-routes/main')
.then(null, console.error.bind(console));
</script>
</head>
<!--#docregion body-->
<body>
<my-app>Loading...</my-app>
</body>
<!--#enddocregion body-->
</html>
public/docs/_examples/upgrade-module/ts/src/index-downgrade-io.html
+1 -1
View File
@@ -15,7 +15,7 @@
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="systemjs.config.1.js"></script>
<script>
System.import('app/downgrade-io/app.module')
.then(null, console.error.bind(console));
public/docs/_examples/upgrade-module/ts/src/index-downgrade-static.html
+1 -1
View File
@@ -15,7 +15,7 @@
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="systemjs.config.1.js"></script>
<script>
System.import('app/downgrade-static/app.module')
.then(null, console.error.bind(console));
public/docs/_examples/upgrade-module/ts/src/index-upgrade-io.html
+1 -1
View File
@@ -15,7 +15,7 @@
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="systemjs.config.1.js"></script>
<script>
System.import('app/upgrade-io/app.module')
.then(null, console.error.bind(console));
public/docs/_examples/upgrade-module/ts/src/index-upgrade-static.html
+1 -1
View File
@@ -15,7 +15,7 @@
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="systemjs.config.1.js"></script>
<script>
System.import('app/upgrade-static/app.module')
.then(null, console.error.bind(console));
public/docs/_examples/upgrade-module/ts/src/systemjs.config.1.js
+43
View File
@@ -0,0 +1,43 @@
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// #docregion upgrade-static-umd
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// #enddocregion upgrade-static-umd
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
public/docs/_examples/upgrade-phonecat-1-typescript/ts/tsconfig.json
+2 -1
View File
@@ -16,6 +16,7 @@
"compileOnSave": true,
"exclude": [
"node_modules/*",
"**/*-aot.ts"
"**/*-aot.ts",
"aot/**/*"
]
}
public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts
+2 -2
View File
@@ -17,7 +17,7 @@ describe('PhoneCat Application', function() {
expect(browser.getLocationAbsUrl()).toBe('/phones');
});
xdescribe('View: Phone list', function() {
describe('View: Phone list', function() {
beforeEach(function() {
browser.get('index.html#!/phones');
@@ -75,7 +75,7 @@ describe('PhoneCat Application', function() {
});
xdescribe('View: Phone detail', function() {
describe('View: Phone detail', function() {
beforeEach(function() {
browser.get('index.html#!/phones/nexus-s');
public/docs/_examples/upgrade-phonecat-2-hybrid/ts/.gitignore
+4 -5
View File
@@ -1,9 +1,8 @@
aot/**/*.ts
**/*.ngfactory.ts
**/*.ngsummary.json
**/*.metadata.json
**/*.js
aot/**/*
!aot/index.html
dist
!app/tsconfig.json
!rollup-config.js
!karma.conf.ajs.js
!copy-dist-files.js
!systemjs.config.1.js
public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot/index.html
+40
View File
@@ -0,0 +1,40 @@
<!-- #docregion -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/app/">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="app.animations.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-animate.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-resource.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
<script src="app.module.ajs.js"></script>
<script src="app.config.js"></script>
<script src="app.animations.js"></script>
<script src="core/core.module.js"></script>
<script src="core/phone/phone.module.js"></script>
<script src="phone-list/phone-list.module.js"></script>
<script src="phone-detail/phone-detail.module.js"></script>
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.min.js"></script>
<script>window.module = 'aot';</script>
</head>
<body>
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
<script src="/dist/build.js"></script>
</html>
public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/ajs-upgraded-providers.ts
+14
View File
@@ -0,0 +1,14 @@
// #docregion
export abstract class RouteParams {
[key: string]: string;
}
export function routeParamsFactory(i: any) {
return i.get('$routeParams');
}
export const routeParamsProvider = {
provide: RouteParams,
useFactory: routeParamsFactory,
deps: ['$injector']
};
public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts
+4 -11
View File
@@ -21,6 +21,9 @@ import { CheckmarkPipe } from './core/checkmark/checkmark.pipe';
// #docregion phonelist
import { PhoneListComponent } from './phone-list/phone-list.component';
// #enddocregion phonelist
// #docregion routeparams
import { routeParamsProvider } from './ajs-upgraded-providers';
// #enddocregion routeparams
// #docregion phonedetail
import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
// #enddocregion phonedetail
@@ -57,11 +60,7 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
providers: [
Phone,
// #enddocregion phone
{
provide: '$routeParams',
useFactory: routeParamsFactory,
deps: ['$injector']
}
routeParamsProvider
// #docregion phone
]
// #enddocregion routeparams
@@ -73,9 +72,3 @@ export class AppModule {
// #docregion bare
}
// #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
// #docregion routeparams
export function routeParamsFactory(i: any) {
return i.get('$routeParams');
}
// #enddocregion routeparams
public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts
+1 -2
View File
@@ -1,4 +1,4 @@
// #docregion bootstrap
// #docregion
import { platformBrowser } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
@@ -8,4 +8,3 @@ platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(platformRef =>
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.documentElement, ['phonecatApp']);
});
// #enddocregion bootstrap

Some files were not shown because too many files have changed in this diff Show More