Can a component have it's own sub components + viewports?

[0x-r4bbit]

Giving the fact that each component is somehow isolated and independent, I wonder if it's possible to build a component that introduces sub components and viewports for itself, without coming from an outer routing.

Here's what I mean: We know that we can configure the router to map a route to more than one component like this:

app.controller('AppController', function ($router) {
  $router.config([
    {
      path: '/',
      components: {
        viewportA: 'navigation',
        viewportB: 'main'
      }
    }
  ]);
});

Now, when routing to / the components navigation and main are loaded into the viewports viewportA and viewportB.

Now imagine the following scenario:

We have our AppController that maps a route to a componentA like this:

app.controller('AppController', function ($router) {
  $router.config([
    {
      path: '/',
      component: 'componentA'
    }
  ]);
});

Now, the interesting part, componentA has a template like this:

<h1>Component A</h1>
<router-view-port="left"></router-view-port>
<router-view-port="right"></router-view-port>

And a router configuration like this:

app.controller('ComponentAController', function ($router) {
  $router.config([
    {
      path: ???
      components: {
        left: 'subComponentA',
        right: 'subComponentB'
      }
    }
  ]);
});

So componentA is a component, as we know, and it as it's own controller and introduces it's own viewports with it's own router. But as we can see in the code snippet, it's not very clear to what route that maps.

My question is, is that possible at all? That a component is so self-contained that it truly introduces it's own viewports and router? Or do I always have to define my custom "wrapper" route at application level that says "Hey I have this route here and we want to load two components in it.". But that also means, the start template (index.html) needs to have two viewports.

I hope my question is clear, if not please let me know!

[jvandemo]

I think "self-contained" components are essential to component driven Angular development, so yes, I believe it is an absolute must that components can contain their own viewports and have their own router.

If we think of routing as "mounting" components to "paths" where paths are concatenated to form a complete path, then a powerful pattern emerges.

This implies that each component starts from its own root path '/', which is the default path.

So to use your exact example:

app.controller('AppController', function ($router) {
  $router.config([
    {
      path: '/',
      component: 'componentA'
    }
  ]);
});

and:

<h1>Component A</h1>
<router-view-port="left"></router-view-port>
<router-view-port="right"></router-view-port>

with:

app.controller('ComponentAController', function ($router) {
  $router.config([
    {
      path: '/',
      components: {
        left: 'subComponentA',
        right: 'subComponentB'
      }
    }
  ]);
});

would concatenate / and / to form // and finally collapse to /.

Since each viewport creates a new child router, the paths don't conflict and the current router implementation should already support this.

All kinds of combinations are possible:

/ + / => /
/ + /sub => /sub
/main + / => /main/
/main + /sub => /main/sub

This is similar to how express works when mounting express apps using a prefix path.

So in short you can just use / as the path in your component if you don't want the component route to have its own url (you could consider it the default 'state' of the component when the parent component is is loaded).

Hope that makes sense?

@btford, @PascalPrecht — would be great to hear your thoughts on this.

[maximilianmikus]

+1 express style route mounting for components

[csaloio]

@jvandemo I agree that would be ideal, however I don't think it currently works. Whenever I've tried to get a sub component to map a path such as /sub1 ng-link creates hrefs like /.undefined/sub1

It would be great if it worked as you describe but I don't think it does at least right now. I've yet to see any example of how child viewports/routing can be made to work so far.

[0x-r4bbit]

@jvandemo Thank you so much for putting this together. At a first glance, this approach makes totes sense. I wonder if there are some edge cases where this idea won't fit though.

Am I getting that proposal right when thinking that this would also solve nested dependencies? Because in your proposal, you'd in fact assemble components via paths.

[jvandemo]

I agree that would be ideal, however I don't think it currently works. Whenever I've tried to get a sub component to map a path such as /sub1 ng-link creates hrefs like /.undefined/sub1

@csaloio1 — I have noticed that as well and I think it is a bug in the current implementation of the generate() method in the router.

[jvandemo]

@PascalPrecht — I think that makes sense as long as a component is activated first by its parent component.

So in the example above: even if there was a componentB with a ComponentBController that matches the same path (/) as componentA:

app.controller('ComponentBController', function ($router) {
  $router.config([
    {
      path: '/',
      components: {
        left: 'subComponentC',
        right: 'subComponentD'
      }
    }
  ]);
});

componentB would never be loaded, because it wasn't activated by the parent component:

app.controller('AppController', function ($router) {
  $router.config([
    {
      path: '/',
      component: 'componentA'
    }
  ]);
});

Does that make sense?

Thanks for sharing your thoughts!

[0x-r4bbit]

@jvandemo Yes, get it!

[afitterling]

+1 (btw, has anyone setup a working example on github?)

[csaloio]

Does this being on the backlog milestone mean that this is not happening any time soon? Because if so, I can't see how one could ever use this router in anything beyond demoware.

[btford]

@csaloio1 – this is already implemented. All that remains is to document it better to resolve @PascalPrecht's question.

[csaloio]

@btford That is great to hear. Looking forward to the documentation.

[upta]

@btford Just to clarify, does this only work if the child routes have some path beyond just '/'?

In my testing (granted, I'm very new to the new router ;), using the example from @PascalPrecht doing this threw an error:

app.controller('ComponentAController', function ($router) {
  $router.config([
    {
      path: "/",
      components: {
        left: 'subComponentA',
        right: 'subComponentB'
      }
    }
  ]);
});

but this worked (not allowing for a default setup for child components, since I'd have to route to /test):

app.controller('ComponentAController', function ($router) {
  $router.config([
    {
      path: "/test",
      components: {
        left: 'subComponentA',
        right: 'subComponentB'
      }
    }
  ]);
});