From e4bbcc4c23b2f36396f20e7430ceda090279169b Mon Sep 17 00:00:00 2001 From: "Shlomi Assaf (shlassaf)" Date: Thu, 11 Aug 2016 00:41:09 +0300 Subject: [PATCH] feat(core): support Angular RC5 feat(bootstrap): support Angular RC5 misc: disable plugins that does not support RC5 --- package.json | 8 +- src/bootstrap.ts | 22 +-- .../angular2-modal/angular2-modal.module.ts | 20 ++ .../angular2-modal/angular2-modal.ts | 7 +- .../angular2-modal/models/tokens.ts | 2 +- .../angular2-modal/platform-browser/index.ts | 12 -- .../plugins/bootstrap/bootstrap.module.ts | 44 +++++ .../angular2-modal/plugins/bootstrap/index.ts | 26 +-- .../plugins/bootstrap/message-modal.ts | 1 - .../plugins/bootstrap/modal-backdrop.ts | 5 +- .../plugins/bootstrap/modal-container.ts | 35 ++-- .../providers/dom-modal-renderer.ts | 69 ++++--- .../angular2-modal/providers/modal.ts | 11 +- .../outside-event-plugin.ts | 176 +++++++++--------- src/demo/app/app.module.ts | 25 +++ src/demo/app/app.routes.ts | 20 +- src/demo/app/app.ts | 3 - .../bootstrap-demo/bootstrap-demo.module.ts | 15 ++ .../bootstrap-demo/bootstrap-demo.routes.ts | 15 +- src/demo/app/bootstrap-demo/bootstrap-demo.ts | 26 ++- src/demo/app/home/home.ts | 28 +-- 21 files changed, 317 insertions(+), 253 deletions(-) create mode 100644 src/components/angular2-modal/angular2-modal.module.ts delete mode 100644 src/components/angular2-modal/platform-browser/index.ts create mode 100644 src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts rename src/components/angular2-modal/{platform-browser => providers}/outside-event-plugin.ts (97%) create mode 100644 src/demo/app/app.module.ts create mode 100644 src/demo/app/bootstrap-demo/bootstrap-demo.module.ts diff --git a/package.json b/package.json index 9a9dd75b..3942914f 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,6 @@ "server": "npm run server:dev", "server:dev": "webpack-dev-server --config webpack.config.js --hot --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/", "build": "exec ./scripts/build_release.sh", - "preinstall": "node install_angular.js --preinstall", - "postinstall": "node install_angular.js --postinstall", "start": "npm run server:dev" }, "peerDependencies": { @@ -36,6 +34,12 @@ "zone.js": "^0.6.12" }, "devDependencies": { + "@angular/core": "2.0.0-rc.5", + "@angular/compiler": "2.0.0-rc.5", + "@angular/common": "2.0.0-rc.5", + "@angular/platform-browser": "2.0.0-rc.5", + "@angular/platform-browser-dynamic": "2.0.0-rc.5", + "@angular/router": "3.0.0-rc.1", "angular-cli": "0.0.31", "async": "^1.5.2", "bootstrap": "^3.3.6", diff --git a/src/bootstrap.ts b/src/bootstrap.ts index 6e111fd0..89ad7003 100644 --- a/src/bootstrap.ts +++ b/src/bootstrap.ts @@ -1,28 +1,18 @@ -import { ComponentRef, PLATFORM_DIRECTIVES } from '@angular/core'; -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { LocationStrategy, HashLocationStrategy } from '@angular/common'; -import { ROUTER_DIRECTIVES } from '@angular/router'; +import { NgModuleRef } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { MODAL_BROWSER_PROVIDERS } from './components/angular2-modal/platform-browser'; +// The app module +import { AppModule } from './demo/app/app.module'; -// Register providers for browser, this is mandatory. - -import { App } from './demo/app/app'; -import { APP_ROUTER_PROVIDERS } from './demo/app/app.routes'; let _bootstrapped = false; -export function main(): Promise> { +export function main(): Promise> { if (_bootstrapped) { return Promise.reject(null); } else { _bootstrapped = true; - return bootstrap(App, [ - ...MODAL_BROWSER_PROVIDERS, - {provide: PLATFORM_DIRECTIVES, multi: true, useValue: ROUTER_DIRECTIVES}, - APP_ROUTER_PROVIDERS, - {provide: LocationStrategy, useClass: HashLocationStrategy}, - ]) + return platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); } } diff --git a/src/components/angular2-modal/angular2-modal.module.ts b/src/components/angular2-modal/angular2-modal.module.ts new file mode 100644 index 00000000..c13f3fe9 --- /dev/null +++ b/src/components/angular2-modal/angular2-modal.module.ts @@ -0,0 +1,20 @@ +import { NgModule, ModuleWithProviders } from '@angular/core'; + +import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser'; +import { DOMOutsideEventPlugin } from './providers/outside-event-plugin'; +import { ModalRenderer, DOMModalRenderer } from '../angular2-modal'; + +@NgModule({ + +}) +export class ModalModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: ModalModule, + providers: [ + { provide: ModalRenderer, useClass: DOMModalRenderer }, + { provide: EVENT_MANAGER_PLUGINS, useClass: DOMOutsideEventPlugin, multi: true }, + ] + }; + } +} diff --git a/src/components/angular2-modal/angular2-modal.ts b/src/components/angular2-modal/angular2-modal.ts index b2af03f8..926974c7 100644 --- a/src/components/angular2-modal/angular2-modal.ts +++ b/src/components/angular2-modal/angular2-modal.ts @@ -24,8 +24,5 @@ export { export { ModalOpenContext, ModalOpenContextBuilder } from './models/modal-open-context'; -/** - * Deprecated, use platform based providers. - * @type {Array} - */ -export const MODAL_PROVIDERS: any[] = []; + +export { ModalModule } from './angular2-modal.module'; diff --git a/src/components/angular2-modal/models/tokens.ts b/src/components/angular2-modal/models/tokens.ts index 540785cd..4c512cfa 100644 --- a/src/components/angular2-modal/models/tokens.ts +++ b/src/components/angular2-modal/models/tokens.ts @@ -39,7 +39,7 @@ export abstract class ModalRenderer { viewContainer: ViewContainerRef, bindings: ResolvedReflectiveProvider[], dialog: DialogRef - ): Promise>; + ): DialogRef; } export abstract class ModalBackdropComponent extends Type {} diff --git a/src/components/angular2-modal/platform-browser/index.ts b/src/components/angular2-modal/platform-browser/index.ts deleted file mode 100644 index 6b6feb4b..00000000 --- a/src/components/angular2-modal/platform-browser/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { provide, Provider } from '@angular/core'; - -import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser'; -import { DOMOutsideEventPlugin } from './outside-event-plugin'; -import { ModalRenderer, DOMModalRenderer } from '../angular2-modal'; - -export { DOMOutsideEventPlugin } from './outside-event-plugin'; - -export const MODAL_BROWSER_PROVIDERS: Provider[] = [ - provide(ModalRenderer, {useClass: DOMModalRenderer}), - provide(EVENT_MANAGER_PLUGINS, { multi: true, useClass: DOMOutsideEventPlugin}) -]; diff --git a/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts b/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts new file mode 100644 index 00000000..6499a8b1 --- /dev/null +++ b/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts @@ -0,0 +1,44 @@ +import { NgModule, ModuleWithProviders } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { Modal } from './modal'; +import { BSModalBackdrop } from './modal-backdrop'; +import { BSMessageModal } from './message-modal'; +import { BSModalContainer } from './modal-container'; +import { BSModalFooter } from './modal-footer'; + + +import { OneButtonPresetBuilder } from './presets/one-button-preset'; +import { TwoButtonPresetBuilder } from './presets/two-button-preset'; + +import { + Modal as BaseModal, + ModalBackdropComponent, + ModalDropInFactory +} from '../../angular2-modal'; + +@NgModule({ + imports: [ CommonModule ], + declarations: [ + BSModalBackdrop, + BSMessageModal, + BSModalContainer, + BSModalFooter + ], + providers: [ + { provide: BaseModal, useClass: Modal }, + { provide: Modal, useClass: Modal }, + { provide: ModalBackdropComponent, useValue: BSModalBackdrop }, + { provide: ModalDropInFactory, useValue: { + alert: modal => new OneButtonPresetBuilder(modal, {isBlocking: false}), + prompt: modal => new OneButtonPresetBuilder(modal, {isBlocking: true, keyboard: null}), + confirm: modal => new TwoButtonPresetBuilder(modal, {isBlocking: true, keyboard: null}) + }} + ], + entryComponents: [ + BSModalBackdrop, + BSMessageModal + ] +}) +export class BootstrapModalModule {} + diff --git a/src/components/angular2-modal/plugins/bootstrap/index.ts b/src/components/angular2-modal/plugins/bootstrap/index.ts index 0062731b..76bf3e91 100644 --- a/src/components/angular2-modal/plugins/bootstrap/index.ts +++ b/src/components/angular2-modal/plugins/bootstrap/index.ts @@ -1,17 +1,3 @@ -import { Provider } from '@angular/core'; - -import { Modal } from './modal'; -import { BSModalBackdrop } from './modal-backdrop'; -import { OneButtonPresetBuilder } from './presets/one-button-preset'; -import { TwoButtonPresetBuilder } from './presets/two-button-preset'; - -import { - Modal as BaseModal, - ModalBackdropComponent, - ModalDropInFactory, - MODAL_PROVIDERS -} from '../../angular2-modal'; - export { BootstrapModalSize, BSModalContext, BSModalContextBuilder } from './modal-context'; export { BSModalBackdrop } from './modal-backdrop'; export { BSModalContainer } from './modal-container'; @@ -28,14 +14,4 @@ export { OneButtonPreset, OneButtonPresetBuilder } from './presets/one-button-pr export { TwoButtonPreset, TwoButtonPresetBuilder } from './presets/two-button-preset'; export { BSModal, Modal } from './modal'; -export const BS_MODAL_PROVIDERS: any[] = [ - ...MODAL_PROVIDERS, - new Provider(BaseModal, { useClass: Modal }), - new Provider(Modal, { useClass: Modal }), - new Provider(ModalBackdropComponent, { useValue: BSModalBackdrop }), - new Provider(ModalDropInFactory, { useValue: { - alert: modal => new OneButtonPresetBuilder(modal, {isBlocking: false}), - prompt: modal => new OneButtonPresetBuilder(modal, {isBlocking: true, keyboard: null}), - confirm: modal => new TwoButtonPresetBuilder(modal, {isBlocking: true, keyboard: null}) - }}) -]; +export { BootstrapModalModule } from './bootstrap.module'; diff --git a/src/components/angular2-modal/plugins/bootstrap/message-modal.ts b/src/components/angular2-modal/plugins/bootstrap/message-modal.ts index 2cb229db..c6b4466e 100644 --- a/src/components/angular2-modal/plugins/bootstrap/message-modal.ts +++ b/src/components/angular2-modal/plugins/bootstrap/message-modal.ts @@ -37,7 +37,6 @@ export interface BSMessageModalButtonConfig { */ @Component({ selector: 'modal-content', - directives: [BSModalFooter], encapsulation: ViewEncapsulation.None, template: `
diff --git a/src/components/angular2-modal/plugins/bootstrap/modal-backdrop.ts b/src/components/angular2-modal/plugins/bootstrap/modal-backdrop.ts index 1ae7aad4..4a4f9650 100644 --- a/src/components/angular2-modal/plugins/bootstrap/modal-backdrop.ts +++ b/src/components/angular2-modal/plugins/bootstrap/modal-backdrop.ts @@ -11,8 +11,6 @@ import { } from '@angular/core'; import { DialogRef } from '../../angular2-modal'; - -import { BSModalContainer } from './modal-container'; import { BSModalContext } from './modal-context'; let dialogRefCount = 0; @@ -31,7 +29,6 @@ let dialogRefCount = 0; '[style.right]': 'hs.pt', '[style.bottom]': 'hs.pt' }, - directives: [BSModalContainer], animations: [ trigger('fade', [ transition('void => in', [ @@ -54,7 +51,7 @@ let dialogRefCount = 0; ]) ], encapsulation: ViewEncapsulation.None, - template: `
+ template: `
` }) export class BSModalBackdrop implements OnDestroy { diff --git a/src/components/angular2-modal/plugins/bootstrap/modal-container.ts b/src/components/angular2-modal/plugins/bootstrap/modal-container.ts index 11a56473..73cf90ac 100644 --- a/src/components/angular2-modal/plugins/bootstrap/modal-container.ts +++ b/src/components/angular2-modal/plugins/bootstrap/modal-container.ts @@ -1,6 +1,6 @@ import { Component, - ComponentResolver, + ComponentFactoryResolver, ViewContainerRef, ReflectiveInjector, ViewChild, @@ -61,7 +61,7 @@ import { BSModalContext } from './modal-context'; template: `
+ [@fade]="fadeState">
{ - const vcr = this._viewContainer, + const cmpFactory = this._cr.resolveComponentFactory(this._compileConfig.component as any), + vcr = this._viewContainer, bindings = this._compileConfig.bindings, - ctxInjector = vcr.parentInjector; + ctxInjector = vcr.parentInjector, + childInjector = Array.isArray(bindings) && bindings.length > 0 ? + ReflectiveInjector.fromResolvedProviders(bindings, ctxInjector) : ctxInjector; - const childInjector = Array.isArray(bindings) && bindings.length > 0 ? - ReflectiveInjector.fromResolvedProviders(bindings, ctxInjector) : ctxInjector; - - if (this.el.nativeElement) { - this.el.nativeElement.focus(); - } + if (this.el.nativeElement) { + this.el.nativeElement.focus(); + } - this.dialog.contentRef = vcr.createComponent(cmpFactory, vcr.length, childInjector); - }); + /* TODO: + In RC5 dynamic component creation is no longer async. + Somewhere down the pipe of the created component a value change happens that fires + a CD exception. setTimeout is a workaround that mimics the async behavior. + Find out the error and remove setTimeout. + */ + setTimeout( + () => this.dialog.contentRef = vcr.createComponent(cmpFactory, vcr.length, childInjector) + ); } onClickOutside() { diff --git a/src/components/angular2-modal/providers/dom-modal-renderer.ts b/src/components/angular2-modal/providers/dom-modal-renderer.ts index 1b0dada3..e08069a3 100644 --- a/src/components/angular2-modal/providers/dom-modal-renderer.ts +++ b/src/components/angular2-modal/providers/dom-modal-renderer.ts @@ -1,6 +1,6 @@ import { ViewContainerRef, - ComponentResolver, + ComponentFactoryResolver, ComponentRef, ResolvedReflectiveProvider, ReflectiveInjector, @@ -14,38 +14,49 @@ import { ModalRenderer } from '../models/tokens'; @Injectable() export class DOMModalRenderer implements ModalRenderer { - constructor(private _cr: ComponentResolver) { + constructor(private _cr: ComponentFactoryResolver) { } - render(type: Type, + render(type: any, viewContainer: ViewContainerRef, bindings: ResolvedReflectiveProvider[], - dialog: DialogRef): Promise> { - - return this._cr.resolveComponent(type) - .then(cmpFactory => { - const ctxInjector = viewContainer.parentInjector; - const childInjector = Array.isArray(bindings) && bindings.length > 0 ? - ReflectiveInjector.fromResolvedProviders(bindings, ctxInjector) : ctxInjector; - return viewContainer.createComponent(cmpFactory, viewContainer.length, childInjector); - }) - .then((cmpRef: ComponentRef) => { - if (dialog.inElement) { - viewContainer.element.nativeElement.appendChild(cmpRef.location.nativeElement); - } else { - document.body.appendChild(cmpRef.location.nativeElement); - } - - dialog.onDestroy.subscribe( () => { - if (typeof cmpRef.instance.canDestroy === 'function') { - cmpRef.instance.canDestroy().then ( () => cmpRef.destroy() ); - } else { - cmpRef.destroy(); - } - }); - - return dialog; - }); + dialog: DialogRef): DialogRef { + + + const cmpRef = this.createComponent(type, viewContainer, bindings); + + if (dialog.inElement) { + viewContainer.element.nativeElement.appendChild(cmpRef.location.nativeElement); + } else { + document.body.appendChild(cmpRef.location.nativeElement); + } + + dialog.onDestroy.subscribe( () => { + if (typeof cmpRef.instance.canDestroy === 'function') { + cmpRef.instance.canDestroy().then ( () => cmpRef.destroy() ); + } else { + cmpRef.destroy(); + } + }); + + return dialog; + } + + private createComponent(type: any, + viewContainer: ViewContainerRef, + bindings: ResolvedReflectiveProvider[]): ComponentRef { + return viewContainer.createComponent( + this._cr.resolveComponentFactory(type), + viewContainer.length, + this.getInjector(viewContainer, bindings) + ); + } + + private getInjector(viewContainer: ViewContainerRef, bindings: ResolvedReflectiveProvider[]) { + const ctxInjector = viewContainer.parentInjector; + return Array.isArray(bindings) && bindings.length > 0 ? + ReflectiveInjector.fromResolvedProviders(bindings, ctxInjector) : ctxInjector; + } } diff --git a/src/components/angular2-modal/providers/modal.ts b/src/components/angular2-modal/providers/modal.ts index 56285ea2..62ea1c3e 100644 --- a/src/components/angular2-modal/providers/modal.ts +++ b/src/components/angular2-modal/providers/modal.ts @@ -113,12 +113,11 @@ export class Modal { {provide: ModalCompileConfig, useValue: compileConfig} ]); - return this._modalRenderer.render(this._backdrop, viewContainer, b, dialog) - .then(dialog => { - _stack.pushManaged(dialog); - dialog.onDestroy.subscribe( () => _stack.remove(dialog) ); - return dialog; - }); + this._modalRenderer.render(this._backdrop, viewContainer, b, dialog); + _stack.pushManaged(dialog); + dialog.onDestroy.subscribe( () => _stack.remove(dialog) ); + + return Promise.resolve(dialog); } /** diff --git a/src/components/angular2-modal/platform-browser/outside-event-plugin.ts b/src/components/angular2-modal/providers/outside-event-plugin.ts similarity index 97% rename from src/components/angular2-modal/platform-browser/outside-event-plugin.ts rename to src/components/angular2-modal/providers/outside-event-plugin.ts index 99a1af93..97a87a1d 100644 --- a/src/components/angular2-modal/platform-browser/outside-event-plugin.ts +++ b/src/components/angular2-modal/providers/outside-event-plugin.ts @@ -1,88 +1,88 @@ -// heavily inspired by: -// http://www.bennadel.com/blog/3025-creating-custom-dom-and-host-event-bindings-in-angular-2-beta-6.htm - -import { Injectable } from '@angular/core'; -import { EventManager } from '@angular/platform-browser'; -import { noop } from '../framework/utils'; - -const eventMap = { - clickOutside: 'click', - mousedownOutside: 'mousedown', - mouseupOutside: 'mouseup', - mousemoveOutside: 'mousemove' -}; - -/** - * An event handler factory for event handlers that bubble the event to a given handler - * if the event target is not an ancestor of the given element. - * @param element - * @param handler - * @returns {function(any): undefined} - */ -function bubbleNonAncestorHandlerFactory(element: HTMLElement, handler: (event) => void) { - return (event) => { - let current = event.target; - do { - if (current === element) { - return; - } - } while (current.parentNode && ( current = current.parentNode )); - - handler(event); - }; -} - -@Injectable() -export class DOMOutsideEventPlugin { // extends EventManagerPlugin - manager: EventManager; - - constructor() { - // TODO: use DI factory for this. - if (!document || typeof document.addEventListener !== 'function') { - this.addEventListener = noop as any; - } - } - - supports(eventName: string): boolean { - return eventMap.hasOwnProperty(eventName); - } - - addEventListener(element: HTMLElement, eventName: string, handler: Function): Function { - const zone = this.manager.getZone(); - - // A Factory that registers the event on the document, instead of the element. - // the handler is created at runtime, and it acts as a propagation/bubble predicate, it will - // bubble up the event (i.e: execute our original event handler) only if the event targer - // is an ancestor of our element. - // The event is fired inside the angular zone so change detection can kick into action. - const onceOnOutside = () => { - const listener = - bubbleNonAncestorHandlerFactory(element, evt => zone.runGuarded(() => handler(evt))); - - // mimic BrowserDomAdapter.onAndCancel - document.addEventListener(eventMap[eventName], listener, false); - return () => document.removeEventListener(eventMap[eventName], listener, false); - }; - - // we run the event registration for the document in a different zone, this will make sure - // change detection is off. - // It turns out that if a component that use DOMOutsideEventPlugin is built from a click - // event, we might get here before the event reached the document, causing a quick false - // positive handling (when stopPropagation() was'nt invoked). To workaround this we wait - // for the next vm turn and register. - // Event registration returns a dispose function for that event, angular use it to clean - // up after component get's destroyed. Since we need to return a dispose function - // synchronously we have to put a wrapper for it since we will get it asynchronously, - // i.e: after we need to return it. - // - return zone.runOutsideAngular(() => { - let fn: Function; - setTimeout(() => fn = onceOnOutside(), 0); - return () => fn(); - }); - } - - addGlobalEventListener(target: string, eventName: string, handler: Function): Function { - throw 'not supported'; - } -} +// heavily inspired by: +// http://www.bennadel.com/blog/3025-creating-custom-dom-and-host-event-bindings-in-angular-2-beta-6.htm + +import { Injectable } from '@angular/core'; +import { EventManager } from '@angular/platform-browser'; +import { noop } from '../framework/utils'; + +const eventMap = { + clickOutside: 'click', + mousedownOutside: 'mousedown', + mouseupOutside: 'mouseup', + mousemoveOutside: 'mousemove' +}; + +/** + * An event handler factory for event handlers that bubble the event to a given handler + * if the event target is not an ancestor of the given element. + * @param element + * @param handler + * @returns {function(any): undefined} + */ +function bubbleNonAncestorHandlerFactory(element: HTMLElement, handler: (event) => void) { + return (event) => { + let current = event.target; + do { + if (current === element) { + return; + } + } while (current.parentNode && ( current = current.parentNode )); + + handler(event); + }; +} + +@Injectable() +export class DOMOutsideEventPlugin { // extends EventManagerPlugin + manager: EventManager; + + constructor() { + // TODO: use DI factory for this. + if (!document || typeof document.addEventListener !== 'function') { + this.addEventListener = noop as any; + } + } + + supports(eventName: string): boolean { + return eventMap.hasOwnProperty(eventName); + } + + addEventListener(element: HTMLElement, eventName: string, handler: Function): Function { + const zone = this.manager.getZone(); + + // A Factory that registers the event on the document, instead of the element. + // the handler is created at runtime, and it acts as a propagation/bubble predicate, it will + // bubble up the event (i.e: execute our original event handler) only if the event targer + // is an ancestor of our element. + // The event is fired inside the angular zone so change detection can kick into action. + const onceOnOutside = () => { + const listener = + bubbleNonAncestorHandlerFactory(element, evt => zone.runGuarded(() => handler(evt))); + + // mimic BrowserDomAdapter.onAndCancel + document.addEventListener(eventMap[eventName], listener, false); + return () => document.removeEventListener(eventMap[eventName], listener, false); + }; + + // we run the event registration for the document in a different zone, this will make sure + // change detection is off. + // It turns out that if a component that use DOMOutsideEventPlugin is built from a click + // event, we might get here before the event reached the document, causing a quick false + // positive handling (when stopPropagation() was'nt invoked). To workaround this we wait + // for the next vm turn and register. + // Event registration returns a dispose function for that event, angular use it to clean + // up after component get's destroyed. Since we need to return a dispose function + // synchronously we have to put a wrapper for it since we will get it asynchronously, + // i.e: after we need to return it. + // + return zone.runOutsideAngular(() => { + let fn: Function; + setTimeout(() => fn = onceOnOutside(), 0); + return () => fn(); + }); + } + + addGlobalEventListener(target: string, eventName: string, handler: Function): Function { + throw 'not supported'; + } +} diff --git a/src/demo/app/app.module.ts b/src/demo/app/app.module.ts new file mode 100644 index 00000000..b92089d4 --- /dev/null +++ b/src/demo/app/app.module.ts @@ -0,0 +1,25 @@ +import { NgModule } from '@angular/core'; +import { LocationStrategy, HashLocationStrategy } from '@angular/common'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ModalModule } from '../../components/angular2-modal'; + +import { routing } from './app.routes'; +import { BootstrapDemoModule } from './bootstrap-demo/bootstrap-demo.module'; +import { App } from './app'; +import { Home } from './home/home'; + +@NgModule({ + imports: [ + BrowserModule, + routing, + ModalModule.forRoot(), + BootstrapDemoModule + ], + declarations: [ App, Home ], + bootstrap: [ App ], + providers: [ + { provide: LocationStrategy, useClass: HashLocationStrategy }, + ] +}) +export class AppModule { } diff --git a/src/demo/app/app.routes.ts b/src/demo/app/app.routes.ts index 13e2e2ed..13afb5d2 100644 --- a/src/demo/app/app.routes.ts +++ b/src/demo/app/app.routes.ts @@ -1,19 +1,15 @@ -import { provideRouter, RouterConfig } from '@angular/router'; +import { ModuleWithProviders } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; import { Home } from './home/home'; -import { VexDemo } from './vex-demo/vex-demo'; -import { JSNativeDemo } from './js-native-demo/js-native-demo'; +// import { VexDemo } from './vex-demo/vex-demo'; +// import { JSNativeDemo } from './js-native-demo/js-native-demo'; -import { BSDemoRoutes } from './bootstrap-demo/bootstrap-demo.routes'; - -export const routes: RouterConfig = [ +export const routes: Routes = [ { path: 'home', component: Home }, { path: '', redirectTo: 'home', terminal: true }, - { path: 'vex-demo', component: VexDemo }, - { path: 'js-native-demo', component: JSNativeDemo }, - ...BSDemoRoutes + // { path: 'vex-demo', component: VexDemo }, + // { path: 'js-native-demo', component: JSNativeDemo } ]; -export const APP_ROUTER_PROVIDERS = [ - provideRouter(routes) -]; +export const routing: ModuleWithProviders = RouterModule.forRoot(routes); diff --git a/src/demo/app/app.ts b/src/demo/app/app.ts index b8a408b5..f1ff1c66 100644 --- a/src/demo/app/app.ts +++ b/src/demo/app/app.ts @@ -7,9 +7,6 @@ import { FORM_PROVIDERS } from '@angular/common'; */ @Component({ selector: 'app', - providers: [...FORM_PROVIDERS], - directives: [], - pipes: [], encapsulation: ViewEncapsulation.None, styleUrls: [ 'demo/app/app.css' diff --git a/src/demo/app/bootstrap-demo/bootstrap-demo.module.ts b/src/demo/app/bootstrap-demo/bootstrap-demo.module.ts new file mode 100644 index 00000000..daaa4770 --- /dev/null +++ b/src/demo/app/bootstrap-demo/bootstrap-demo.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BootstrapModalModule } from '../../../components/angular2-modal/plugins/bootstrap'; +import { CommonModule } from '@angular/common'; + +import { routing } from './bootstrap-demo.routes'; +import { BootstrapDemo } from './bootstrap-demo'; +import { BootstrapDemoPage } from './bootstrap-demo-page/bootstrap-demo-page'; +@NgModule({ + imports: [ CommonModule, BootstrapModalModule, routing ], + declarations: [ + BootstrapDemo, + BootstrapDemoPage + ] +}) +export class BootstrapDemoModule { } diff --git a/src/demo/app/bootstrap-demo/bootstrap-demo.routes.ts b/src/demo/app/bootstrap-demo/bootstrap-demo.routes.ts index f0b6a47f..872b0d28 100644 --- a/src/demo/app/bootstrap-demo/bootstrap-demo.routes.ts +++ b/src/demo/app/bootstrap-demo/bootstrap-demo.routes.ts @@ -1,12 +1,15 @@ -import { RouterConfig } from '@angular/router'; +import { ModuleWithProviders } from '@angular/core'; +import { RouterModule } from '@angular/router'; import { BootstrapDemo } from './bootstrap-demo'; import { BootstrapDemoPage } from './bootstrap-demo-page/bootstrap-demo-page'; import { ModalCustomisationWizard } from './modal-customisation-wizard/modal-customisation-wizard'; -export const BSDemoRoutes: RouterConfig = [ +export const routing: ModuleWithProviders = RouterModule.forChild([ { path: 'bootstrap-demo', component: BootstrapDemo, children: [ - { path: '', component: BootstrapDemoPage, terminal: true }, - { path: 'customizeModals', component: ModalCustomisationWizard }, - ]} -]; + { path: '', component: BootstrapDemoPage, terminal: true }, + // { path: 'customizeModals', component: ModalCustomisationWizard } + ] + } +]); + diff --git a/src/demo/app/bootstrap-demo/bootstrap-demo.ts b/src/demo/app/bootstrap-demo/bootstrap-demo.ts index c50d43a6..037ee8f4 100644 --- a/src/demo/app/bootstrap-demo/bootstrap-demo.ts +++ b/src/demo/app/bootstrap-demo/bootstrap-demo.ts @@ -1,20 +1,18 @@ -import {Component, ViewEncapsulation, ViewContainerRef} from '@angular/core'; +import { Component, ViewEncapsulation, ViewContainerRef } from '@angular/core'; -import {Modal, BS_MODAL_PROVIDERS} from '../../../components/angular2-modal/plugins/bootstrap/index'; +import { Modal } from '../../../components/angular2-modal/plugins/bootstrap'; @Component({ - selector: 'bootstrap-demo', - viewProviders: [ ...BS_MODAL_PROVIDERS ], - template: ``, - directives: [], - encapsulation: ViewEncapsulation.None + selector: 'bootstrap-demo', + template: ``, + encapsulation: ViewEncapsulation.None }) export class BootstrapDemo { - constructor(public modal: Modal, viewContainer: ViewContainerRef) { - /** - * A Default view container ref, usually the app root container ref. - * Has to be set manually until we can find a way to get it automatically. - */ - modal.defaultViewContainer = viewContainer; - } + constructor(public modal: Modal, viewContainer: ViewContainerRef) { + /** + * A Default view container ref, usually the app root container ref. + * Has to be set manually until we can find a way to get it automatically. + */ + modal.defaultViewContainer = viewContainer; + } } diff --git a/src/demo/app/home/home.ts b/src/demo/app/home/home.ts index 01e9f43a..187214b4 100644 --- a/src/demo/app/home/home.ts +++ b/src/demo/app/home/home.ts @@ -1,24 +1,24 @@ import { Component, ViewEncapsulation, ViewContainerRef, ViewChild, TemplateRef} from '@angular/core'; -import { IN_APP_MODAL_PROVIDERS, Modal } from './in-app-plugin/index'; +// import { IN_APP_MODAL_PROVIDERS, Modal } from './in-app-plugin/index'; @Component({ selector: 'home', - viewProviders: [ ...IN_APP_MODAL_PROVIDERS ], + // viewProviders: [ ...IN_APP_MODAL_PROVIDERS ], templateUrl: 'demo/app/home/home.tpl.html', encapsulation: ViewEncapsulation.None }) export class Home { - @ViewChild('injectPoint', {read: ViewContainerRef}) private injectVC: ViewContainerRef; - @ViewChild('myTemplate', {read: TemplateRef}) private myTemplate: TemplateRef; - - constructor(private modal: Modal) {} - - ngAfterViewInit() { - this.modal.alert() - .title('Angular 2 Modal') - .templateRef(this.myTemplate) - .open(this.injectVC); - - } + // @ViewChild('injectPoint', {read: ViewContainerRef}) private injectVC: ViewContainerRef; + // @ViewChild('myTemplate', {read: TemplateRef}) private myTemplate: TemplateRef; + // + // constructor(private modal: Modal) {} + // + // ngAfterViewInit() { + // this.modal.alert() + // .title('Angular 2 Modal') + // .templateRef(this.myTemplate) + // .open(this.injectVC); + // + // } }