cargdev/angular
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

docs(aio): rework of the upgrade guide

Browse Source 
This commit was worked on by a number of people including
@filipesilva, @gkalpak and @wardbell. It contains changes that:

* remove unused files,
* fix the bootstrap approach to ensure that bootstrap is in the correct Zone
* fix unclosed code-example tags
* replace use of "we" with "you"
* remove broken dual router example

Related to angular/angular.io#3541
This commit is contained in:
Georgios Kalpakas
2017-05-18 10:48:05 +03:00
committed by Pete Bacon Darwin
parent 7d9f96abf0
commit b836aca999
172 changed files with 512 additions and 3260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts
View File

@ -6,8 +6,9 @@ import { UpgradeModule } from '@angular/upgrade/static';
import { heroDetailComponent } from './hero-detail.component';
// #docregion ngmodule
// #docregion ngmodule, register
import { Heroes } from './heroes';
// #enddocregion register
@NgModule({
imports: [
@ -17,7 +18,10 @@ import { Heroes } from './heroes';
providers: [ Heroes ]
})
export class AppModule {
ngDoBootstrap() {}
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
}
}
// #enddocregion ngmodule
// #docregion register
@ -28,7 +32,4 @@ angular.module('heroApp', [])
.component('heroDetail', heroDetailComponent);
// #enddocregion register
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
});
platformBrowserDynamic().bootstrapModule(AppModule);

10
aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts
View File

@ -22,7 +22,10 @@ import { ContainerComponent } from './container.component';
]
})
export class AppModule {
ngDoBootstrap() {}
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
}
}
// #enddocregion heroupgrade
@ -33,7 +36,4 @@ angular.module('heroApp', [])
downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
);
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
});
platformBrowserDynamic().bootstrapModule(AppModule);

3
aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts
View File

@ -8,7 +8,8 @@ export const heroDetail = {
<div>
<ng-transclude></ng-transclude>
</div>
`
`,
transclude: true
};
// #enddocregion

10
aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts
View File

@ -11,7 +11,10 @@ import { UpgradeModule } from '@angular/upgrade/static';
]
})
export class AppModule {
ngDoBootstrap() {}
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
}
}
// #enddocregion ngmodule
angular.module('heroApp', [])
@ -22,8 +25,5 @@ angular.module('heroApp', [])
// #docregion bootstrap
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
});
platformBrowserDynamic().bootstrapModule(AppModule);
// #enddocregion bootstrap

4
aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts
View File

@ -1,10 +1,12 @@
// #docregion ng1module
angular.module('heroApp', [])
.controller('MainCtrl', function() {
this.message = 'Hello world';
});
// #enddocregion ng1module
document.addEventListener('DOMContentLoaded', function() {
// #docregion bootstrap
angular.bootstrap(document.body, ['heroApp'], {strictDi: true});
angular.bootstrap(document.body, ['heroApp'], { strictDi: true });
// #enddocregion bootstrap
});

10
aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts
View File

@ -20,7 +20,10 @@ import { HeroDetailComponent } from './hero-detail.component';
]
})
export class AppModule {
ngDoBootstrap() {}
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
}
}
angular.module('heroApp', [])
@ -30,7 +33,4 @@ angular.module('heroApp', [])
inputs: ['hero']
}) as angular.IDirectiveFactory);
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
});
platformBrowserDynamic().bootstrapModule(AppModule);

10
aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts
View File

@ -27,7 +27,10 @@ import { heroesServiceProvider } from './ajs-upgraded-providers';
// #docregion register
})
export class AppModule {
ngDoBootstrap() {}
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
}
}
// #enddocregion register
@ -38,7 +41,4 @@ 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});
});
platformBrowserDynamic().bootstrapModule(AppModule);

11
aio/content/examples/upgrade-module/src/app/divide-routes/app.component.ts
View File

@ -1,11 +0,0 @@
// #docregion
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
<div ng-view></div>
`,
})
export class AppComponent { }

62
aio/content/examples/upgrade-module/src/app/divide-routes/app.module.ts
View File

@ -1,62 +0,0 @@
// #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
}
]);

32
aio/content/examples/upgrade-module/src/app/divide-routes/hero.module.ts
View File

@ -1,32 +0,0 @@
// #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 {}

10
aio/content/examples/upgrade-module/src/app/divide-routes/main.ts
View File

@ -1,10 +0,0 @@
// #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});
});

16
aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts
View File

@ -23,21 +23,17 @@ import { HeroDetailComponent } from './hero-detail.component';
]
})
export class AppModule {
ngDoBootstrap() {}
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
}
}
// #docregion downgradecomponent
angular.module('heroApp', [])
.controller('MainController', MainController)
.directive('heroDetail', downgradeComponent({
component: HeroDetailComponent,
inputs: ['hero'],
outputs: ['deleted']
}) as angular.IDirectiveFactory);
.directive('heroDetail', downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory);
// #enddocregion downgradecomponent
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
});
platformBrowserDynamic().bootstrapModule(AppModule);

12
aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts
View File

@ -21,7 +21,10 @@ import { HeroDetailComponent } from './hero-detail.component';
]
})
export class AppModule {
ngDoBootstrap() {}
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
}
}
// #enddocregion ngmodule
// #docregion downgradecomponent
@ -31,12 +34,9 @@ import { downgradeComponent } from '@angular/upgrade/static';
angular.module('heroApp', [])
.directive(
'heroDetail',
downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
downgradeComponent({ component: HeroDetailComponent }) as angular.IDirectiveFactory
);
// #enddocregion downgradecomponent
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
});
platformBrowserDynamic().bootstrapModule(AppModule);

8
aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts
View File

@ -8,15 +8,15 @@ export function heroDetailDirective() {
deleted: '&'
},
template: `
<h2>{{ctrl.hero.name}} details!</h2>
<div><label>id: </label>{{ctrl.hero.id}}</div>
<button ng-click="ctrl.onDelete()">Delete</button>
<h2>{{$ctrl.hero.name}} details!</h2>
<div><label>id: </label>{{$ctrl.hero.id}}</div>
<button ng-click="$ctrl.onDelete()">Delete</button>
`,
controller: function() {
this.onDelete = () => {
this.deleted({hero: this.hero});
};
},
controllerAs: 'ctrl'
controllerAs: '$ctrl'
};
}

10
aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts
View File

@ -22,7 +22,10 @@ import { ContainerComponent } from './container.component';
]
})
export class AppModule {
ngDoBootstrap() {}
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
}
}
// #enddocregion heroupgrade
@ -33,7 +36,4 @@ angular.module('heroApp', [])
downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
);
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
});
platformBrowserDynamic().bootstrapModule(AppModule);

10
aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts
View File

@ -24,7 +24,10 @@ import { ContainerComponent } from './container.component';
]
})
export class AppModule {
ngDoBootstrap() {}
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
}
}
// #enddocregion hero-detail-upgrade
@ -35,7 +38,4 @@ angular.module('heroApp', [])
downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
);
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
});
platformBrowserDynamic().bootstrapModule(AppModule);

2
aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts
View File

@ -11,7 +11,7 @@ export const heroDetail = {
// #enddocregion hero-detail
// #docregion hero-detail-upgrade
import { Directive, ElementRef, Injector } from '@angular/core';
import { Directive, ElementRef, Injector, SimpleChanges } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
@Directive({

31
aio/content/examples/upgrade-module/src/index-divide-routes.html
View File

@ -1,31 +0,0 @@
<!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>