feat(1.x): support routing to a directive

[davej]

If the router supported 'component-based' directives (including the directive's template) then it would give a nice path for migrating controllers/components to angular 2.0.

Any thoughts on achieving something like below?:

angular.module('app', ['ngNewRouter'])
  .directive('componentDirective', function() {
    return {
      templateUrl : 'componentDirective.html',
      controllerAs : 'ctrl',
      controller : function() {
        // Controller here
      }
    }
  });
  .controller('AppController', function($router) {
    $router.config([
      {path: '/', component: 'componentDirective' }
    );
  });

[hannahhoward]

+1 a directive seems more analogous to a component than a controller + view. on the other hand it's been pointed out several times that the 1.x DDO api is very complicated for beginners.

[threehams]

+1 Been using this pattern for a while, rather than the module approach in the examples. Changing to a component structure through modules would be a pretty major change, which I wouldn't want to make unless it's part of a more official 2.0 migration path.

Maybe allow {path: '/', directive: 'componentDirective'} for this approach? I'm not a fan of complicating APIs with extra options, but it would be more explicit about intention.

[btford]

Thanks for the proposal, @davej! I'm definitely considering it.

[btford]

See also – angular/angular.js#10007

[davej]

Yeah, when I heard the identifier for the router was 'component', I assumed that it was a tie-in with the new component helper syntax. I was surprised when the new router didn't support it. Anyway, great news! :-)

Component directives + the new router is a good bridge to making the 2.0 transition easier.

[jeffwhelpley]

This is a no brainer. Implement angular.component and then use that in the router. I wouldn't bother with the directive implementation unless for some reason you don't want to build angular.component in 1.5.

[davej]

I wouldn't bother with the directive implementation unless for some reason you don't want to build angular.component in 1.5.

angular.component is just a shorthand for a directive, the router does not need to make a distinction between a component or a directive, nor should it IMO.

[jeffwhelpley]

Sure, it's no big deal either way. I was just saying don't bother because the point of angular.component is to align your app with 2.0. There are no current apps using the new router since it just came out so you might as well just have everyone move right do components. But, sure, if you want to use directives for some reason.

[timkindberg]

👍 I thought of this as soon as I heard the new router was component based as did several of my coworkers. In fact I've heard one or two people say it's "directive-based", clearly misunderstanding, but justified I think. Some way to load a directive that has a template and controller just makes sense.

[busypeoples]

+1 This is what I thought the new router would be able to do out of the box. Would be very helpful if there was the option to use directives as mentioned by @threehams.

angular.component is just a shorthand for a directive, the router does not need to make a distinction between a component or a directive, nor should it IMO.

@davej +1

[butchpeters]

How would this work with a directive (component) that has attributes? Normally, I would consume a directive like a web component might be consumed:

<my-component attr1="value1" attr2="value2"></my-component>

So, if I want to use the router to compose my UI now, I would replace the directive with a viewport

<div ng-viewport="left"></div>

and then load my directive with the route config?

$router.config([
  {path: '/somepath', component: {left: 'myComponent', right: 'somethingElse'}}
]);

Would I need to somehow configure the $routeParams to contain all the attributes that all my components will need, or will there be another way to do this?