feat(view): implemented loading component next to existing location

Author: vsavkin

modules/angular2/src/core/application.js

@@ -75,7 +75,7 @@ function _injectorBindings(appComponentType): List<Binding> {
         // We need to do this here to ensure that we create Testability and
         // it's ready on the window for users.
         registry.registerApplication(appElement, testability);
-        return dynamicComponentLoader.loadIntoNewLocation(appElement, appComponentAnnotatedType.type, null, injector);
+        return dynamicComponentLoader.loadIntoNewLocation(appElement, appComponentAnnotatedType.type, injector);
       }, [DynamicComponentLoader, Injector, appElementToken, appComponentAnnotatedTypeToken,
         Testability, TestabilityRegistry]),
 

modules/angular2/src/core/compiler/dynamic_component_loader.js

@@ -16,11 +16,13 @@ export class ComponentRef {
   location:ElementRef;
   instance:any;
   componentView:AppView;
+  _dispose:Function;
 
-  constructor(location:ElementRef, instance:any, componentView:AppView){
+  constructor(location:ElementRef, instance:any, componentView:AppView, dispose:Function){
     this.location = location;
     this.instance = instance;
     this.componentView = componentView;
+    this._dispose = dispose;
   }
 
   get injector() {
@@ -30,6 +32,10 @@ export class ComponentRef {
   get hostView() {
     return this.location.hostView;
   }
+
+  dispose() {
+    this._dispose();
+  }
 }
 
 /**
@@ -72,16 +78,16 @@ export class DynamicComponentLoader {
       // from the component child views
       // See ViewFactory.returnView
       // See AppViewHydrator.dehydrateDynamicComponentView
-      return new ComponentRef(location, location.elementInjector.getDynamicallyLoadedComponent(), componentView);
+      var dispose = () => {throw "Not implemented";};
+      return new ComponentRef(location, location.elementInjector.getDynamicallyLoadedComponent(), componentView, dispose);
     });
   }
 
   /**
-   * Loads a component as a child of the View given by the provided ElementRef. The loaded
-   * component receives injection normally as a hosted view.
+   * Loads a component in the element specified by elementOrSelector. The loaded component receives
+   * injection normally as a hosted view.
    */
-  loadIntoNewLocation(elementOrSelector:any, type:Type, location:ElementRef,
-                      injector:Injector = null):Promise<ComponentRef> {
+  loadIntoNewLocation(elementOrSelector:any, type:Type, injector:Injector = null):Promise<ComponentRef> {
     this._assertTypeIsComponent(type);
 
     return  this._compiler.compileInHost(type).then(hostProtoView => {
@@ -91,9 +97,30 @@ export class DynamicComponentLoader {
       // TODO(vsavkin): return a component ref that dehydrates the host view
       // See ViewFactory.returnView
       // See AppViewHydrator.dehydrateInPlaceHostView
-      var newLocation = new ElementRef(hostView.elementInjectors[0]);
+      var newLocation = hostView.elementInjectors[0].getElementRef();
+      var component = hostView.elementInjectors[0].getComponent();
+      var dispose = () => {throw "Not implemented";};
+      return new ComponentRef(newLocation, component, hostView.componentChildViews[0], dispose);
+    });
+  }
+
+  /**
+   * Loads a component next to the provided ElementRef. The loaded component receives
+   * injection normally as a hosted view.
+   */
+  loadNextToExistingLocation(type:Type, location:ElementRef, injector:Injector = null):Promise<ComponentRef> {
+    this._assertTypeIsComponent(type);
+
+    return this._compiler.compileInHost(type).then(hostProtoView => {
+      var hostView = location.viewContainer.create(-1, hostProtoView, injector);
+
+      var newLocation = hostView.elementInjectors[0].getElementRef();
       var component = hostView.elementInjectors[0].getComponent();
-      return new ComponentRef(newLocation, component, hostView.componentChildViews[0]);
+      var dispose = () => {
+        var index = location.viewContainer.indexOf(hostView);
+        location.viewContainer.remove(index);
+      };
+      return new ComponentRef(newLocation, component, hostView.componentChildViews[0], dispose);
     });
   }
 

modules/angular2/src/core/compiler/element_injector.js

@@ -672,6 +672,10 @@ export class ElementInjector extends TreeNode {
     }
   }
 
+  getElementRef() {
+    return new ElementRef(this);
+  }
+
   getDynamicallyLoadedComponent() {
     return this._dynamicallyCreatedComponent;
   }
@@ -741,7 +745,7 @@ export class ElementInjector extends TreeNode {
     if (isPresent(dep.attributeName)) return this._buildAttribute(dep);
     if (isPresent(dep.queryDirective)) return this._findQuery(dep.queryDirective).list;
     if (dep.key.id === StaticKeys.instance().elementRefId) {
-      return new ElementRef(this);
+      return this.getElementRef();
     }
     return this._getByKey(dep.key, dep.depth, dep.optional, requestor);
   }

modules/angular2/src/core/compiler/view_container.js

@@ -92,6 +92,10 @@ export class ViewContainer {
     return view;
   }
 
+  indexOf(view:viewModule.AppView) {
+    return ListWrapper.indexOf(this._views, view);
+  }
+
   remove(atIndex=-1) {
     if (atIndex == -1) atIndex = this._views.length - 1;
     var view = this._views[atIndex];

modules/angular2/src/facade/collection.es6

@@ -129,6 +129,9 @@ export class ListWrapper {
   static filter(array, pred:Function) {
     return array.filter(pred);
   }
+  static indexOf(array, value, startIndex = -1) {
+    return array.indexOf(value, startIndex);
+  }
   static any(list:List, pred:Function) {
     for (var i = 0 ; i < list.length; ++i) {
       if (pred(list[i])) return true;

modules/angular2/src/facade/collection.ts

@@ -114,6 +114,9 @@ export class ListWrapper {
     }
     return null;
   }
+  static indexOf(array: List<any>, value, startIndex = -1) {
+    return array.indexOf(value, startIndex);
+  }
   static reduce<T>(list: List<T>,
                    fn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T,
                    init: T) {