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?

[pavelgj]

Not really, this is a separate feature. #435 was a prerequisite.

[sethladd]

This works, thanks!

[chalin]

This still in the works?

[pavelgj]

Yes, it's still being considered. It's just not as simple as it seems -- it makes expression extractor a bit more complicated.

[mhevery]

@pavelgj Can you work on this or should I find someone else?

[pavelgj]

@mhevery This requires changes to the expression extractor transformer, so it's a bit more work than I expected. I can work in this, but it's not very high on my todo list (next week?).

[michalpie]

Specifying view html for a route will be a great feature we badly lack. It will allow not only to specify a component, but also to pass attributes to it. Currently we have to use a workaround described by me here: #837, which is not correct as it causes ng-view to be reevaluated each time, even if not needed.

[pavelgj]

@mhevery, please take a look at PR #908

[pavelgj]

This is now implemented. You can route to an inline template (viewHtml). Ex:

    views.configure({
      'foo': ngRoute(
          path: '/foo',
          viewHtml: '<foo-component></foo-component>')
    });

[sethladd]

Thanks!

[kemallette]

It was a treat cleaning out a bunch of extra view files today. Thanks for the hard work everyone! :)

[michalpie]

Thanks a lot - we have updated our code to use the new feature and it works perfectly.