Skip to content

makeComponentTemplate() general applicability #3409

Closed
@ksamborn

Description

@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 });
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions