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';
|
||||
|
||||
// #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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ export const heroDetail = {
|
|||
<div>
|
||||
<ng-transclude></ng-transclude>
|
||||
</div>
|
||||
`
|
||||
`,
|
||||
transclude: true
|
||||
};
|
||||
// #enddocregion
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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,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'
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
// #enddocregion bare
|
||||
ngDoBootstrap() {}
|
||||
constructor(private upgrade: UpgradeModule) { }
|
||||
ngDoBootstrap() {
|
||||
this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);
|
||||
}
|
||||
// #docregion bare
|
||||
}
|
||||
// #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
// #docregion
|
||||
import { platformBrowser } from '@angular/platform-browser';
|
||||
import { UpgradeModule } from '@angular/upgrade/static';
|
||||
|
||||
import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
|
||||
|
||||
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(platformRef => {
|
||||
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
|
||||
upgrade.bootstrap(document.documentElement, ['phonecatApp']);
|
||||
});
|
||||
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
]);
|
||||