makeComponentTemplate() general applicability

[ksamborn]

This is a General Query

My version of UI-Router is: 1.0.0-rc.1

• I believe my question can only be answered by the UI-Router maintainers

Route to component is fantastic - extremely impressive work!

One of the best features is to dynamically create templates where components are assigned to named ui-views. In our case, these templates are coming from the back end and are setup in a database.

We have implemented this by making use of lazyLoad (ie. Future States) and the newly introduced bindings declared on the uiView #3239 (as well as resolves to get data available by promise).

It occurs to me that one of the best features of UI Router route to component is the template factory and specifically the makeComponentTemplate() function.

In fact, this would be fantastically useful outside of when a component is assigned to a state. It would nice to be able to use this throughout the DOM.

Below is pseudo code for our implementation.

My questions are:

1. Is this a good methodology, and
2. does something like makeComponentTemplate() exist for Angular in general, outside of the navigation and states?

Thanks!

Kevin

--

We have a grandparent component containing a ui-view named "content".

And, using lazyLoad, we build the states at runtime and assign the appropriate component to it's content view, for example, "horizontalLayout".

The crafted parent state looks like this:

{
    name: app.horiz,
    url: 'horiz'
    views: {
        content: 'horizontalLayout'
    },
    resolve: {
        config: ...
    }
}

and the generated HTML looks like this:

<div ui-view="content" class="container-fluid">
    <horizontal-layout config="::$resolve.config">         

The "horizontal" component's template itself contains several ui-views, each of which is named by a slot.

The crafted child state looks like this:

{
    name: app.horiz.render,
    views: {
        LEFT: 'thisComponent',
        RIGHT: 'thatComponent'
    },
    resolve: {
        inputData: ...
    }
}

and the generated HTML looks like this:

<div ui-view="LEFT" param="leftData" outputCallback="$ctrl.childChanged('left', output)>
    <this-component param="leftData" outputCallback="$ctrl.childChanged('left', output) config="::$resolve.config" inputData="::$resolve.inputData">

<div ui-view="RIGHT" param="rightData" inputData="$ctrl.data" outputCallback="$ctrl.childChanged('right', output)">
    <that-component param="rightData" outputCallback="$ctrl.childChanged('right', output) config="::$resolve.config" inputData="::$resolve.inputData">

(And, there could be another state name "vert" where it's component is "verticalLayout" which has two views, "TOP" and "BOTTOM").

We use the param field so that thisComponent and thatComponent can find their data. And the outputCallback is presetup so the parent knows who is talking to them.

In the controller for this thisComponent and thatComponent, they can do this to find their data and callback for changes:

bindings: {
    param: '@',
    config: '<',
    inputData: '<',
    outputCallback: '&'
},
controller: function() {
    this.myConfig = this.config[this.param];
    this.myData = this.inputData[this.param];

    informParent: function() {
        this.outputCallback({ output: this.myData });
    }
}

[stale]

This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues
may be reopened.

Thank you for your contributions.