docs(aio): rework of the upgrade guide
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
Georgios Kalpakas
Pete Bacon Darwin
|
|
@ -1,8 +0,0 @@
|
||||||
// #docregion
|
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'my-app',
|
|
||||||
template: '<hero-form></hero-form>'
|
|
||||||
})
|
|
||||||
export class AppComponent { }
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- #docregion -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Hero Form</title>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
<!-- #docregion bootstrap -->
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
|
|
||||||
<!-- #enddocregion bootstrap -->
|
|
||||||
|
|
||||||
<!-- 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.js"></script>
|
|
||||||
<script>
|
|
||||||
System.import('main.js').catch(function(err){ console.error(err); });
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<my-app>Loading...</my-app>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -162,22 +162,4 @@ 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');
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,9 @@ import { UpgradeModule } from '@angular/upgrade/static';
|
||||||
|
|
||||||
import { heroDetailComponent } from './hero-detail.component';
|
import { heroDetailComponent } from './hero-detail.component';
|
||||||
|
|
||||||
// #docregion ngmodule
|
// #docregion ngmodule, register
|
||||||
import { Heroes } from './heroes';
|
import { Heroes } from './heroes';
|
||||||
|
// #enddocregion register
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
|
@ -17,7 +18,10 @@ import { Heroes } from './heroes';
|
||||||
providers: [ Heroes ]
|
providers: [ Heroes ]
|
||||||
})
|
})
|
||||||
export class AppModule {
|
export class AppModule {
|
||||||
ngDoBootstrap() {}
|
constructor(private upgrade: UpgradeModule) { }
|
||||||
|
ngDoBootstrap() {
|
||||||
|
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// #enddocregion ngmodule
|
// #enddocregion ngmodule
|
||||||
// #docregion register
|
// #docregion register
|
||||||
|
|
@ -28,7 +32,4 @@ angular.module('heroApp', [])
|
||||||
.component('heroDetail', heroDetailComponent);
|
.component('heroDetail', heroDetailComponent);
|
||||||
// #enddocregion register
|
// #enddocregion register
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
|
|
||||||
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,10 @@ import { ContainerComponent } from './container.component';
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class AppModule {
|
export class AppModule {
|
||||||
ngDoBootstrap() {}
|
constructor(private upgrade: UpgradeModule) { }
|
||||||
|
ngDoBootstrap() {
|
||||||
|
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// #enddocregion heroupgrade
|
// #enddocregion heroupgrade
|
||||||
|
|
||||||
|
|
@ -33,7 +36,4 @@ angular.module('heroApp', [])
|
||||||
downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
|
downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
|
||||||
);
|
);
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
|
|
||||||
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,8 @@ export const heroDetail = {
|
||||||
<div>
|
<div>
|
||||||
<ng-transclude></ng-transclude>
|
<ng-transclude></ng-transclude>
|
||||||
</div>
|
</div>
|
||||||
`
|
`,
|
||||||
|
transclude: true
|
||||||
};
|
};
|
||||||
// #enddocregion
|
// #enddocregion
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,10 @@ import { UpgradeModule } from '@angular/upgrade/static';
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class AppModule {
|
export class AppModule {
|
||||||
ngDoBootstrap() {}
|
constructor(private upgrade: UpgradeModule) { }
|
||||||
|
ngDoBootstrap() {
|
||||||
|
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// #enddocregion ngmodule
|
// #enddocregion ngmodule
|
||||||
angular.module('heroApp', [])
|
angular.module('heroApp', [])
|
||||||
|
|
@ -22,8 +25,5 @@ angular.module('heroApp', [])
|
||||||
// #docregion bootstrap
|
// #docregion bootstrap
|
||||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
|
|
||||||
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
|
|
||||||
});
|
|
||||||
// #enddocregion bootstrap
|
// #enddocregion bootstrap
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
|
// #docregion ng1module
|
||||||
angular.module('heroApp', [])
|
angular.module('heroApp', [])
|
||||||
.controller('MainCtrl', function() {
|
.controller('MainCtrl', function() {
|
||||||
this.message = 'Hello world';
|
this.message = 'Hello world';
|
||||||
});
|
});
|
||||||
|
// #enddocregion ng1module
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
// #docregion bootstrap
|
// #docregion bootstrap
|
||||||
angular.bootstrap(document.body, ['heroApp'], {strictDi: true});
|
angular.bootstrap(document.body, ['heroApp'], { strictDi: true });
|
||||||
// #enddocregion bootstrap
|
// #enddocregion bootstrap
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,10 @@ import { HeroDetailComponent } from './hero-detail.component';
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class AppModule {
|
export class AppModule {
|
||||||
ngDoBootstrap() {}
|
constructor(private upgrade: UpgradeModule) { }
|
||||||
|
ngDoBootstrap() {
|
||||||
|
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
angular.module('heroApp', [])
|
angular.module('heroApp', [])
|
||||||
|
|
@ -30,7 +33,4 @@ angular.module('heroApp', [])
|
||||||
inputs: ['hero']
|
inputs: ['hero']
|
||||||
}) as angular.IDirectiveFactory);
|
}) as angular.IDirectiveFactory);
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
|
|
||||||
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,10 @@ import { heroesServiceProvider } from './ajs-upgraded-providers';
|
||||||
// #docregion register
|
// #docregion register
|
||||||
})
|
})
|
||||||
export class AppModule {
|
export class AppModule {
|
||||||
ngDoBootstrap() {}
|
constructor(private upgrade: UpgradeModule) { }
|
||||||
|
ngDoBootstrap() {
|
||||||
|
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// #enddocregion register
|
// #enddocregion register
|
||||||
|
|
||||||
|
|
@ -38,7 +41,4 @@ angular.module('heroApp', [])
|
||||||
downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
|
downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
|
||||||
);
|
);
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
|
|
||||||
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -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 { }
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
@ -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 {}
|
|
||||||
|
|
@ -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});
|
|
||||||
});
|
|
||||||
|
|
@ -23,21 +23,17 @@ import { HeroDetailComponent } from './hero-detail.component';
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class AppModule {
|
export class AppModule {
|
||||||
ngDoBootstrap() {}
|
constructor(private upgrade: UpgradeModule) { }
|
||||||
|
ngDoBootstrap() {
|
||||||
|
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// #docregion downgradecomponent
|
// #docregion downgradecomponent
|
||||||
|
|
||||||
angular.module('heroApp', [])
|
angular.module('heroApp', [])
|
||||||
.controller('MainController', MainController)
|
.controller('MainController', MainController)
|
||||||
.directive('heroDetail', downgradeComponent({
|
.directive('heroDetail', downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory);
|
||||||
component: HeroDetailComponent,
|
|
||||||
inputs: ['hero'],
|
|
||||||
outputs: ['deleted']
|
|
||||||
}) as angular.IDirectiveFactory);
|
|
||||||
|
|
||||||
// #enddocregion downgradecomponent
|
// #enddocregion downgradecomponent
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
|
|
||||||
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,10 @@ import { HeroDetailComponent } from './hero-detail.component';
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class AppModule {
|
export class AppModule {
|
||||||
ngDoBootstrap() {}
|
constructor(private upgrade: UpgradeModule) { }
|
||||||
|
ngDoBootstrap() {
|
||||||
|
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// #enddocregion ngmodule
|
// #enddocregion ngmodule
|
||||||
// #docregion downgradecomponent
|
// #docregion downgradecomponent
|
||||||
|
|
@ -31,12 +34,9 @@ import { downgradeComponent } from '@angular/upgrade/static';
|
||||||
angular.module('heroApp', [])
|
angular.module('heroApp', [])
|
||||||
.directive(
|
.directive(
|
||||||
'heroDetail',
|
'heroDetail',
|
||||||
downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
|
downgradeComponent({ component: HeroDetailComponent }) as angular.IDirectiveFactory
|
||||||
);
|
);
|
||||||
|
|
||||||
// #enddocregion downgradecomponent
|
// #enddocregion downgradecomponent
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
|
|
||||||
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -8,15 +8,15 @@ export function heroDetailDirective() {
|
||||||
deleted: '&'
|
deleted: '&'
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
<h2>{{ctrl.hero.name}} details!</h2>
|
<h2>{{$ctrl.hero.name}} details!</h2>
|
||||||
<div><label>id: </label>{{ctrl.hero.id}}</div>
|
<div><label>id: </label>{{$ctrl.hero.id}}</div>
|
||||||
<button ng-click="ctrl.onDelete()">Delete</button>
|
<button ng-click="$ctrl.onDelete()">Delete</button>
|
||||||
`,
|
`,
|
||||||
controller: function() {
|
controller: function() {
|
||||||
this.onDelete = () => {
|
this.onDelete = () => {
|
||||||
this.deleted({hero: this.hero});
|
this.deleted({hero: this.hero});
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
controllerAs: 'ctrl'
|
controllerAs: '$ctrl'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,10 @@ import { ContainerComponent } from './container.component';
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class AppModule {
|
export class AppModule {
|
||||||
ngDoBootstrap() {}
|
constructor(private upgrade: UpgradeModule) { }
|
||||||
|
ngDoBootstrap() {
|
||||||
|
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// #enddocregion heroupgrade
|
// #enddocregion heroupgrade
|
||||||
|
|
||||||
|
|
@ -33,7 +36,4 @@ angular.module('heroApp', [])
|
||||||
downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
|
downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
|
||||||
);
|
);
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
|
|
||||||
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,10 @@ import { ContainerComponent } from './container.component';
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class AppModule {
|
export class AppModule {
|
||||||
ngDoBootstrap() {}
|
constructor(private upgrade: UpgradeModule) { }
|
||||||
|
ngDoBootstrap() {
|
||||||
|
this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// #enddocregion hero-detail-upgrade
|
// #enddocregion hero-detail-upgrade
|
||||||
|
|
||||||
|
|
@ -35,7 +38,4 @@ angular.module('heroApp', [])
|
||||||
downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
|
downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
|
||||||
);
|
);
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
|
|
||||||
upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ export const heroDetail = {
|
||||||
// #enddocregion hero-detail
|
// #enddocregion hero-detail
|
||||||
|
|
||||||
// #docregion hero-detail-upgrade
|
// #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';
|
import { UpgradeComponent } from '@angular/upgrade/static';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -67,7 +67,10 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
|
||||||
})
|
})
|
||||||
export class AppModule {
|
export class AppModule {
|
||||||
// #enddocregion bare
|
// #enddocregion bare
|
||||||
ngDoBootstrap() {}
|
constructor(private upgrade: UpgradeModule) { }
|
||||||
|
ngDoBootstrap() {
|
||||||
|
this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);
|
||||||
|
}
|
||||||
// #docregion bare
|
// #docregion bare
|
||||||
}
|
}
|
||||||
// #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
|
// #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,6 @@
|
||||||
// #docregion
|
// #docregion
|
||||||
import { platformBrowser } from '@angular/platform-browser';
|
import { platformBrowser } from '@angular/platform-browser';
|
||||||
import { UpgradeModule } from '@angular/upgrade/static';
|
|
||||||
|
|
||||||
import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
|
import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
|
||||||
|
|
||||||
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(platformRef => {
|
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
|
||||||
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
|
|
||||||
upgrade.bootstrap(document.documentElement, ['phonecatApp']);
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
// #docregion bootstrap
|
|
||||||
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.documentElement, ['phonecatApp']);
|
|
||||||
});
|
|
||||||
// #enddocregion bootstrap
|
|
||||||
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
|
@ -1,7 +0,0 @@
|
||||||
**/*.js
|
|
||||||
aot/**/*
|
|
||||||
!aot/bs-config.json
|
|
||||||
!aot/index.html
|
|
||||||
!copy-dist-files.js
|
|
||||||
!rollup-config.js
|
|
||||||
!systemjs.config.1.js
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
This is the Angular Phonecat application adjusted to fit our boilerplate project
|
|
||||||
structure.
|
|
||||||
|
|
||||||
The following changes from vanilla Phonecat are applied:
|
|
||||||
|
|
||||||
* Karma config for unit tests is in karma.conf.ng1.js because the boilerplate
|
|
||||||
Karma config is not compatible with the way Angular 1 tests need to be run.
|
|
||||||
The shell script run-unit-tests.sh can be used to run the unit tests.
|
|
||||||
* There's a `package.ng1.json`, which is not used to run anything but only to
|
|
||||||
show an example of changing the PhoneCat http-server root path.
|
|
||||||
* Also for the Karma shim, there is a `karma-test-shim.1.js` file which isn't
|
|
||||||
used but is shown in the test appendix.
|
|
||||||
* Instead of using Bower, Angular 1 and its dependencies are fetched from a CDN
|
|
||||||
in index.html and karma.conf.ng1.js.
|
|
||||||
* E2E tests have been moved to the parent directory, where `run-e2e-tests` can
|
|
||||||
discover and run them along with all the other examples.
|
|
||||||
* Most of the phone JSON and image data removed in the interest of keeping
|
|
||||||
repo weight down. Keeping enough to retain testability of the app.
|
|
||||||
|
|
||||||
## Running the app
|
|
||||||
|
|
||||||
Start like any example
|
|
||||||
|
|
||||||
npm run start
|
|
||||||
|
|
||||||
## Running unit tests
|
|
||||||
|
|
||||||
./run-unit-tests.sh
|
|
||||||
|
|
||||||
## Running E2E tests
|
|
||||||
|
|
||||||
Like for any example (at the project root):
|
|
||||||
|
|
||||||
gulp run-e2e-tests --filter=phonecat-2
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
<!-- #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>
|
|
||||||
<phonecat-app></phonecat-app>
|
|
||||||
</body>
|
|
||||||
<script src="/dist/build.js"></script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
// #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']
|
|
||||||
};
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
// #docregion
|
|
||||||
import { NgModule } from '@angular/core';
|
|
||||||
import { Routes, RouterModule, UrlHandlingStrategy, UrlTree } from '@angular/router';
|
|
||||||
import { APP_BASE_HREF, HashLocationStrategy, LocationStrategy } from '@angular/common';
|
|
||||||
|
|
||||||
import { PhoneListComponent } from './phone-list/phone-list.component';
|
|
||||||
|
|
||||||
export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
|
|
||||||
shouldProcessUrl(url: UrlTree) {
|
|
||||||
return url.toString() === '/' || url.toString() === '/phones';
|
|
||||||
}
|
|
||||||
extract(url: UrlTree) { return url; }
|
|
||||||
merge(url: UrlTree, whole: UrlTree) { return url; }
|
|
||||||
}
|
|
||||||
|
|
||||||
const routes: Routes = [
|
|
||||||
{ path: '', redirectTo: 'phones', pathMatch: 'full' },
|
|
||||||
{ path: 'phones', component: PhoneListComponent }
|
|
||||||
];
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
imports: [ RouterModule.forRoot(routes) ],
|
|
||||||
exports: [ RouterModule ],
|
|
||||||
providers: [
|
|
||||||
{ provide: APP_BASE_HREF, useValue: '!' },
|
|
||||||
{ provide: LocationStrategy, useClass: HashLocationStrategy },
|
|
||||||
{ provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
export class AppRoutingModule { }
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
/* Animate `ngRepeat` in `phoneList` component */
|
|
||||||
.phone-list-item.ng-enter,
|
|
||||||
.phone-list-item.ng-leave,
|
|
||||||
.phone-list-item.ng-move {
|
|
||||||
overflow: hidden;
|
|
||||||
transition: 0.5s linear all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.phone-list-item.ng-enter,
|
|
||||||
.phone-list-item.ng-leave.ng-leave-active,
|
|
||||||
.phone-list-item.ng-move {
|
|
||||||
height: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
opacity: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.phone-list-item.ng-enter.ng-enter-active,
|
|
||||||
.phone-list-item.ng-leave,
|
|
||||||
.phone-list-item.ng-move.ng-move-active {
|
|
||||||
height: 120px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
opacity: 1;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
padding-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animate view transitions with `ngView` */
|
|
||||||
.view-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-frame {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-frame.ng-enter,
|
|
||||||
.view-frame.ng-leave {
|
|
||||||
background: white;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-frame.ng-enter {
|
|
||||||
animation: 1s fade-in;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-frame.ng-leave {
|
|
||||||
animation: 1s fade-out;
|
|
||||||
z-index: 99;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fade-in {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fade-out {
|
|
||||||
from { opacity: 1; }
|
|
||||||
to { opacity: 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Older browsers might need vendor-prefixes for keyframes and animation! */
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
angular.
|
|
||||||
module('phonecatApp').
|
|
||||||
animation('.phone', function phoneAnimationFactory() {
|
|
||||||
return {
|
|
||||||
addClass: animateIn,
|
|
||||||
removeClass: animateOut
|
|
||||||
};
|
|
||||||
|
|
||||||
function animateIn(element: JQuery, className: string, done: () => void) {
|
|
||||||
if (className !== 'selected') { return; }
|
|
||||||
|
|
||||||
element.css({
|
|
||||||
display: 'block',
|
|
||||||
position: 'absolute',
|
|
||||||
top: 500,
|
|
||||||
left: 0
|
|
||||||
}).animate({
|
|
||||||
top: 0
|
|
||||||
}, done);
|
|
||||||
|
|
||||||
return function animateInEnd(wasCanceled: boolean) {
|
|
||||||
if (wasCanceled) { element.stop(); }
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function animateOut(element: JQuery, className: string, done: () => void) {
|
|
||||||
if (className !== 'selected') { return; }
|
|
||||||
|
|
||||||
element.css({
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0
|
|
||||||
}).animate({
|
|
||||||
top: -500
|
|
||||||
}, done);
|
|
||||||
|
|
||||||
return function animateOutEnd(wasCanceled: boolean) {
|
|
||||||
if (wasCanceled) { element.stop(); }
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
// #docregion
|
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'phonecat-app',
|
|
||||||
template: `
|
|
||||||
<router-outlet></router-outlet>
|
|
||||||
<div class="view-container">
|
|
||||||
<div ng-view class="view-frame"></div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class AppComponent { }
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
angular.
|
|
||||||
module('phonecatApp').
|
|
||||||
config(['$locationProvider', '$routeProvider',
|
|
||||||
function config($locationProvider: angular.ILocationProvider,
|
|
||||||
$routeProvider: angular.route.IRouteProvider) {
|
|
||||||
$locationProvider.hashPrefix('!');
|
|
||||||
// #docregion ajs-routes
|
|
||||||
$routeProvider
|
|
||||||
.when('/phones/:phoneId', {
|
|
||||||
template: '<phone-detail></phone-detail>'
|
|
||||||
});
|
|
||||||
// #enddocregion ajs-routes
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
// #docregion
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
// Define the `phonecatApp` Angular 1 module
|
|
||||||
angular.module('phonecatApp', [
|
|
||||||
'ngAnimate',
|
|
||||||
'ngRoute',
|
|
||||||
'core',
|
|
||||||
'phoneDetail',
|
|
||||||
'phoneList',
|
|
||||||
]);
|
|
||||||