From e6a673bd32c2ed14e8b42f82a6a2bb566c08c500 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 28 Apr 2016 23:12:56 -0500 Subject: [PATCH] chore(angular): update to angular 2.0.0-beta.16 --- ionic/components/nav/nav-controller.ts | 109 +++++++++++++----------- ionic/components/nav/nav-portal.ts | 17 ++-- ionic/components/nav/nav-router.ts | 9 +- ionic/components/nav/nav.ts | 62 ++++++++------ ionic/components/nav/view-controller.ts | 6 +- ionic/components/tabs/tab.ts | 28 +++--- ionic/components/tabs/tabs.ts | 6 +- ionic/config/bootstrap.ts | 3 +- package.json | 2 +- 9 files changed, 130 insertions(+), 112 deletions(-) diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index 671f703412..e469126381 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -1,4 +1,4 @@ -import {Compiler, ElementRef, Injector, provide, NgZone, AppViewManager, Renderer, ResolvedProvider, Type, Input} from 'angular2/core'; +import {ViewContainerRef, DynamicComponentLoader, provide, ReflectiveInjector, ResolvedReflectiveProvider, ElementRef, NgZone, Renderer, Type} from 'angular2/core'; import {wtfLeave, wtfCreateScope, WtfScopeFn, wtfStartTimeRange, wtfEndTimeRange} from 'angular2/instrumentation'; import {Config} from '../../config/config'; @@ -7,7 +7,7 @@ import {IonicApp} from '../app/app'; import {Keyboard} from '../../util/keyboard'; import {NavParams} from './nav-params'; import {pascalCaseToDashCase, isBlank} from '../../util/util'; -import {Portal} from './nav-portal'; +import {NavPortal} from './nav-portal'; import {SwipeBackGesture} from './swipe-back'; import {Transition} from '../../transitions/transition'; import {ViewController} from './view-controller'; @@ -147,7 +147,8 @@ export class NavController extends Ion { private _trans: Transition; private _sbGesture: SwipeBackGesture; private _sbThreshold: number; - private _portal: Portal; + private _portal: NavPortal; + private _viewport: ViewContainerRef; private _children: any[] = []; protected _sbEnabled: boolean; @@ -164,7 +165,7 @@ export class NavController extends Ion { /** * @private */ - providers: ResolvedProvider[]; + providers: ResolvedReflectiveProvider[]; /** * @private @@ -192,11 +193,9 @@ export class NavController extends Ion { config: Config, protected _keyboard: Keyboard, elementRef: ElementRef, - protected _anchorName: string, - protected _compiler: Compiler, - protected _viewManager: AppViewManager, protected _zone: NgZone, - protected _renderer: Renderer + protected _renderer: Renderer, + protected _loader: DynamicComponentLoader ) { super(elementRef); @@ -211,7 +210,7 @@ export class NavController extends Ion { this.id = (++ctrlIds).toString(); // build a new injector for child ViewControllers to use - this.providers = Injector.resolve([ + this.providers = ReflectiveInjector.resolve([ provide(NavController, {useValue: this}) ]); } @@ -219,10 +218,17 @@ export class NavController extends Ion { /** * @private */ - setPortal(val: Portal) { + setPortal(val: NavPortal) { this._portal = val; } + /** + * @private + */ + setViewport(val: ViewContainerRef) { + this._viewport = val; + } + /** * Set the root for the current navigation stack. * @param {Type} page The name of the component you want to push on the navigation stack. @@ -988,6 +994,9 @@ export class NavController extends Ion { }); } + /** + * @private + */ private _setAnimate(opts: NavOptions) { if ((this._views.length === 1 && !this._init && !this.isPortal) || this.config.get('animate') === false) { opts.animate = false; @@ -1285,7 +1294,9 @@ export class NavController extends Ion { // class to the nav when it's finished its first transition if (!this._init) { this._init = true; - this._renderer.setElementClass(this.elementRef.nativeElement, 'has-views', true); + if (!this.isPortal) { + this._renderer.setElementClass(this.getNativeElement(), 'has-views', true); + } } } else { @@ -1406,75 +1417,71 @@ export class NavController extends Ion { /** * @private */ - loadPage(view: ViewController, navbarContainerRef, opts: NavOptions, done: Function) { + loadPage(view: ViewController, navbarContainerRef: ViewContainerRef, opts: NavOptions, done: Function) { let wtfTimeRangeScope = wtfStartTimeRange('NavController#loadPage', view.name); - // guts of DynamicComponentLoader#loadIntoLocation - this._compiler && this._compiler.compileInHost(view.componentType).then(hostProtoViewRef => { + if (!this._viewport || !view.componentType) { + return; + } + + let providers = this.providers.concat(ReflectiveInjector.resolve([ + provide(ViewController, {useValue: view}), + provide(NavParams, {useValue: view.getNavParams()}) + ])); + + // load the page component inside the nav + this._loader.loadNextToLocation(view.componentType, this._viewport, providers).then(component => { let wtfScope = wtfCreateScope('NavController#loadPage_After_Compile')(); - let providers = this.providers.concat(Injector.resolve([ - provide(ViewController, {useValue: view}), - provide(NavParams, {useValue: view.getNavParams()}) - ])); + // the ElementRef of the actual ion-page created + let pageElementRef = component.location; - let location = this.elementRef; - if (this._anchorName) { - location = this._viewManager.getNamedElementInComponentView(location, this._anchorName); - } + // a new ComponentRef has been created + // set the ComponentRef's instance to its ViewController + view.setInstance(component.instance); - let viewContainer = this._viewManager.getViewContainer(location); - let hostViewRef: any = - viewContainer.createHostView(hostProtoViewRef, viewContainer.length, providers); - let pageElementRef = this._viewManager.getHostElement(hostViewRef); - let component = this._viewManager.getComponent(pageElementRef); + // remember the ChangeDetectorRef for this ViewController + view.setChangeDetector(component.changeDetectorRef); + + // remember the ElementRef to the ion-page elementRef that was just created + view.setPageRef(pageElementRef); // auto-add page css className created from component JS class name let cssClassName = pascalCaseToDashCase(view.componentType['name']); this._renderer.setElementClass(pageElementRef.nativeElement, cssClassName, true); - view.addDestroy(() => { + view.onDestroy(() => { // ensure the element is cleaned up for when the view pool reuses this element this._renderer.setElementAttribute(pageElementRef.nativeElement, 'class', null); this._renderer.setElementAttribute(pageElementRef.nativeElement, 'style', null); - - // remove the page from its container - let index = viewContainer.indexOf(hostViewRef); - if (!hostViewRef.destroyed && index !== -1) { - viewContainer.remove(index); - } - - view.setInstance(null); + component.destroy(); }); - // a new ComponentRef has been created - // set the ComponentRef's instance to this ViewController - view.setInstance(component); - - // remember the ChangeDetectorRef for this ViewController - view.setChangeDetector(hostViewRef.changeDetectorRef); - - // remember the ElementRef to the ion-page elementRef that was just created - view.setPageRef(pageElementRef); - if (!navbarContainerRef) { + // there was not a navbar container ref already provided + // so use the location of the actual navbar template navbarContainerRef = view.getNavbarViewRef(); } + // find a navbar template if one is in the page let navbarTemplateRef = view.getNavbarTemplateRef(); + + // check if we have both a navbar ViewContainerRef and a template if (navbarContainerRef && navbarTemplateRef) { + // let's now create the navbar view let navbarViewRef = navbarContainerRef.createEmbeddedView(navbarTemplateRef); - view.addDestroy(() => { - let index = navbarContainerRef.indexOf(navbarViewRef); - if (!navbarViewRef.destroyed && index > -1) { - navbarContainerRef.remove(index); - } + view.onDestroy(() => { + // manually destroy the navbar when the page is destroyed + navbarViewRef.destroy(); }); } + // options may have had a postLoad method + // used mainly by tabs opts.postLoad && opts.postLoad(view); + // complete wtf loggers wtfEndTimeRange(wtfTimeRangeScope); wtfLeave(wtfScope); diff --git a/ionic/components/nav/nav-portal.ts b/ionic/components/nav/nav-portal.ts index add121766d..8732d2d059 100644 --- a/ionic/components/nav/nav-portal.ts +++ b/ionic/components/nav/nav-portal.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, Input, Optional, NgZone, Compiler, AppViewManager, Renderer, Type, ContentChild} from 'angular2/core'; +import {Directive, ElementRef, Optional, NgZone, Renderer, DynamicComponentLoader, ViewContainerRef} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; @@ -10,22 +10,23 @@ import {ViewController} from './view-controller'; * @private */ @Directive({ - selector: '[portal]' + selector: '[nav-portal]' }) -export class Portal extends NavController { +export class NavPortal extends NavController { constructor( - @Optional() hostNavCtrl: NavController, @Optional() viewCtrl: ViewController, + @Optional() parent: NavController, app: IonicApp, config: Config, keyboard: Keyboard, elementRef: ElementRef, - compiler: Compiler, - viewManager: AppViewManager, zone: NgZone, - renderer: Renderer + renderer: Renderer, + loader: DynamicComponentLoader, + viewPort: ViewContainerRef ) { - super(hostNavCtrl, app, config, keyboard, elementRef, null, compiler, viewManager, zone, renderer); + super(parent, app, config, keyboard, elementRef, zone, renderer, loader); this.isPortal = true; + this.setViewport(viewPort); } } diff --git a/ionic/components/nav/nav-router.ts b/ionic/components/nav/nav-router.ts index e9e524f267..205ca62d80 100644 --- a/ionic/components/nav/nav-router.ts +++ b/ionic/components/nav/nav-router.ts @@ -1,10 +1,9 @@ -import {Directive, ElementRef, DynamicComponentLoader, Attribute} from 'angular2/core'; +import {Directive, ViewContainerRef, DynamicComponentLoader, Attribute} from 'angular2/core'; import { RouterOutlet, Router, ComponentInstruction, - Instruction, - Location} from 'angular2/router'; + Instruction} from 'angular2/router'; import {Nav} from './nav'; import {ViewController} from './view-controller'; @@ -21,7 +20,7 @@ export class NavRouter extends RouterOutlet { private _parent: Router; constructor( - elementRef: ElementRef, + viewContainerRef: ViewContainerRef, loader: DynamicComponentLoader, parentRouter: Router, @Attribute('name') nameAttr: string, @@ -30,7 +29,7 @@ export class NavRouter extends RouterOutlet { if (nav.parent) { parentRouter = parentRouter.childRouter(nav); } - super(elementRef, loader, parentRouter, nameAttr); + super(viewContainerRef, loader, parentRouter, nameAttr); this._nav = nav; this._parent = parentRouter; diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index 41c235c469..09f7dc7b34 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -1,11 +1,11 @@ -import {Component, ElementRef, Input, Optional, NgZone, Compiler, AppViewManager, Renderer, Type, ViewChild, ViewEncapsulation} from 'angular2/core'; +import {Component, ElementRef, ViewContainerRef, DynamicComponentLoader, Input, Optional, NgZone, Renderer, Type, ViewChild, ViewEncapsulation, AfterViewInit} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; import {Keyboard} from '../../util/keyboard'; import {isTrueProperty} from '../../util/util'; import {NavController} from './nav-controller'; -import {Portal} from './nav-portal'; +import {NavPortal} from './nav-portal'; import {ViewController} from './view-controller'; /** @@ -39,7 +39,8 @@ import {ViewController} from './view-controller'; * } * ``` * - *

Back navigation

+ * ### Back Navigation + * * If a [page](../NavController/#creating_pages) you navigate to has a [NavBar](../NavBar/), * Nav will automatically add a back button to it if there is a page * before the one you are navigating to in the navigation stack. @@ -105,27 +106,26 @@ import {ViewController} from './view-controller'; */ @Component({ selector: 'ion-nav', - template: '
', - directives: [Portal], + template: '
', + directives: [NavPortal], encapsulation: ViewEncapsulation.None, }) -export class Nav extends NavController { +export class Nav extends NavController implements AfterViewInit { private _root: Type; private _hasInit: boolean = false; constructor( - @Optional() parent: NavController, @Optional() viewCtrl: ViewController, + @Optional() parent: NavController, app: IonicApp, config: Config, keyboard: Keyboard, elementRef: ElementRef, - compiler: Compiler, - viewManager: AppViewManager, zone: NgZone, - renderer: Renderer + renderer: Renderer, + loader: DynamicComponentLoader ) { - super(parent, app, config, keyboard, elementRef, 'contents', compiler, viewManager, zone, renderer); + super(parent, app, config, keyboard, elementRef, zone, renderer, loader); if (viewCtrl) { // an ion-nav can also act as an ion-page within a parent ion-nav @@ -144,6 +144,28 @@ export class Nav extends NavController { } } + /** + * @private + */ + @ViewChild('viewport', {read: ViewContainerRef}) + set _vp(val: ViewContainerRef) { + this.setViewport(val); + } + + /** + * @private + */ + ngAfterViewInit() { + this._hasInit = true; + + if (this._root) { + if (typeof this._root !== 'function') { + throw 'The [root] property in must be given a reference to a component class from within the constructor.'; + } + this.push(this._root); + } + } + /** * @input {Page} The Page component to load as the root page within this nav. */ @@ -171,22 +193,8 @@ export class Nav extends NavController { this._sbEnabled = isTrueProperty(val); } - /** - * @private - */ - ngOnInit() { - this._hasInit = true; - - if (this._root) { - if (typeof this._root !== 'function') { - throw 'The [root] property in must be given a reference to a component class from within the constructor.'; - } - this.push(this._root); - } - } - - @ViewChild(Portal) - private set _navPortal(val: Portal) { + @ViewChild(NavPortal) + private set _np(val: NavPortal) { this.setPortal(val); } } diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts index 069c74d6e6..a9bffa2fcb 100644 --- a/ionic/components/nav/view-controller.ts +++ b/ionic/components/nav/view-controller.ts @@ -24,7 +24,7 @@ import {isPresent} from '../../util/util'; export class ViewController { private _cntDir: any; private _cntRef: ElementRef; - private _destroys: Array = []; + private _destroys: Function[] = []; private _hdAttr: string = null; private _leavingOpts: NavOptions = null; private _loaded: boolean = false; @@ -529,7 +529,7 @@ export class ViewController { /** * @private */ - addDestroy(destroyFn: Function) { + onDestroy(destroyFn: Function) { this._destroys.push(destroyFn); } @@ -542,7 +542,7 @@ export class ViewController { for (var i = 0; i < this._destroys.length; i++) { this._destroys[i](); } - this._destroys = []; + this._destroys.length = 0; } } diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index 10873878a8..cdedf7bca0 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -1,5 +1,4 @@ -import {Component, Directive, Host, Inject, forwardRef, ElementRef, Compiler, AppViewManager, NgZone, Renderer, Type, ViewEncapsulation, ChangeDetectorRef} from 'angular2/core'; -import {EventEmitter, Input, Output} from 'angular2/core'; +import {Component, Inject, forwardRef, ElementRef, NgZone, Renderer, DynamicComponentLoader, ViewContainerRef, ViewChild, Type, ViewEncapsulation, ChangeDetectorRef, EventEmitter, Input, Output} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; @@ -124,15 +123,10 @@ import {TabButton} from './tab-button'; '[attr.aria-labelledby]': '_btnId', 'role': 'tabpanel' }, - template: '
', + template: '
', encapsulation: ViewEncapsulation.None, }) export class Tab extends NavController { - - /** - * @private - */ - public isSelected: boolean; private _isInitial: boolean; private _isEnabled: boolean = true; private _isShown: boolean = true; @@ -141,6 +135,11 @@ export class Tab extends NavController { private _loaded: boolean; private _loadTmr: any; + /** + * @private + */ + isSelected: boolean; + /** * @private */ @@ -213,14 +212,13 @@ export class Tab extends NavController { config: Config, keyboard: Keyboard, elementRef: ElementRef, - compiler: Compiler, - viewManager: AppViewManager, zone: NgZone, renderer: Renderer, + loader: DynamicComponentLoader, private _cd: ChangeDetectorRef ) { // A Tab is a NavController for its child pages - super(parentTabs, app, config, keyboard, elementRef, 'contents', compiler, viewManager, zone, renderer); + super(parentTabs, app, config, keyboard, elementRef, zone, renderer, loader); parentTabs.add(this); @@ -228,6 +226,14 @@ export class Tab extends NavController { this._btnId = 'tab-' + this.id; } + /** + * @private + */ + @ViewChild('viewport', {read: ViewContainerRef}) + set _vp(val: ViewContainerRef) { + this.setViewport(val); + } + /** * @private */ diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index 65edb2f2ba..502e915be9 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -281,12 +281,7 @@ export class Tabs extends Ion { this.select(tab); }); }); - } - /** - * @private - */ - ngAfterContentInit() { let preloadTabs = (isBlank(this.preloadTabs) ? this._config.getBoolean('preloadTabs') : isTrueProperty(this.preloadTabs)); // get the selected index @@ -306,6 +301,7 @@ export class Tabs extends Ion { selectedIndex = -1; } }); + if (selectedIndex < 0) { // the selected index wasn't safe to show // instead use an available index found to be safe to show diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts index af42c458d6..7618013fed 100644 --- a/ionic/config/bootstrap.ts +++ b/ionic/config/bootstrap.ts @@ -1,5 +1,6 @@ import {provide, Provider, ComponentRef, NgZone} from 'angular2/core'; -import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router'; +import {ROUTER_PROVIDERS} from 'angular2/router'; +import {LocationStrategy, HashLocationStrategy} from 'angular2/platform/common'; import {HTTP_PROVIDERS} from 'angular2/http'; import {ClickBlock} from '../util/click-block'; diff --git a/package.json b/package.json index b7f1269188..9de98841e8 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "link": "npm install && gulp src && npm link" }, "dependencies": { - "angular2": "2.0.0-beta.15", + "angular2": "2.0.0-beta.16", "colors": "^1.1.2", "es6-shim": "^0.35.0", "inquirer": "0.11.0",