Research for FF page editor integration

Angular

Something like the react-habitat bootstrapper?

A big problem is that Angular typically takes over one element in the DOM. Once angular takes that over - where can the page editor place its Area editing interface?

So, Is it possible to bootstrap multiple dom elements (ie one per component) so that they can run inside a Magnolia "area" node?

About Angular bootstrapping: https://angular-2-training-book.rangle.io/handout/bootstrapping/file_structure.html

bootstrap multiple angular applications

A simple example (I wonder if there are performance implications?)

https://blog.sstorie.com/bootstrapping-multiple-angular-2-applications-on-the-same-page/

boot multiple app root component into my index.html - (This looks really good.)

https://stackoverflow.com/questions/37066421/angular-2-bootstrap-multi-root-component
http://plnkr.co/edit/aZqdJe3OZ8K2odHioWkB?p=preview 

More flushed out example:

https://www.codeproject.com/Articles/1169333/A-Note-on-Angular-Bootstrap-Multiple-Apps

Search on "bootstrap" - " guess the best approach is to create a 2nd component outside Angulars root component is to call bootstrap() on each and use a shared service to communicate:"
https://stackoverflow.com/questions/36566698/how-to-dynamically-create-bootstrap-modals-as-angular2-components 

Notes on the angular Github:

https://github.com/angular/angular/issues/7136

longform bootstrap (a la Brad Green)

"we are able to instantiate an app and then bootstrap each individual component inside that app. This allows components to occupy isolated regions of the DOM and still communicate with each other since they are a part of the same app. We then use a globally shared service provider injected by the root app to allow them to communicate.

https://www.mediacurrent.com/blog/building-wundergroundcom-drupal-angular-2-challenge-1-how-bootstrap
http://plnkr.co/edit/A7fyFUST9IdP1FriauXk?p=preview 

(Apparently broken - in latest Angular. See comments)
https://www.mediacurrent.com/multimedia/video/progressively-decoupled-panels 

For working code he recommends: "Decoupled Blocks " Drupal Module

Decoupled Blocks - Drupal Module

This is a very interesting project that is very much inline with our goals. It allows Drupal projects to have some blocks which are provided by an FF. It has the philosophy that you can use a normal component from the FF framework, and add a YAML file to configure how it works in Drupal. 

https://www.drupal.org/project/pdb
https://github.com/mrjmd/pdb
https://github.com/mrjmd/pdb/tree/8.x-1.x/modules/pdb_ng2 (Too much there - but its probably in there.) 

How does it perform the real magic in Angular? Here:

https://github.com/mrjmd/pdb/blob/8.x-1.x/modules/pdb_ng2/assets/app/app.ts

return platformBrowserDynamic().bootstrapModule(AppModule);

Example of a component - here: https://github.com/mrjmd/pdb/tree/8.x-1.x/modules/pdb_ng2/components/ng2_example_1

Areas in Angular

See Dynamic Component Loading 

for a way to have an Area in Angular where components could be dynamically added at runtime.

This may not be necessary since Magnolia would typically reload the page - but it could be interesting.

https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

https://github.com/laco0416/ng-dynamic

"Before you can add components you have to define an anchor point to tell Angular where to insert components."

"ViewContainerRef" seems to be key.

(Look at the AdDirective.)

Dynamic Forms

"It may be more economical to create the forms dynamically, based on metadata that describes the business object model."

https://angular.io/docs/ts/latest/cookbook/dynamic-form.html