Support routing directly to a component

[sethladd]

My views are simple, they just have a single custom component. I'd much rather route directly to a component, and remove the view altogether.

ex:

components/
  thing.dart
  thing.html
views/
  thing.html

thing.html:

<thing></thing>

[pavelgj]

@sethladd Are you thinking something like this?

    router.root
      ..addRoute(
          name: 'foo,
          path: '/foo',
          enter: view(component: 'my-component')

or more generic?

    router.root
      ..addRoute(
          name: 'foo,
          path: '/foo',
          enter: view(html: '<my-component></my-component>')

[shailen]

How about something like this?

  router.root
      ..addRoute(
          name: 'foo,
          path: '/foo',
          enter: component('my-component')

[sethladd]

Either view(component: 'my-component') or component('my-component') or probably better yet: component(MyComponent)

I like the last one, because strings are hard to get right (no static analysis)

[sethladd]

BTW if we can get this, it is a huge win for ease of use. Thanks for considering!

[pavelgj]

I'm actually looking into different angular specific route definition DSL. Early draft:

 view.configure(router, {
   'foo': ngRoute(
       path: '/foo',
       view: 'foo.html',
       mount: {
         'bar': ngRoute(
             path: '/bar',
             component: 'bar-component',
             defaultRoute: true
         ),
         'baz': ngRoute(
             path: '/:baz'
         )
       }
   ),
   'qux': ngRoute(
       path: '/qux',
       view: 'qux.html'
   )
 });

[shailen]

I like component('my-component') and component(MyComponent) but prefer the former because it is more consistent with how routes generally seem to be specified.

[pavelgj]

Actually, I thought about it more, and it seems like component('my-component') is not really possible. The reason is because components can be defined with arbitrary selector, including attribute/content selector. Components are not always "custom tags". For example: foo[bar=baz].

component(MyComponent) would be the preferable way to do it, however currently there is no way in angular.dart to create "a new instance of a given component".

The first iteration will probably have to be view.html('<my-component></my-component>') or view.html('<foo bar="baz"></foo>') or in the new DSL viewHtml: '<foo bar="baz"></foo>'

[bgourlie]

@pavelgj Can you create an issue regarding the route definition DSL you're looking into? I have some feedback but don't want to go off-topic in this issue.

[pavelgj]

@bgourlie #435

[sethladd]

view.html('<my-component></my-component>') should be sufficient. I didn't realize Angular Components can have non-element-name selectors.

Thanks, really looking forward to it.

[jbdeboer]

@sethladd @pavelgj Is #435 good enough to close this issue?