chore(angular): update to angular 2.0.0-beta.16

2025-08-20 20:33:32 +08:00 · 2016-04-28 23:12:56 -05:00
parent 49e1b20342
commit e6a673bd32
9 changed files with 130 additions and 112 deletions
--- 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);

--- 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);
  }
 }
--- 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;
--- 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';
 * }
 * ```
 *
- * <h2 id="back_navigation">Back navigation</h2>
+ * ### 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: '<div #contents></div><div portal></div>',
-  directives: [Portal],
+  template: '<div #viewport></div><div nav-portal></div>',
+  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 <ion-nav> 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 <ion-nav> 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);
  }
 }
--- 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<Function> = [];
+  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;
  }

 }
--- 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: '<div #contents></div>',
+  template: '<div #viewport></div>',
  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
   */
--- 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
--- 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';
--- 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",