Skip to content

Commit 8755309

Browse files
author
vakrilov
committed
Support for custom page factory providers
1 parent a3eea17 commit 8755309

File tree

6 files changed

+77
-37
lines changed

6 files changed

+77
-37
lines changed

‎nativescript-angular/directives/dialogs.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
import { Page } from 'ui/page';
66
import { View } from 'ui/core/view';
77
import { DetachedLoader } from '../common/detached-loader';
8+
import { PageFactory, PAGE_FACTORY } from '../platform-providers';
89

910
export interface ModalDialogOptions {
1011
context?: any;
@@ -36,9 +37,10 @@ export class ModalDialogService {
3637

3738
const parentPage: Page = viewContainerRef.injector.get(Page);
3839
const resolver: ComponentFactoryResolver = viewContainerRef.injector.get(ComponentFactoryResolver);
40+
const pageFactory: PageFactory = viewContainerRef.injector.get(PAGE_FACTORY);
3941

4042
return new Promise((resolve, reject) => {
41-
setTimeout(() => ModalDialogService.showDialog(type, options, resolve, viewContainerRef, resolver, parentPage), 10);
43+
setTimeout(() => ModalDialogService.showDialog(type, options, resolve, viewContainerRef, resolver, parentPage, pageFactory), 10);
4244
});
4345
}
4446

@@ -48,9 +50,10 @@ export class ModalDialogService {
4850
doneCallback,
4951
containerRef: ViewContainerRef,
5052
resolver: ComponentFactoryResolver,
51-
parentPage: Page): void {
53+
parentPage: Page,
54+
pageFactory: PageFactory): void {
5255

53-
const page = new Page();
56+
const page = pageFactory({ isModal: true, componentType: type });
5457

5558
let detachedLoaderRef: ComponentRef<DetachedLoader>;
5659
const closeCallback = (...args) => {

‎nativescript-angular/platform-providers.ts

+16-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { topmost, Frame } from 'ui/frame';
22
import { Page } from 'ui/page';
3-
import { OpaqueToken } from '@angular/core';
3+
import { OpaqueToken, Type } from '@angular/core';
44
import { device, Device } from "platform";
55

66
export const APP_ROOT_VIEW = new OpaqueToken('App Root View');
77
export const DEVICE = new OpaqueToken('platfrom device');
8-
9-
export const defaultPageProvider = { provide: Page, useFactory: getDefaultPage };
8+
export const PAGE_FACTORY = new OpaqueToken('page factory');
109

1110
export function getDefaultPage(): Page {
1211
const frame = topmost();
@@ -16,7 +15,21 @@ export function getDefaultPage(): Page {
1615
return null;
1716
}
1817
}
18+
export const defaultPageProvider = { provide: Page, useFactory: getDefaultPage };
1919

2020
export const defaultFrameProvider = { provide: Frame, useFactory: topmost };
2121

2222
export const defaultDeviceProvider = { provide: DEVICE, useValue: device };
23+
24+
export type PageFactory = (options: PageFactoryOptions) => Page;
25+
export interface PageFactoryOptions {
26+
isBootstrap?: boolean,
27+
isLivesync?:boolean,
28+
isModal?: boolean,
29+
isNavigation?: boolean,
30+
componentType?: any
31+
}
32+
export const defaultPageFactory: PageFactory = function (opts: PageFactoryOptions) {
33+
return new Page();
34+
}
35+
export const defaultPageFactoryProvider = { provide: PAGE_FACTORY, useValue: defaultPageFactory };

‎nativescript-angular/platform.ts

+16-7
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ import { TextView } from 'ui/text-view';
3333
import { NativeScriptElementSchemaRegistry } from './dom-adapter';
3434
import { FileSystemResourceLoader } from './resource-loader';
3535

36+
import { PAGE_FACTORY, PageFactory, defaultPageFactoryProvider } from './platform-providers';
37+
3638
import * as nativescriptIntl from "nativescript-intl";
3739
global.Intl = nativescriptIntl;
3840

@@ -60,6 +62,10 @@ export const NS_COMPILER_PROVIDERS = [
6062
}
6163
];
6264

65+
const COMMON_PROVIDERS = [
66+
defaultPageFactoryProvider,
67+
];
68+
6369
export const onBeforeLivesync = new EventEmitter<NgModuleRef<any>>();
6470
export const onAfterLivesync = new EventEmitter<NgModuleRef<any>>();
6571

@@ -80,9 +86,9 @@ class NativeScriptPlatformRef extends PlatformRef {
8086

8187
bootstrapModuleFactory<M>(moduleFactory: NgModuleFactory<M>): Promise<NgModuleRef<M>> {
8288
this._bootstrapper = () => this.platform.bootstrapModuleFactory(moduleFactory);
83-
89+
8490
this.bootstrapApp();
85-
91+
8692
return null; //Make the compiler happy
8793
}
8894

@@ -110,7 +116,8 @@ class NativeScriptPlatformRef extends PlatformRef {
110116
const mainPageEntry = this.createNavigationEntry(
111117
this._bootstrapper,
112118
compRef => onAfterLivesync.next(compRef),
113-
error => onAfterLivesync.error(error)
119+
error => onAfterLivesync.error(error),
120+
true
114121
);
115122
mainPageEntry.animated = false;
116123
mainPageEntry.clearHistory = true;
@@ -140,10 +147,12 @@ class NativeScriptPlatformRef extends PlatformRef {
140147
return this.platform.destroyed;
141148
}
142149

143-
private createNavigationEntry(bootstrapAction: BootstrapperAction, resolve?: (comp: NgModuleRef<any>) => void, reject?: (e: Error) => void, isReboot: boolean = false): NavigationEntry {
150+
private createNavigationEntry(bootstrapAction: BootstrapperAction, resolve?: (comp: NgModuleRef<any>) => void, reject?: (e: Error) => void, isLivesync: boolean = false, isReboot: boolean = false): NavigationEntry {
151+
const pageFactory: PageFactory = this.platform.injector.get(PAGE_FACTORY);
152+
144153
const navEntry: NavigationEntry = {
145154
create: (): Page => {
146-
let page = new Page();
155+
let page = pageFactory({ isBootstrap: true, isLivesync });
147156
if (this.appOptions) {
148157
page.actionBarHidden = this.appOptions.startPageActionBarHidden;
149158
}
@@ -199,7 +208,7 @@ class NativeScriptPlatformRef extends PlatformRef {
199208

200209
// Dynamic platfrom
201210
const _platformNativeScriptDynamic: PlatformFactory = createPlatformFactory(
202-
platformCoreDynamic, 'nativeScriptDynamic', NS_COMPILER_PROVIDERS);
211+
platformCoreDynamic, 'nativeScriptDynamic', [...COMMON_PROVIDERS, ...NS_COMPILER_PROVIDERS]);
203212

204213
export function platformNativeScriptDynamic(options?: AppOptions, extraProviders?: any[]): PlatformRef {
205214
//Return raw platform to advanced users only if explicitly requested
@@ -212,7 +221,7 @@ export function platformNativeScriptDynamic(options?: AppOptions, extraProviders
212221

213222
// "Static" platform
214223
const _platformNativeScript: PlatformFactory = createPlatformFactory(
215-
platformCore, 'nativeScript');
224+
platformCore, 'nativeScript', [...COMMON_PROVIDERS]);
216225

217226
export function platformNativeScript(options?: AppOptions, extraProviders?: any[]): PlatformRef {
218227
//Return raw platform to advanced users only if explicitly requested

‎nativescript-angular/router/page-router-outlet.ts

+19-18
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ import {
33
ReflectiveInjector, ResolvedReflectiveProvider, ViewContainerRef,
44
Inject, ComponentFactoryResolver, Injector
55
} from '@angular/core';
6-
import {isPresent} from "../lang-facade";
7-
import {RouterOutletMap, ActivatedRoute, PRIMARY_OUTLET} from '@angular/router';
8-
import {NSLocationStrategy} from "./ns-location-strategy";
9-
import {DEVICE} from "../platform-providers";
10-
import {Device} from "platform";
11-
import {routerLog} from "../trace";
12-
import {DetachedLoader} from "../common/detached-loader";
13-
import {ViewUtil} from "../view-util";
14-
import {Frame} from "ui/frame";
15-
import {Page, NavigatedData} from "ui/page";
16-
import {BehaviorSubject} from "rxjs";
6+
import { isPresent } from "../lang-facade";
7+
import { RouterOutletMap, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
8+
import { NSLocationStrategy } from "./ns-location-strategy";
9+
import { DEVICE, PAGE_FACTORY, PageFactory } from "../platform-providers";
10+
import { Device } from "platform";
11+
import { routerLog } from "../trace";
12+
import { DetachedLoader } from "../common/detached-loader";
13+
import { ViewUtil } from "../view-util";
14+
import { Frame } from "ui/frame";
15+
import { Page, NavigatedData } from "ui/page";
16+
import { BehaviorSubject } from "rxjs";
1717

1818
interface CacheItem {
1919
componentRef: ComponentRef<any>;
@@ -95,7 +95,8 @@ export class PageRouterOutlet {
9595
private componentFactoryResolver: ComponentFactoryResolver,
9696
resolver: ComponentFactoryResolver,
9797
private frame: Frame,
98-
@Inject(DEVICE) device: Device) {
98+
@Inject(DEVICE) device: Device,
99+
@Inject(PAGE_FACTORY) private pageFactory: PageFactory) {
99100

100101
parentOutletMap.registerOutlet(name ? name : PRIMARY_OUTLET, <any>this);
101102

@@ -141,10 +142,10 @@ export class PageRouterOutlet {
141142
* Called by the Router to instantiate a new component during the commit phase of a navigation.
142143
* This method in turn is responsible for calling the `routerOnActivate` hook of its child.
143144
*/
144-
activate(
145-
activatedRoute: ActivatedRoute, loadedResolver: ComponentFactoryResolver,
146-
loadedInjector: Injector, providers: ResolvedReflectiveProvider[],
147-
outletMap: RouterOutletMap): void {
145+
activate(
146+
activatedRoute: ActivatedRoute, loadedResolver: ComponentFactoryResolver,
147+
loadedInjector: Injector, providers: ResolvedReflectiveProvider[],
148+
outletMap: RouterOutletMap): void {
148149
this.outletMap = outletMap;
149150
this.currentActivatedRoute = activatedRoute;
150151

@@ -174,9 +175,9 @@ export class PageRouterOutlet {
174175
} else {
175176
log("PageRouterOutlet.activate() forward navigation - create detached loader in the loader container");
176177

177-
const page = new Page();
178+
const page = this.pageFactory({ isNavigation: true, componentType: factory.componentType });
178179
const pageResolvedProvider = ReflectiveInjector.resolve([
179-
{provide: Page, useValue: page}
180+
{ provide: Page, useValue: page }
180181
]);
181182
const childInjector = ReflectiveInjector.fromResolvedProviders([...providers, ...pageResolvedProvider], this.containerRef.parentInjector);
182183
const loaderRef = this.containerRef.createComponent(this.detachedLoaderFactory, this.containerRef.length, childInjector, []);

‎ng-sample/app/app.ts

+19-6
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@ import { NativeScriptRouterModule } from "nativescript-angular/router";
1313
import { NativeScriptFormsModule } from "nativescript-angular/forms";
1414
import { NativeScriptHttpModule } from "nativescript-angular/http";
1515
import { rendererTraceCategory, routerTraceCategory, listViewTraceCategory } from "nativescript-angular/trace";
16+
import { PAGE_FACTORY, PageFactory, PageFactoryOptions } from "nativescript-angular/platform-providers";
17+
import { Page } from "ui/page";
18+
import { Color } from "color";
1619

1720
import trace = require("trace");
1821
// trace.setCategories(rendererTraceCategory);
19-
trace.setCategories(routerTraceCategory);
22+
// trace.setCategories(routerTraceCategory);
2023
// trace.setCategories(listViewTraceCategory);
2124
trace.enable();
2225

@@ -62,7 +65,7 @@ import { AnimationStatesTest } from "./examples/animation/animation-states-test"
6265
],
6366
providers: []
6467
})
65-
class ExampleModule {}
68+
class ExampleModule { }
6669

6770
function makeExampleModule(componentType) {
6871
let imports: any[] = [ExampleModule];
@@ -93,25 +96,35 @@ function makeExampleModule(componentType) {
9396
providers: providers,
9497
exports: exports,
9598
})
96-
class ExampleModuleForComponent {}
99+
class ExampleModuleForComponent { }
97100

98101
return ExampleModuleForComponent;
99102
}
100103

101-
platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RendererTest));
104+
const customPageFactoryProvider = {
105+
provide: PAGE_FACTORY,
106+
useValue: (opts: PageFactoryOptions) => {
107+
const page = new Page();
108+
page.backgroundColor = opts.isModal ? new Color("lightblue") : new Color("lightgreen");
109+
return page;
110+
}
111+
};
112+
113+
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RendererTest));
114+
platformNativeScriptDynamic(undefined, [customPageFactoryProvider]).bootstrapModule(makeExampleModule(RendererTest));
102115
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(TabViewTest));
103116
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(Benchmark));
104117
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ListTest));
105118
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ListTestAsync));
106119
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ImageTest));
107-
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalTest));
120+
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalTest));
108121
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(HttpTest));
109122
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PlatfromDirectivesTest));
110123
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ActionBarTest));
111124

112125
//new router
113126
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RouterOutletAppComponent));
114-
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PageRouterOutletAppComponent));
127+
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PageRouterOutletAppComponent));
115128
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PageRouterOutletNestedAppComponent));
116129
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ClearHistoryAppComponent));
117130
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LoginAppComponent));

‎ng-sample/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@angular/core": "~2.1.1",
3030
"@angular/common": "~2.1.1",
3131
"@angular/compiler": "~2.1.1",
32+
"@angular/forms": "~2.1.1",
3233
"@angular/http": "~2.1.1",
3334
"@angular/platform-browser": "~2.1.1",
3435
"@angular/platform-browser-dynamic": "~2.1.1",

0 commit comments

Comments
 (0)